JS-Rails project

(https://github.com/RoUchiha/flatiron-phase-4-portfolio-project)

This project felt like an extension of the previous Phase 3 project, and showed how everything I have been learning is building up my foundation. Overall, I think this project was the best implementation of my current coding knowledge since it mimics how a real website would work and interact with a user.

For this Phase 4 portfolio project, I decided to create a Workout Planner that allowed users to create exercises and add them to a workout. The "workouts" were actually the 7 days of the week, so the user would add the exercises to the days they plan to do them on. Each exercise had a name, a category (resistance, cardio, or calisthenics), sets (if it was resistance or calisthenics), and distance (if it was cardio). Each time a new exercise was created, it would be added to the appropriate day without reloading the page. Once an exercise was added to a workout, there would be a button for the user to delete the exercise if they wanted.

Setting up the backend for this project was the easiest part since I have a good amount of familiarity with Rails, and using Rails as an API also means less coding since there are no views to write up. I originally had a more complicated project in mind before I was humbled by how much I still have to learn when it comes to robust sites like the ones we are used to visiting everyday.
After creating the models and controllers, I made the serializers and then checked localhost for the seed data I created, and everything ended up being how I wanted it to be, so I finally switched over to working on the frontend.

class ExerciseSerializer < ActiveModel::Serializer

    attributes :id, :name, :category, :sets, :distance, :workout_id

end

class WorkoutSerializer < ActiveModel::Serializer

    attributes :date, :name, :id, :exercises
    has_many :exercises

end

My main struggles with this project came from setting up the frontend, not necessarily because the coding was difficult, but because I am so used to thinking in Rails and JavaScript is still a new language to me. I would have ideas on how to proceed with the project, and then realize the method or function I wanted to use doesn't exist in JS and had to be written manually. Because of this, I spent a lot of time thinking about my code in Rails, then googling what that Rails code would look like as JavaScript and testing it out. The resource links at the bottom of Canvas lessons was very helpful for this task, and I highly recommend all students visit them. Things like fetch requests were easier than I expected since they follow a standard pattern, and most of my methods were identical between the two classes I implemented. There were also a few JS concepts that were similar to concepts I learned in Ruby/Rails, such as 'constructor' reminding me of the 'initialize' method from way back. Finding the similarities between the two languages really helped me grasp what I needed to do and how to go about doing it. After setting up my JS classes and methods, I coded up some HTML to setup my website and had the basic structure for what I wanted, as well as all functions properly working.

class WorkoutServices {
    constructor(baseURL) {
        this.baseURL = baseURL; 
    };

    getWorkouts() {
        fetch(this.baseURL) 
        .then(resp => resp.json()) 
        .then (json => {
            json.forEach(workout => {
                const workouts = new Workout(workout);
                workouts.renderWorkout();
            });
        });
    }

class Workout {
    constructor({name, date, exercises, id}) {
        this.name = name;
        this.date = date;
        this.exercises = exercises;
        this.id = id;
    };

    renderWorkout() {
        const workoutAll = document.getElementById("workouts-container");
        workoutAll.classList.add("workout");

        const workoutName = document.createElement("h2");
        workoutName.innerHTML = this.name + "'s workout";
        workoutName.name = this.name;
        workoutName.classList.add(`workout-data`);

        workoutName.id = `workout-${this.id}`;

        workoutAll.appendChild(workoutName);

        const exerciseList = this.renderExercises(); 
        workoutName.appendChild(exerciseList);
    };

    renderExercises() {
        const exercises = this.exercises;
        const list = document.createElement("ul");

        exercises.forEach(exercise => { 
            const newExercise = new Exercise(exercise); 

            console.log(exercise, "exercise");

            const nameList = newExercise.renderExercise();

            list.appendChild(nameList);
        });
        return list;
    };
}

Surprisingly, the most enjoyable part of this project was the CSS styling portion. It was fun seeing what properties I could assign to different elements and then seeing those changes reflected on the website. I kept everything pretty basic since I didn't want to distract from the core functionality of the project, just make it slightly more appealing to look at. I used the dev console (F12) to see which elements were which and how I wanted to style them. I placed borders around each workout and around the exercise form to make all the text appear more organized and less overwhelming to look at.

All in all, this project was a great learning experience for what I assume is expected of a full-stack web developer, and I hope to strengthen my backend & frontend development skills further so that I can make bigger and better websites in the future.