kepsteen/fitlog

A dynamic HTML, CSS, and TypeScript application for fitness enthusiasts to search for exercises and create custom workout plans

Fitlog

A front-end JavaScript application for fitness enthusiasts to search for exercises, learn more about them and create custom workout plans

Why I Built This

As a avid gym goer I wanted to build a simple interface to search for new exercises and create my own customized workout plans

Technologies Used

• TypeScript
• HTML5
• CSS3

Live Demo

Try the application live at https://kepsteen.github.io/fitlog/

Features

• Users can search for exercises
• Users can view exercise details
• Users can favorite exercises
• Users can view their favorite exercises
• Users can create a workout plan
• Users can view workout plans
• Users can add exercises to workout plans
• Users can assign the exercises to each day

Preview

fitlog's Issues

Feature: User can add exercises to workouts

⚙️ Feature

What capability will users have when this feature is merged?

User can add exercises to created workouts

📐 Functionality

A description of how the application will work from the perspective of the user.

User can click add to workout icon on the exercise card or on the button in the exercise details view and then choose which workouts to add the exercise to.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• ...
• Add the following HTML elements:
  • Add to workout button in exercise details section
  • Add to workout modal:
    • add to workout form
• Add an id property to the workout object and a nextWorkoutId property to the fitlogData object
• Refactor the callback function of the new workout form event listener to give each created workout a unique workout id
• Refactor render exercises function to include the pencil icon to each card rendered
• Refactor the event listener on the card list to check if the target is the pencil icon with a callback function that does the following:
  • Render the add to workout form with a list of the created workouts and checkboxes
    • Each checkbox should have a data-workout-id attribute with the associated id of the workout
  • show the add to workout modal
• Add an event listener to the add to workout form to listen for a submit event on the form with a callback function that does the following:
  • Adds the exercise to the selected workout
  • closes the modal
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Clean Up
  • Remove all buttons and placeholders that do not serve the functionality of the feature.
  • Remove all console logs.
  • Remove all commented out code.
  • Remove all CSS properties that have no effect.
  • Check all code for proper formatting and indentation.
  • Confirm that there are no errors in the console while using the application.
  • Confirm that all previous functionality still works without errors.
  • Confirm that the user interface looks natural on both mobile and desktop screens.
  • Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: User can create a workout plan

⚙️ Feature

What capability will users have when this feature is merged?

User can create a new workout plan

📐 Functionality

A description of how the application will work from the perspective of the user.

User can redirect to the the create page and select from several options to create a custom workout plan

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• ...
• Give the fitlogData object a property workouts that will contain an array of workout objects
• Create a new section element in HTML with data-view="new-workout"
  • Add form element with an input for the name of the workout, a select element for the number of days per week and a submit button
• Add the links to the navbar and hamburger menu
• Style the page and the form to be consist with the rest of the application
• Add an event listener to the form that listens for the submit event with a callback function which adds the workout object to the workout array of the workouts property of the fitlogData object
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Clean Up
  • Remove all buttons and placeholders that do not serve the functionality of the feature.
  • Remove all console logs.
  • Remove all commented out code.
  • Remove all CSS properties that have no effect.
  • Check all code for proper formatting and indentation.
  • Confirm that there are no errors in the console while using the application.
  • Confirm that all previous functionality still works without errors.
  • Confirm that the user interface looks natural on both mobile and desktop screens.
  • Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: User can favorite Exercises

⚙️ Feature

What capability will users have when this feature is merged?

Users can favorite exercises

📐 Functionality

A description of how the application will work from the perspective of the user.

User can click on the heart icon and the application will save the exercise object to local storage

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• ...
• refactor render Exercises to omit description in cards
• Add favorited property of type boolean to Exercise interface
• Refactor fetchExerciseDetails Function to do the following:
  • assign default value of favorited property of exerciseObj to false
  • conditionally check by baseId if the exerObj to be returned exists in data.favorites and reassign favorited property accordingly
• Create a fitlogData object that has one property favorites that will contain an array of the users favorite exercise objects
• Refactor the render exercises function to do the following:
  • to create a heart icon in the bottom corner of the card
  • conditionally check if the exercise object's favorited property is true/false and render a solid/regular heart icon accordingly
• Create a function called findExerciseByBaseId which takes the baseId of the exercise as an argument and returns the associated exercise Object
• Refactor the populateExerciseDetails function to give the section a data-base-id attribute with a value that matches the baseId of the exercise object populated
• Create a function handleFavoriteClick which takes two arguments exerciseObj and targetIcon that does the following:
  • conditionally checks the status of the heart icon and updates it to reflect if the exerciseObj has been favorited or unfavorited
  • Adds or removes the exerciseObj from the favorites property of the fitlogData Object accordingly
