This is a final project for the course 'Programming Usable Interfaces' at Carnegie Mellon University.
Figma Link: https://www.figma.com/file/GtXPrnIKr7uaBH8u2re0Hv/An-Interactive-Guide-to-Strength-Training?node-id=0%3A1
Website Link: https://weight-training-interactive.web.app
GitHub Link: https://github.com/alliefeldman/weight-training-interactive
Description: Right now, the weight rooms in gyms are lacking in diversity. It is one of my initiatives to encourage people of all demographics to not be intimidated to pick up heavy things! This website is an information guide on the benefits of strength training, how to begin, and even allows you to create and view a custom workout program based on your needs.
Using the website, a user can:
- Read about the benefits of weight training
- Scroll down the Information Page
- Browse some common types of exercises and workout splits
- Scroll through the Information Page
- Design an example of a workout program based on their experience, goals, and available environment.
- Fill out the Information on the Create page
- Contact me via the contact form
- On the contact page
- Find my email addresses and social media accounts
- on the contact page
External libraries:
jquery:
- Why: It is a common JavaScript library and easy to implement and customize
- How: I used JQuery to create the sliders feat
- What: Jquery adds to the interactive feel of my website.
Bootstrap:
- Why: Bootstrap allowed me to create consistent form elements and buttons throughout my website
- How: The library was used to crate the tabs on my "Create a Program" page
Major challenges: The most significant challenge in implementing the website was creating the "Create a Program" page. I was not anticipating the level of algorithmic complexity that would go into randomly creating a 3, 4, 5, or 6 day workout split depending on different inputted parameters. Ultimately, I think it turned out rather good!