My first Javascript project

I’ve learned quite a few things over the course of the Flatiron program. The first of which being that proper planning is key. I started my first javascript project the same way I’d started my rails project, planning out my data structure. I wanted to make a snappy, simple, one page workout tracker. I used to be a personal trainer and I always felt like the workout trackers were overly complicated. I wanted to have a Workout class with a name (ex. Chest and Back day), a date, some notes (ex. Not feeling well today, gonna be a tough one), and finally Exercises. So I’d set up an Exercise class too that belongs_to a Workout. Exercises would have a name, sets, reps, weight, and notes.

The concept of using rails as an API was really exciting to me. It was one of those “Ah ha!” moments. A lot of the JS module had me thinking to myself “So that’s how it all comes together.” It was amazing to me that I could use rails new with the api tag to spin up a whole back end. Using scaffold for Workouts and Exercises helped me to create almost my entire backend in a mere minutes. I thought, “well, this will go quickly.” Little did I know how unwieldy Javascript can get, and how fast.

I started in index.js. My mistake was starting with getting everything I thought I’d need on the page. I used getElementById while thinking about everything I could possibly need to get. This was a mistake because I ended up needing to get very little and I realized I could just get it if/when I needed it. For instance, when submitting my form for a workout I needed to get the name, date, and notes right then. So I put it in the submit function. Same would be true for the exercise form. Working through index.js and planning to separate concerns later made the whole process extremely messy for me. I couldn’t remember where or how deep in the file some functions were, which form was which. It was totally overwhelming.

Once I broke things down into separate classes things started clicking for me, and it was much easier to work through and understand. Thinking in terms of functionality, and passing a function to another function under some condition was hard for me to wrap my head around at first, but putting the pieces together was a valuable exercise. Thinking in terms of getting things, altering things, listening for events, and learning about state was huge for me in my growth toward being a software engineer. This was a fun project that I hope to continue tinkering with as I improve.