JavaScript / Rails Project
Flatiron School’s Phase 4 software engineering project was to create code for a Single Page Activation that includes a Rails backend and HTML / CSS / JavaScript frontend, using Object Oriented JavaScript to encapsulate related data and behavior. My project is a simple Workout Menu, which provides a list of exercises and reps for three different workouts. The user has the ability to customize the workouts by adding exercises and reps to each workout, and deleting existing exercises and reps within the workouts.
This first step was creating the Rails API backend by following these instructions. The primary relationship model served by the Rails backend includes a Workout that has many Exercises.
I ran into an issue on the backend when I tried to migrate the databases.There was a typo in my exercise model and the foreign key wasn’t being created. After fixing the typo, I ran the code below to drop the database, create a new database, migrate the database again and seed the data.
rails db:drop
rails db:create
rails db:migrate
rails db:seed
Once the backend was set up and the Rails server was running (by typing “rails s” or “rails server” in the terminal), I was ready to get started on the frontend. The first thing I did was to check my endpoints to make sure they were pulling in the json object correctly from Rails, and they were.
I ran into a bug on the frontend which required a significant amount of time troubleshooting. The exercise rep attribute was not rendering when a user entered information into the form. The exercise name attribute was working fine and I originally thought there was an issue with the RenderExercises function. After trying a few different things, it still wouldn’t resolve. By using “debugger”, I realized that the reps were showing up as “null” in the console, so I knew that it wasn’t just that the reps were not rendering, but the rep inputs weren’t being accepted into the object. I went to the backend file and noticed in the console that reps weren’t being allowed and realized it might be an issue with params. I was right! Reps was indeed missing from the def exercise_params method in the Exercises controller. This resolved the bug and reps began rendering properly on the page after being entered on the form.
Overall, this project was a great learning experience and I’m looking forward to digging even deeper into JavaScript in the future!
