mpowers1113 / ppl-app Goto Github PK
View Code? Open in Web Editor NEWA web application for fitness enthusiasts and bodybuilding lovers who want to randomly generate a Push/Pull/Legs workout.
Home Page: https://mpowers1113.github.io/ppl-app/
ppl-app's People
Contributors
Watchers
ppl-app's Issues
Feature 2: User can search exercises by tag
⚙️ Feature
What capability will users have when this feature is merged?
User can search for exercises by tag, ie "Glutes".
📐 Functionality
A description of how the application will work from the perspective of the user.
If a user prefers to find an exercise by a more specific target muscle group than the broader PPL categories, they should be able to click a tag button to find relevant 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.
- Design tags (buttons) for users to click and search
- Add data attributes to tags that match API query for muscle group
- Query tags and add event listeners
- Create a function to fetch data by muscle group and update the DOM
- Make sure that click targets are either
<a>or<button>elements. - Make sure that all click targets show a
cursor: pointerwhen 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 6: User can mark complete.
⚙️ Feature
What capability will users have when this feature is merged?
User can mark an exercise complete and when the workout is complete, it will save it to their 'completed workouts', organized by date.
📐 Functionality
A description of how the application will work from the perspective of the user.
When a user clicks the check mark, the exercise will change colors to indicate that it's complete. If the user clicks the checkmark on the final exercise and all others are complete, it will save to their 'completed workouts'.
🖼️ 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 checkmark to DOM tree and query.
- When a user clicks it, add an overlay to the li
- Change the checkmark to a doublecheck.
- Make sure that click targets are either
<a>or<button>elements. - Make sure that all click targets show a
cursor: pointerwhen 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 5: User can generate a workout by number of exercises.
⚙️ Feature
What capability will users have when this feature is merged?
If a user wants to do more than 5 exercises, they should be able to select the number of exercises generated.
📐 Functionality
A description of how the application will work from the perspective of the user.
When the user types in the number of exercises they'd like and clicks the submit icon, they'll see that number of exercises displayed.
🖼️ 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.
- Design a new text input with a placeholder indicating the user can pick 5, 6, 7, or 8 exercises.
- Query the input.
- Fetch additional exercises and distribute them evenly between primary, secondary, and tertiary muscle groups.
- The exercises will be added to the tertiary, secondary, and primary groups in that order.
- Make sure that click targets are either
<a>or<button>elements. - Make sure that all click targets show a
cursor: pointerwhen 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 1: User can generate a workout
⚙️ Feature
What capability will users have when this feature is merged?
User can generate a workout by Push, Pull, or Legs focus.
📐 Functionality
A description of how the application will work from the perspective of the user.
If a user wants to perform a Push, Pull, or Legs workout, they should be able to generate a workout by that selection.
🖼️ 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.
- Design the layout with CSS and HTML
- Design the DOM tree in HTML so I know what it'll look like once rendered.
- Using DOM methods, fetch data for each variation (Push, Pull, Legs).
- Render new list items for the intended variation. With 3 exercises for main muscle group, two for secondary, and one for tertiary.
- Make sure that click targets are either
<a>or<button>elements. - Make sure that all click targets show a
cursor: pointerwhen 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 4: User can randomly generate a new exercise by double-clicking/tapping current exercise.
⚙️ Feature
What capability will users have when this feature is merged?
If a user does not want to do the generated exercise, they should be able to generate a new exercise for that muscle group by clicking/tapping the exercise.
📐 Functionality
A description of how the application will work from the perspective of the user.
When a user double clicks an exercise, the exercise will be replaced by a new one with the same target muscle group.
🖼️ 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 paragraph to DOM tree for each list item indicating the user can double click for a new exercise.
- Query the parent UL.
- Add an event listener that identifies the UL child by node type, then find that child's ID and muscle category.
- Fetch a new exercise that does not match the current LI's ID and remove the target LI from the DOM.
- Make sure that click targets are either
<a>or<button>elements. - Make sure that all click targets show a
cursor: pointerwhen 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 3: User can search for exercise by muscle group
⚙️ Feature
What capability will users have when this feature is merged?
User can search exercises by target muscle group, ie “Biceps”.
📐 Functionality
A description of how the application will work from the perspective of the user.
When the user enters a value in the input and clicks search, they will see exercises that include that muscle group.
🖼️ 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 a + button below the last exercise that allows users to add one more.
- When clicked, the user get a randomly generated exercise for that category.
- 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 8: User can view completed workouts
⚙️ Feature
What capability will users have when this feature is merged?
When a user taps complete, they should be able to see their completed workouts so they can repeat one they liked.
📐 Functionality
A description of how the application will work from the perspective of the user.
When the user clicks the checkmark, that exercise will be added to their 'completed workouts' tab for future reference.
🖼️ 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.
- Design the completed workouts page with dummy information
- Add the 'view completed workouts' button icon to the main page
- Add a completed workouts object to my data model.
- Query the checkmark and fetch the exercise data from that exercise and add it to the completed workouts object, included the current date.
- Create the DOM tree for the completed workouts page.
- If the user clicks on 'view completed workouts', switch views to Completed Workouts and trigger the 'render completed workouts' function.
- Make sure that click targets are either
<a>or<button>elements. - Make sure that all click targets show a
cursor: pointerwhen 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.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.