Whether you are just starting out runnig or you are a serious mararthon runner with a target finish time in your mind, The Pacemaker could be a useful tool to adjust your training based on you goals. The Pacemaker is a running pace calculator feature that can help you specify your training by running a certain distance with the right pace or it can help you on race day to set your pace correct. The Pacemaker will do the math for you, so, all you have to do...just RUN!
- As a first time visitor the goal and the purpose of the website is easily understandable.
- As a first time visitor I can easily navigate through the page and locate content, function.
- As a first time visitor I can find right at the bottom of the page a short user guide for the calculator.
- After some contemplation as a returning visitor to the website I can find, alternate the input fields and with that, the result too.
- As a returning visitor I can plan my training ahead now with the help of the results and calculations.
- As a returning visitor I'll have a better understanding of how long or how fast I have to run for a certain distance to achive my golas.
- As a returning visitor I can recommend the pace calculator to my running friends or in my running club.
- As a frequently returning user I want to see if there will be any additional features.
- As a frequently returning user I want to see if there will be an android or ios application version.
- HTML5
- CSS3
- Javascript
- Google Fonts:
- Google fonts were used across the page - Link provided by CI- Love Maths walkthrough project.
- Font Awesome
- Font Awesome was used to add icons to the appropriate sections.
- Favicon
- Favicon emoji was used from favicon.io
- Git
- Git was used to commit and push the codes.
- GitHub
- Github was used to store the project after being pushed
- Vecteezy.com
- Vecteezy was used to download pictures for background and illustrations.
- Canva.com
- Canva platform was used to edit, re-size pictures.
- VS Code Editor
- To write and run the code VS Code editor was used which is Code Institute's cloud based IDE platform.
- Favicon
Upon opening the page in the browser next to the name of the website the "favicon" appears. The emoji of a person running, supposed to indicate that the website is related to the topic of running, training.
- Running man logo next to H1
The running man icon next to the header supposed to reenforce for the website visitor the main topic of the site.
- Input fields
The input fields are indicating clearly the value which value belongs to which field, bringing attention to the correct format.
- Wrong value notification
In that case if the user would input a wrong value or character in to the input fields a pop up window will send a notification.
- Buttons
To keep a clear and straightforward user experience the number of buttons are minimal. The "Run!" button is triggering the calculation, it is essentially a calculate or submit button. The "Reset" button clears the fields and gets them ready to another calculation
- Result fields
There are three fields which are clearly indicating the place of the expected result, depending on, in which value is the user interested.
- User guide
The user guide can be found at the bottom of the page in the footer section. Gives a brief, clear explanation on how to fill out the forms.
- To improve user experience HTML Web storage could be used to store the previusly input values.
- A unit conversion feature could be added to change from metric to imperial and back.
| Feature | Test | Expected Outcome |
|---|---|---|
| Distance field | Input numeric value | Calculation goes ahead |
| ------------------------ | ---------------------------------- | ------------------------------------- |
| Pace field | Input value in correct form | Calculation goes ahead |
| ------------------------ | ---------------------------------- | ------------------------------------- |
| Time field | Input value in correct form | Calculation goes ahead |
| ------------------------ | ---------------------------------- | ------------------------------------- |
| Run! button | Click on the button | Calculation and validation triggered |
| ------------------------ | ---------------------------------- | ------------------------------------- |
| Reset button | Click on the button | Input fields cleared |
| ------------------------ | ---------------------------------- | ------------------------------------- |
| Distance result line | When previous steps completed | Distance result appears |
| ------------------------ | ---------------------------------- | ------------------------------------- |
| Pace result line | When previous steps completed | Pace result appears |
| ------------------------ | ---------------------------------- | ------------------------------------- |
| Time result line | When previous steps completed | Time result appears |
| ------------------------ | ---------------------------------- | ------------------------------------- |
| Wrong input message | Submit wrong/no values | Pop up message appears |
The W3C Markup Validator and W3C CSS Validator Services were used to validate the website to ensure there were no syntax errors in the project.
- W3C Markup Validator-
- W3C CSS Validator
- JSHint Javascript Validator
- Accesibility
I confirmed that the colors of the fonts have a good contrast with their background makes it easy to read. The fields are clear and enough spacing inbetween them so user can scan through the page easily.
Tested the website on Chrome, Safari, Firefox. Appearance was good on all three browsers. Intended responsiveness also good on all three.
Multiple bugs in js code upon running the validation.
Solutions:
- Changing 'strict' mode from the global scope specifically by the beginning of a function will remove the error.
- Adding "/*jslint esversion: 6 */" on top of the file will remove the remainig issues.
The site was deployed to GitHub pages. The steps to deploy are as follows: In the GitHub repository, navigate to the Settings tab From the source section drop-down menu, select the Master Branch. Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment. The live link can be found here - https://raypt808.github.io/The-Pacemaker/
- Icons were taken from Font Awesome.
- For HTML and CSS validation open source validator services- W3C,W3C CSS- were used.
- For responsiveness test and adjusting smaller design flaws Google Chrome Developer Tools was used.
- The HTML main structure is based on CI's own boilerplate code.
- Javascript code was used and altered from codeopen.io/EricW_Jones repository.
- Ideas of Javascript code was taken from codeopen.io/HMPD's project.
- To create input fields and submit button HTML Tag section from w3schools.com was used.
- HTML Event Attributes section from w3schools.com was used as source.
- Images for illustration and design were taken from open source site Wecteezy.com.
Grateful for the help and the input from my mentor Can Sücüllü. He always gave a different perspective on the issues and with his experience and eyes for details I was guided in the right direction to make this project happen.