FitGuide — A Beginner’s Guide To Weight Lifting
Hello my name is Zach Antosko and I’m currently a student at Digital Crafts coding bootcamp. The reason I’m writing this article is to break down the creation of FitGuide some challenges that were faced along the way.
What is FitGuide?
FitGuide is an all in one web application that makes it easier for newcomers to break into the bodybuilding/powerlifting. I was once a newbie to lifting, I had no structure and had no idea of proper eating habits. I would overtrain and under eat because I wanted to be lean and gain size at the same time. Looking back now I know how foolish I was, but I didn’t have any proper guidance! It took many years reading through countless books/documents, watching YouTube videos, sorting through other resources to understand that getting in shape really isn’t that complicated. The keys things to understand are: being consistent, controlling food intake, and following a program that you enjoy. The goal of FitGuide is to introduce people to these concepts and give them foundation to build from.
Breakdown of the site
Currently FitGuide is composed of 5 pages: Home, About, Calorie Needs, Recipes, Plan Your Workout. The Home and About pages are pretty straight forward and don’t require much user interaction, the real meat and potatoes of this project are in the last 3 pages. The Calorie Needs page provides a calculator that prompts the user to input their information (gender, height, weight, age, and activity level). The calculator will then return the amount of calories per day the user should consume to maintain, gain, or lose weight. As an added bonus these numbers are also split into macronutrient percentages (carbs, protein, fat) for each calorie range that was previously mentioned. The user can then navigate to the recipes where they have the option to search for either specific recipes or for individual food items. Once the user hits search the app will then display 10 to 20 information cards (depending on what search was performed) displaying calorie content and other nutritional information. Finally once the user has an idea of their caloric needs as well as an idea of foods that they can eat they can then navigate to the planner page. This page starts off by breaking down popular jargon that is used by many fitness YouTuber’s and even regular gym-goers. As the user proceeds to scroll down they will see multiple links broken up into four sections: Beginner, Intermediate, Advanced, and Extra Resources. Based on experience level the user can pick a program that interests them and if they would like to further their knowledge they can then go to the Extra Resources section where each link will take them the site where that book can be purchased.
The technical side
This application was built with JavaScript, Materialize CSS, HTML, and some Plain CSS. Building out this project has taught me a lot more about asynchronous programming with JavaScript, specifically on how to implement async/await keywords and why they make it easier to write promise statements. The key features in this project are the Calorie Calculator and they Food Search Bar. The Calorie Calculator takes the user’s gender, height weight, age, and activity level. Once the user clicks the submit button, the inputs will then be inserted into a BMI formula and invoke specific set of conditionals based on the user’s choices for gender and activity level. These conditions are handled in a switch statement with 5 different cases each representing a different activity level (sedentary, lightly active, moderately active, very active, super active). The case that’s invoked will then execute an if statement nested inside of it to check if either male or female was selected and then calculate the Daily Calorie intake for the user. This value is then passed to a function that generates a modal. The calorie value is then passed into a few more formulas to calculate: Maintenance Calories, Weight Gain Calories, Weight loss Calories, and the Macronutrient Intake (carbs, protein, and fat) of each calorie value. The modal function then dynamically generates HTML elements and interpolates the user’s calorie data into the HTML. The modal will then be displayed on screen with the calculated values passed in as well as some general tips for the user. The other key feature is Food Search Bar (two search bars: one for recipes and the other for individual food). Whenever a search is made in one of the fields, an asynchronous function call is made and will fetch data from the specific API used in the function. The Recipe Search fetches from Spoonacular API, converts that data to JSON format and then generates a list of 20 items. Each list item will give a summary of the dish as well as a picture, prep time, nutritional info, and a link to the full recipe. The Food-Item Search essentially does the same thing but isn’t as robust. This is another asynchronous function that pulls from the USDA’s API, converts the data to JSON and displays the nutritional information of the item in a small card (generates 10 cards at a time). Even though these functions pull from different APIs and display different cards, the method used to cycle through the data is the same. Once one of the functions returns data and converts it to JSON, a for-loop is then used to iterate over the list of objects returned from the fetch and display the data.
Challenges faced/Closing thoughts
By far the biggest challenge of this whole project was learning how to use the Materialize CSS framework. This was unfamiliar territory for me, I had used frameworks such as Skeleton and Bootstrap, but each framework has its own syntax and utilities. So the knowledge from these frameworks didn’t carry over too much. Another issue was making Materialize and the CSS that I wrote to work in unison with one another. But after much time spent going through the documentation on the Materialize website I was able understand how their layout worked and which class names were off limits. Another hurdle faced was deciphering the documentation for each API used and how to interpolate user input into them. Some APIs are better than others when it comes to this, but all of them have their limitations. Spoonacular while it was good API and had a lot of information when it came to recipes, thats all I could use it for. When it came to searching for nutritional info on specific food items, there was nothing to be found. For this reason I had to use USDAs API for individual food, but the documentation on its usage is not as intuitive. But again after some time researching I was able properly format the API call and pass it inputs that would return data. Despite these roadblocks I had a lot of fun coding this project. It gave me an outlet to combine my passion for fitness with a new found love of programming. I’m sure the skills and knowledge gained from this project will aid me in journey going forward.
My source code for this project can viewed here on GitHub, if you enjoyed reading through this article feel free to give me a follow.