• Add an event listener on the document to listen for a click event on a heart icon with a callback function that does the following:
  • Conditionally checks if the event target from a card or the details section
  • Get the value of the data-base-id attribute of the card or the details section
  • call the findExerciseByBaseId function and pass the baseId value as an arugment and assign the result to a variable named exercise
  • Call the function handleFavoriteClick and pass the exercise variable as an argument
• Add an event listener on the window to listen for a before unload event with a callback function that does the following:
  • stringifys the data object
  • Uses the set item method of the localStorage object to save the stringified data to local storage
• Add an event listener to listen for the Dom content loaded event on the document object with a callback function that does the following:
  • Uses the get item method of the localStorage object to retrieve the json data from local storage
  • if there is data in local storage parse it and reassign the parsed data to the global data object
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Clean Up
  • Remove all buttons and placeholders that do not serve the functionality of the feature.
  • Remove all console logs.
  • Remove all commented out code.
  • Remove all CSS properties that have no effect.
  • Check all code for proper formatting and indentation.
  • Confirm that there are no errors in the console while using the application.
  • Confirm that all previous functionality still works without errors.
  • Confirm that the user interface looks natural on both mobile and desktop screens.
  • Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: User can view view favorite exercises

⚙️ Feature

What capability will users have when this feature is merged?

User can view a list of their favorite exercises

📐 Functionality

A description of how the application will work from the perspective of the user.

User can click the favorites link in the navbar and redirect to the favorites page and view a list of their favorite exercises

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• ...
• Create a new section element in the HTML with data-view="favorites-view"
  • create a container with a class of card-list
• Add favorite links to header
• Refactor header event listener to view swap to favorites if favorites link clicked
• Add event listener to document to listen for DOM content loaded with a callback function that does the following
  • Render the favorite exercises in the favorites-view
• Refactor handleFavoriteClick to add/ remove exercises from favorites-view
  • Make sure favorited status updates accordingly on both favorites-view and exercises-view
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Clean Up
  • Remove all buttons and placeholders that do not serve the functionality of the feature.
  • Remove all console logs.
  • Remove all commented out code.
  • Remove all CSS properties that have no effect.
  • Check all code for proper formatting and indentation.
  • Confirm that there are no errors in the console while using the application.
  • Confirm that all previous functionality still works without errors.
  • Confirm that the user interface looks natural on both mobile and desktop screens.
  • Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: User can Search for Exercises

⚙️ Feature

What capability will users have when this feature is merged?

User can Search for Exercises and view the results

📐 Functionality

A description of how the application will work from the perspective of the user.

The user can input different search terms such as the name of the exercise or muscles and the app will return a list of cards containing info about the exercises that match the search term

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• ...
• Create the responsive navbar
  • style for mobile devices first
• Create the HTML for the body
  • Add an input input element for the search bar
  • Add the Logo to be displayed when there are no exercises displayed
  • Create a home view and a exercises view
• Create a list of views that contains the different views
• Create a function viewSwap to switch views from home to exercises-view
  • Iterate through the array and conditionally remove or add the hidden class to hide or show views
• Create an event listener that listens for submission on the form in the search bar with a callback function that does the following:
  • prevent the default action of the form submission
  • call view swap to swap to exercises-view
  • requests the /api/v2/exercise/search/ endpoint with the language and search parameter
  • Parse the data
  • Creates an array of exercise objects with properties: exercise name, image and description
  • creates a card for each exercise object in the array and display the card on the screen
  • if no exercises are found matching the search term display a message for the user and the logo
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Clean Up
  • Remove all buttons and placeholders that do not serve the functionality of the feature.
  • Remove all console logs.
  • Remove all commented out code.
  • Remove all CSS properties that have no effect.
  • Check all code for proper formatting and indentation.
  • Confirm that there are no errors in the console while using the application.
  • Confirm that all previous functionality still works without errors.
  • Confirm that the user interface looks natural on both mobile and desktop screens.
  • Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Polish project

✅ Task List

Commit checklist for tasks needed.

