The

DayList

HTML & CSS || JavaScript || React

Visit The DayList
GitHub

TheDaylist is a React App that generates work-out routines for the user. The user selects what type of work-out day they would like to plan for. A list of exercises is then shown from where they can pick from and add to their routine. The user can tell how many minutes their workout will take as they add or remove exercises from the list. Finally, the user has the option to save or reset their routine list.

Functionality

The following is a brief description of how the application works! Follow the steps below and create your own work-out routine.

Step #1

Select what type of workout day it is today by using the radio and search buttons

Step #2

List of exercises for that specific type of day will show under the exercise column

Step #3

Add or Remove exercises to the Routine Column by clicking on the + and - signs.

Step #4

The user can change their routine name and save as a PDF. They can reset the routine as well

Back to the top

ProjectStructure

The following is a brief explanation of the code that creates this app. The application is composed of a main component (App.js) that contains several methods that are then passed down to the rendering components. The rendering components branch from each other to create a clear code structure.

Project Diagram

App.js

The App js component contains all the functional aspects of this application. This application is composed of several components which we’ll explore in a few. It is in here where we create the methods that search, add and remove exercises. In its render method, we find the different components that use the App.js state as attributes. It is also in this component where we import the database that supplies the exercises.

SearchBar.js

In the SearchBar component we render a form with radio buttons that help the user select what kind of work-out day they are trying to plan. It is in this component where we also create a method that takes that radio button selection as an event target. The type of day selection is then passed to the App.js component to define the type of workouts that are to be displayed in the WorkOutResults.js component.

WorkOutResults.js

The WorkOutResults.js component is a very simple component in comparison to the rest. This component holds the results of the SearchBar component by rendering a component that displays the selected database. App.js’s workOutResults state is passed down to this component which is then passed down to the ExerciseList component.

RoutineList.js

The RoutineList.js component showcases the selected exercises from the WorkOutResults.js component. This component contains a lot of different functionalities. It is in here where we change the name of the routine by defining a new state for the App component. The methods created in App. Js to add and remove the exercises are used here as well. Finally, it is in this component that we use a plugin to save the routine list to PDF. This is done by installing React-to-Print via NPM and selecting which part of the code is to be printed.

ExerciseList.js

The ExerciseList component is used in both the workOutResults and RoutineList component. This component is in charge of rendering the different exercises that are either selected from the SearchBar or by using the addExercise method. The way the component renders the different exercises is by mapping an Exercise component which is in charge of containing each individual exercise.