Flatiron Javascript Project
After Ruby Ruby and more Ruby, we have finally transitioned to Javascript! New syntax, new DOM interactions, and a separate backend, WHAT?! This project’s parameters were wide open, we just needed to include one many to many relationship and keep the javascript in an OO style. Coming up with an idea was a little difficult because of this. I initially wanted to make a game, but the backend portion of my project was almost non-existent, and after some more thought I decided to build my exercise routine maker.
This project was a practice in process for me. I came up with the idea and planned my models and relationships (as my last projects have taught me to do), then I had to start building, and this time I did things a little differently. Instead of building horizontally (make backend completely then move to frontend), I built vertically (building model and displaying that data in the dom before moving to next model). This wasn’t a pure vertical build, but this process REALLY worked for me.
Once I figured out how to store my routine data in the database; I used a text data type and put a string formatted as:
“exerciseName : sets x reps, ”
for each exercise in the routine. I was off and running. I built out the exercise models first. I got their names and description to display in the DOM, and implemented a hover feature that reveals their description. I built a form for adding a new exercise and then moved to the routines.
This way of working allowed me to stay on track even when I stepped away from the project for long periods of time. I never felt like I lost my place, and I always had some content working in the DOM, so that made seeing the changes I wanted to make much easier. Build vertically for the win!
Another new aspect of my workflow was using branches in git. This may seem like a no-brainer for veteran coders, but with the small-scale projects I have built, I hadn’t used the feature at all. I made more branches at the beginning of the project when things were on the verge of working or not, and used them much less towards the end when the features I was working on were pretty isolated. For those that do not know, branching is a way to work with the current code that you have without altering the original, it’s kind of like a save point. I was very happy to get some experience using this feature of git as I think it is a necessity in the wild.
So after getting the full build done it was time to style the UI. This does not feel like my strong suit. I kept the design very simple, with a title, forms at the top of the page, and small divs in a grid for displaying the routines. I tried to choose colors that were pleasant (aquamarine, and mustard yellow) as my accents and kept to different shades of gray for the background, overall I am happy with the pallet. To position the routines I used CSS Grid and a flexbox for the forms. This project is meant to be a single-page application and that felt limiting in how I could present the forms, but the final build gets the job done. I just trust that with more CSS experience that my designs will improve.
As I approach my final projects I feel more and more confident in my abilities and excited to try new things in programming. To relate it to music, I feel like I'm not just playing scales now, but playing music.