• Clean up nav-bar
• Add loading spinner HTML and CSS
• Refactor fetchExercise Data to reveal the loading spinner and hide it once the data is received
• Refactor code to make it more concise and cohesive
• Find any repeated code and attempt to turn into a function
• Change renderExercises to take simpler exerciseObj as parameter because to render the cards you only need the baseId, image and name
• fetch the additional exercise details only (hit the baseId endpoint) after an exercise is clicked
• Make sure to validate any queries and query globally if an element is going to be queried multiple times
• For the loadingImg, query both the penguin and the weightplate separately and then in the fetchExerciseSearchData check which one should be displayed based on the search term
• create separate findExerciseByBaseId functions based on the place where user is searching (exercises view, favorites view and workouts view)
• Any functions that take the Exercise Object (handleFavoriteClick, etc) as a parameter may change to handle a simpler Exercise Object (name, image, baseId)
• Instead of clearing and adding the workouts to the addExerciseForm each time the form is rendered, the form should be rendered once when the DOM content is loaded and then items added/removed as the workouts are updated
• Verify the consistency of the site's theme.
  • The <title> should fall in line with the site's overall purpose. ajax-project is not specific enough.
  • Replace the default favicon included in the project's index.html file with an image that is thematically related to the app.
  • The site's brand (logo and/or text) should be visible and consistently placed on every page. Clicking the site's brand should navigate the user back to the home page.
  • A main heading (<h1>) should be visible near the top of every page. It should indicate which page the user is currently on. It should be consistently placed on every page (excluding the landing page, which may have it somewhere more prominent).
  • Site navigation links should be visible and consistently placed on every page of the site.
  • Every page of the site should use a consistent color pallette consisting of 2-5 colors (excluding images and videos). All text should either be light-text-on-dark-background or dark-text-on-light-background to keep text readable.
• Verify the site's HTML has good semantics. For any changes to the HTML structure, update the CSS as-needed to prevent the UI from breaking.
  • Each tabular list of things should be in a well-structured table (<table>).
  • Each non-tabular list of things (including, for example, site navigation or a grid of images) should be in a well-structured list (<ul> or <ol>).
  • All form control elements (input, select, textarea, etc.) should be in a form element.
  • Each input with special input restrictions should have an appropriate input type (type="number" for numbers, type="email" for emails, etc.).
  • Event handler functions for form elements should be applied to the "submit" event on the form element, not a "click" event on the "Submit" button..
  • Each clickable element that sets inputs back to their default state should be a reset button (type="reset") for the form (<form>) containing those inputs.
  • Each clickable element that triggers navigation within the page or to another page/site should be an anchor tag (<a>).
  • Each image which is important to the content of the site (not just for visual appeal) should be an image tag (<img>).
• Verify the site's layout fits and effectively uses space on all commonly-used device sizes, including:
  • Wide-screen Desktop/Laptop (1920px-by-947px)
  • iPhone X (portrait and landscape)
• Verify that each interactive element on the site looks and feels interactive:
  • Links should be colored differently from surrounding text (if text is dark, the default blue usually works) to stand out. Hovering over a link should change the cursor to a pointer.
  • Buttons should clearly stand out from the surrounding content, using a different background-color and/or a border. Hovering over a button should change the cursor to a pointer and change the button's appearance in some way (color, text-decoration, outline, box-shadow, background-color, etc.) without changing the button's overall size or position.
