This is a fitness calculator for calculating a persons Basal Metabolic Rate (BMR) and Body Mass Index (BMI). The page has been designed for users age 20 or older who are looking for an easy way to calculate both values at the same time.
https://github.com/michaelhochlan/portfolio2
https://michaelhochlan.github.io/portfolio2/
- The user should right away recognize the input fields and enter his/her/it values.
- The user should receive the results by pressing the calculate button.
- The user should be able to clear all fields by pressing the reset button.
- The user should be able to get more information by navigating to BMR and BMI in the navigation bar.
- The user should be able to contact us.
- The user should get a success message when sending the contact form.
- The user should have the option to reset the contact form at any time.
- By using this calculator the user get's an all in one solution.
The goal of this project is to build a simple and effective tool to calculate both BMI and BMR at the same time and to provide basic informations on the subjects of BMI and BMR.
The colour scheme was chosen to clearly stick out of the outer space theme and support the intuitiv navigation.
The font-family chosen was Nunito which I found on Google Fonts. I chose it for the smooth edges and easy readibility.
Wireframes were sketched on a napkin.
The page layout has been kept simple, using just a centered design to make it easy to adopt it on smaller screen sizes.
The background image was chosen to give it a neutral and appealing appearance.
As soon as the inputs are done and the user hits enter, the BMI and BMR will be displayed in a bright red color in an clearly marked field. In case the user entered something wrong he can press reset to clear all the fields. The Reset as well as the Calculate button are bright red and clearly visible.
### Navigation
For the navigation bar was the color black chosen to enhance the contrast and make it easily detectable. The active color is green, which fits nicely in the overall appearance.
There are countless free apps for phones and tablets available to calculate the BMR and BMI. So this page will be most likely be viewed on computers. I used for many values in the css percentages and fine tuned it with the Google Developer Tools.
- I would like to add more in depth informations.
- I would like to add a calculation for targeted heart rate while exercising based on the calculated BMR and BMI.
- I would like to change the color of the symbols to green, when chosen. So the female graphic would turn green when chosen and wise versa the male graphic
- I would like to come up with a solution to make the page more attractive to transgender and gender neutral users, because you can only choose between male and female, which might turn these users off.
- HTML - To create the content of the page.
- CSS - To style the page.
- JavaScript - For the interactivity of the page.
- Google Fonts - for the used font.
- Font Awesome - for the female and male logo as well as the logo.
- Freepik.com - for the background image.
- Visual Studio Code - as IDE.
- GitHub - for version control of an interactive web application up to deployment.
- GitHubDesktop - for version control.
- GitHub Pages - as a hosting platform.
- Google Chrome Development Tools - for testing code and media querries.
- Beautifier - used to beautify HTML, CSS and JavaScript code.
- W3C validator - for validating HTML code
- W3C Jigsaw - for validating CSS code
- Jshint - as a linter for JavaScript code
- Beautifier - to beautify HTML, CSS and JavaScript
- Fontawesome - for the social media icons
I used throughout the development process the following validators:
I used Chromes Lighthouse tools to test the site's performance.
Chrome DevTools was used to test the responsivesness of the pages.
- According to w3c school there is a float: center but the validator doesn't aknowledge it
- I started out with a large javascript page and cut it more and more down by defining more functions with less code. The code checks out now, but when I run the fitness calculator now for the first time, it sometimes resets on it's own. Only the first time! After that it runs fine. I can't figure it out and it is too late for me to discuss it with my menthor. It started happening this morning.
This site was deployed through GitHub Pages using the following steps:
- On GitHub open the Repositories
- Choose the Repository you want to publish
- Choose Settings in the top menu
- In the side menu select Pages
- Under Source select Deploy from branch
- Under Branch select main and 7(root)
- click save and wait a moment and then refresh the page
- You will find the link to your page on the top under GitHub Pages
- Click Visit site
- The page is online
Many Thanks to fwstudio for the free backgroundimage on de.freepik.com (Bild von fwstudio auf Freepik)
- I used https://www.calculator.net/bmr-calculator.html for the BMR informations.
- I used https://www.calculator.net/bmi-calculator.html for the BMI informations.
- I used https://www.w3schools.com/howto/howto_css_contact_form.asp to get a quick solution for the contact form and modefied it to fit my needs.
- I used https://www.w3schools.com/howto/howto_js_topnav.asp to get a quick solution for the Top Navigation and modefied it to fit my needs.
- I used http://de.freepik.com for the background image, the logo and the female and male images on index.html
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent