Vitality Wellness Tracker

Unlock your potential with Vitality Wellness Tracker. Personalized recommendations & meal plans for a healthier, happier you. Your journey starts here, become the best version of yourself now!

Comment

Inspiration

My Inspiration to build Vitality Wellness Tracker was that I saw a documentary "Sugar Coated" that showcased the drastic severity of the health issue our world was facing. Obesity rates and many diseases were on the rise and it had a large part in due to factors such as exercise and the food that we ate. As such I challenged myself to create this website as a way to inform other individuals on these issues and more importantly recommend ways for people to get better and into better shape based onto heir weight and their goals. I found many people struggled or lacked the motivation to do research and create their own meal plans and find ways to better themselves so I took it upon myself to provide recommendations and meal plans based on the individuals input so they can just take that information and use it to achieve their weight goals and become the best version of themselves. In short, I was inspired by the global crisis that our world was facing and wanted people to have an easier way to help themselves and make themselves become better.

What it does

My website has two primary functions. The first is that people enter their, age, height and weight and the site calculated their BMI and if they are underweight or overweight asks them a series of questions regarding their lifestyle and choices. Then by utilizing JavaScript, based on the choices they make, the site returns recommendations on how they can better their health and how to get themselves to reach a more health weight level. If the BMI comes back as normal weight the site encourages them to continue doing what they do and provides them with useful reminders on how to maintain their healthy weight. The second primary function is another page on the website that has the user enter information regarding their nutritional info goals to be able to reach a specific weight and the site returns a meal plan to help them achieve their goal. For instance, if an individual was underweight and wanted a meal plan where they would eat a lot more calories and a lot more protein and healthy fats, they would enter the values of what they were approximately aiming for and based onto hat info and utilizing JavaScript, the site will return a meal plan based on the user's goals that will help them reach their target weight.

How we built it

I built my website by utilizing three main languages, which were HTML, CSS, & JavaScript. I started with my HTML by building the building blocks and overall foundation of my website with tags that bult the formatting, heading, forms, buttons, etc. I then linked the HTML page to a Style sheet where I styled the various areas to get an appealing and professional look that would capture the attention and the eyes of the viewers. I then linked my HTML page to a script file that had my JS code, where it coded the functionality of my website including the function of the forms, and buttons and based on the answers given returned an output that matched what the user entered. I then did the same for the meal plan page, by creating the HTML page, then the CSS and then the JS code, and I linked that HTML page through my first utilizing the navigation tag. By doing this I was able to make my website that was well - structured and styled and was functional as the code was able to be dynamic and reactive by reacting to buttons and outputting information based on the info that was given by the user.

Challenges we ran into

I ran to a great deal of challenge with this project as given it was my first hackathon, I did not have that much experience with these things and thus I never felt a pressure on me whilst programming until this hackathon which is where I faced a good deal of challenges. Specifically, within my Meal Plan Script file for my Meal Plan page, I ran into this problem where when I generated the meal plan it would work but if I opted for being a vegetarian and then generated my meal plan I would get two meal plans one for if I was not a Vegetarian and one if I was which was incorrect since I should only get the Vegetarian one. It was a simple mistake in my code but, I will admit my code was very messy which was yet another challenge I faced as, because of the mess it took me forever to find where the issue persisted in and I got very frustrated and demoralized at times but I persisted onwards. I eventually found the mistake to be very simple and it was that I had if check instead of an else if check which meant regardless of the previous check, the second one would still run and it would be True and thus output a second meal plan. All I had to do was change it to an else if check and then low and behold it would only run if the first check was false, like I needed it too. It was a simple error but one that took me a great deal of time and provided me with a lot of challenge as it not only challenged my ability as a programmer but it challenged me mentally which is why it was a great challenge that I ran into whilst creating this project.

Accomplishments that we're proud of

Accomplishments that I am proud of through this project was creating a intricate duel paged website utilizing HTML, CSS, and JavaScript. I had prior experience with creating simple webpages using the three languages and have made simple duel paged websites but this was the first time I made one as complex as this project. This was the first time I made a second web page on the site with a dedicated style sheet and a dedicated script that allowed it to act and differ from the initial web page that added more dynamics and functionality to the website. I am proud of this because I feel this project really challenged myself and my abilities and allowed me to hone my skills with web development and using the three languages to create complex websites that solves a problem that helps many and I am very proud of that accomplishment.

What we learned

From this project I learned a great deal of things that allowed me to hone my skills for the better. Through this project, I've honed my expertise in manipulating the Document Object Model (DOM) using JavaScript. I've grasped how to dynamically fetch and interact with HTML elements, opening doors to create responsive and interactive web applications. Furthermore, through complex 'if-else' and nested structures, I've mastered the ability of evaluating various factors and generating specific outcomes, a skill that's vital for building dynamic applications. I learned more about JavaScript Event Listeners and how they capture user inputs from dropdowns, checkboxes, and text fields, triggering the generation of whatever data that is needed and in my case was meal plans. In essence, I learned much more about JavaScript, and honed my abilities with the language. I have not been using it for a vast amount of time and through this hackathon I have been able to improve on my abilities to code using JavaScript.

What's next for Vitality Wellness Tracker

Going forward I have a lot of plans for Vitality Wellness Tracker and am far from done from the website. What I made was a good challenge for me and really was a leap for my abilities and skillset but I know there is much more I could do. For instance, instead of me manually having a variety of meal plans to choose from for the computer I could have a data that is collected in the backend that is fed to the front end and it could be real data from the world that is out their about the nutrition of various foods and based on that information it is fed into the front - end and is given to the user. This data-driven approach would replace the manual curation of meal options and provide users with a more accurate and diverse range of choices. I plan on further enhancing my programming skills and working on this by creating a data collection technique that can feed the program real time information and data to use to make its own well - informed decisions on individuals meal plans based on their inputs.

Built With

Share this project:

Updates