• Verify that each API request (that isn't part of initial page load) handles network wait times and failures gracefully (test using inspector Network tab):
  • While an API call is in-progress, a loading message or animation should be displayed. When the API call stops (regardless of outcome), the loading message/spinner should disappear.
  • When a GET API call responds with an empty data set (no error), the client should display an appropriate message.
  • When an API call produces an error response, the client should communicate it to the user appropriately.
• Verify that the following common issues are addressed:
  • Address any console errors (other than a missing favicon), if possible.
  • Ensure no images are stretched out of their natural aspect ratio, regardless of screen size.
  • In tables, fixed-decimal columns (such as currencies) are right-aligned to keep decimal points aligned.

Feature: User can view exercise details

⚙️ Feature

What capability will users have when this feature is merged?

Users can view the extended details of an exercise including the primary and secondary muscles targeted by the exercise

📐 Functionality

A description of how the application will work from the perspective of the user.

On the exercises page the user can click into an exercise and see a zoomed in view of all the details of the exercise

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• ...
• Add more descriptive alt values to images
• Create a new section with a data-view="exercise-details"
• Create the HTML layout and the styling to display the Name, image, primary muscles, secondary muscles, description and equipment required in the exercise details view
  • Add the heart icon and add to workout button for later features
• Refactor the fetchExerciseDetails function to add the equipment data to the exerciseObj
• Refactor the render exercises function to give each card rendered a data-id attribute with a value of baseId
• Refactor the viewSwap function to handle the new view
• Add an event listener on the card list to listen for a click event with a callback function that does the following
  • viewSwap to the exercise-details view
  • Loop through the exerciseObjArr to find the exerciseObj with a baseId that matches the data-id attribute of the target
  • Populates the exercise details view with the data in the exerciseObj
• Add an event listener to the navbar to make the Exercises anchor tag viewSwap to the exercises view
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Clean Up
  • Remove all buttons and placeholders that do not serve the functionality of the feature.
  • Remove all console logs.
  • Remove all commented out code.
  • Remove all CSS properties that have no effect.
  • Check all code for proper formatting and indentation.
  • Confirm that there are no errors in the console while using the application.
  • Confirm that all previous functionality still works without errors.
  • Confirm that the user interface looks natural on both mobile and desktop screens.
  • Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: User can Delete Exercises from Workouts

⚙️ Feature

What capability will users have when this feature is merged?

User can remove an exercise from a workout

📐 Functionality

A description of how the application will work from the perspective of the user.

User can hover over an exercise to reveal a red x and the user can click the x to remove the exercise from the workout

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• ...
• Refactor the renderWorkouts and renderAddedExercises functions to append a red xmark to each list element with class of hidden
• Create an event listener on the workout-data-container to listen for a mouseover event with a callback function that does the following:
  • removes the hidden class on the xmark icon that has a settimeout to hide the icon after a short time
• Create an event listener on the workout-data-container to listen for a click event on the xmark icon with a callback function that does the following:
  • removes the element from the DOM
  • removes the exercise from the workouts object
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Clean Up
  • Remove all buttons and placeholders that do not serve the functionality of the feature.
  • Remove all console logs.
  • Remove all commented out code.
  • Remove all CSS properties that have no effect.
  • Check all code for proper formatting and indentation.
  • Confirm that there are no errors in the console while using the application.
  • Confirm that all previous functionality still works without errors.
  • Confirm that the user interface looks natural on both mobile and desktop screens.
  • Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: User can view workouts

⚙️ Feature

What capability will users have when this feature is merged?

User can view workouts and assign exercises to each day of the workout

📐 Functionality

A description of how the application will work from the perspective of the user.

User can view the workouts and drag and drop the exercises from the exercises list into specific days

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• ...
• Refactor workout object to make days an array of day objects
  • each day object will have a key of the day number and a value of an array of the exercises for that day
• Create a new section in the HTML with a data-view="workouts-view"
• Create a renderWorkouts function that has 1 parameter workout object that performs the following:
  • Creates the workout container containing the workout name, the right carat icon and the columns for the workout data
  • Creates one column for the exercises to be assigned
    • Adds each exercise name of the workout.exercises array to to an unordered list in the column with the draggable attribute
    • gives each exercise list item a data-base-id="exercise.baseId" and a data-workout-id attribute with the value of the workout id to which the exercise belongs
  • Conditionally renders one column for each day of the workout.days array with title Day 1, Day 2 etc that contains a ul element with a data-num-day attribute with a value of the corresponding day object key.
    • Render the exercises that are in the exercises array of the day object
• Add an event listener to the right carat icon that listens for a click event with a callback function that does the following:
  • turns the carat 90 degrees
  • displays the workout data columns
  • queries a node list of the exercise list items that match the workout-id of the workout displayed
  • Add an event listener to each list item to listen for a 'dragstart' event with a callback function that does the following:
    • clears the dataTransfer cache with clearData() method
    • Use setData method to set the data to be transfered as the exercise list item's data-base-id value
  • Query all the ul elements of the day columns for the workout with a matching workoutId
  • For each ul element create a event listener that listens for a dragover event that prevents the default behavior
  • For each ul element create an event listener that listens for the 'drop' event with a callback function that does the following:
    • prevents the default behavior of the event
    • gets the data-base-id value of the dragged element with the getData method of the dataTransfer object
    • queries for the dragged element with the data-base-id
    • appends the dragged element to the ul element
    • Searches the fitlogData.workouts array to find the corresponding workout that matches the data-workout-id of the ul element
      • Remove the corresponding exercise from the workout.exercises and add it to the corresponding exercises array for the day that matches the ul elements data-num-day value
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Clean Up
  • Remove all buttons and placeholders that do not serve the functionality of the feature.
  • Remove all console logs.
  • Remove all commented out code.
  • Remove all CSS properties that have no effect.
  • Check all code for proper formatting and indentation.
  • Confirm that there are no errors in the console while using the application.
  • Confirm that all previous functionality still works without errors.
  • Confirm that the user interface looks natural on both mobile and desktop screens.
  • Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.