Click here to view the live "A Great Step" web app.
A Great Step is a web app that allows users to set a step goal with a particular target date in mind. The user inputs their current activity level, age, gender, weight height and target weight, and they input when they want to acheive that weight. The app generates a plan that can be exported as JSON and imported on other devices.
User Experience (Click to expand)
-
- As a first time visitor, I want to be able to easily navigate the site.
- As a first time visitor, I want to receive errors if I input invalid data.
- As a first time visitor, I want to be able to export my goal to use later.
- As a first time visitor, I want to understand the purpose of the app.
-
- As a returning visitor, I want to be able to import my goal from another device.
- As a returning visitor, I want to be able to edit my goal.
-
- As a frequent user, I want to be able to view my updated goal timeframe.
- As a frequent user, I want to be able to make updates to my goal.
-
- The main colours used are blue, white and turquiose. They were chosen to give a clean and professional look to the site. The colours are also bright to get a an energetic feeling.
-
- Lobster 2 was a fun and decorative choice made for the main heading. It is flowy, which goes with the theme of movement. The other fonts are less flashy so that they the app remains clean and accessible.
-
- A number of SVG images are used from the Storyset website. The people in the images range in age so that all age groups are encourage to participate. The people in the images also partake in different levels of activity, which is also to encourage those of all levels of activity to participate.
- A number of SVG images are used from the Storyset website. The people in the images range in age so that all age groups are encourage to participate. The people in the images also partake in different levels of activity, which is also to encourage those of all levels of activity to participate.
Desktop landing (Click to expand)
Mobile landing (Click to expand)
Desktop import a goal (Click to expand)
Mobile import a goal (Click to expand)
Desktop personal details (Click to expand)
Mobile personal details (Click to expand)
Desktop activity level (Click to expand)
Mobile activity level (Click to expand)
Desktop goal details (Click to expand)
Mobile goal details (Click to expand)
Desktop goal plan (Click to expand)
Mobile goal plan (Click to expand)
Desktop 404 page (Click to expand)
Mobile 404 page (Click to expand)
Features (Click to expand)
- Responsive on all device sizes
- Clean and user-friendly interface design
- Fast loading speed
- Accessible
- Ability to import/export JSON goals
Landing section initial section (Click to expand)
The landing section is the first thing the user sees. Straight away they can see that the app is fitness-related. They have the option to create a goal here, or import an existing goal.
Landing section - Import a goal (Click to expand)
By clicking on the "Import goal" button on the landing page, the user is presented with a text input where they can add their previously export JSON goal data.
Your details (Click to expand)
The next section on the homepage that the user can scroll to is the "Your details" section, where they can input their personal details such as name, email and weight.
Your activity level (Click to expand)
The activity level section is to gauge how active the user is, which is used in the calculation later. I made the decision to assign each level of activity to a value so that the user doesn't have to input a number. They just need to select the level of activity that best describes them.
Your goal (Click to expand)
The final section on the homepage gives the user the opportunity to input what weight they want to be, when they want to reach that weight and how many days a week they have available to exercise. This data is used in the final calculation too. When they click "Generate plan", it takes them to the walking plan page.
Walking plan (Click to expand)
The walking plan page is customised to the user and their goal. In this case, it gives me my name and tells me how many steps I need to walk each day to reach my goal. The date range is calculated from today's date to the user's target date.
Walking plan - Export goal (Click to expand)
By clicking the "Export goal" button, the user's JSON data is saved to their clipboard. With that, they can send it to themselves and then import it on another device. When the button is clicked, the user gets some feedback that the button has been clicked by displaying a small popup.
Technologies used (Click to expand)
- Cooolors:
- Cooolors was used to come up with the app's colour scheme.
- Font Joy
- Font Joy was used to find the font pairing for the app.
- Google Fonts:
- Google fonts were used to import the 'Catamaran', 'Exo' and 'Lobster 2' fonts into the style.css file which are used throughout the project.
- Git:
- Git was used for version control by utilising VSCode terminal to commit to Git and push to GitHub.
- GitHub:
- GitHub is used to store the projects code after being pushed from Git.
- Balsamiq:
- Balsamiq was used to create the wireframes during the design process.
- SVG Repo:
- SVG Repo was used to create the footprint images for the activity level section.
Testing (Click to expand)
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
Homepage (Click to expand)
Walking Goal (Click to expand)
404 page (Click to expand)
CSS Homepage validation results
JSHint Code Validation (Click to expand)
I used the Pagespeed Insights tool to check my app's speed, best practices and accessibility. Here are the results:
Homepage (Click to expand)
404 page (Click to expand)
Walking Goal (Click to expand)
Homepage (Click to expand)
404 page (Click to expand)
Walking Goal (Click to expand)
As a first time visitor, I want to be able to easily navigate the site.
On landing on the site, the user is presented with two large buttons, which allow them to either import a goal or create a new one. Limited choice means the user can easily decide what they want to do. They can also scroll down to see the other sections of the site. If they visit a page that doesn't exist, they have a button to redirect them back to the homepage.
As a first time visitor, I want to receive errors if I input invalid data.
If the user inputs invalid data and tries to progress to the next section, the inputs will be validated and the user is presented with a clear error explaining what they need to do.
As a first time visitor, I want to be able to export my goal to use later.
On the Walking Goal page, the user only has to click the "Export goal" button to copy the JSON data to their clipboard. A popup appears to let them know that the data has been copied to the clipboard.
As a first time visitor, I want to understand the purpose of the app.
The app's name is "A Great Step" and the pun already indicates that the app is related to walking. There is also a subtitle that helps to explain the purpose of the app. The images used in each section also help to convey the purpose of the app.
As a returning visitor, I want to be able to import my goal from another device.
On the homepage, when the user clicks "Import a goal", they are presented with a popup that instructs them to input the JSON data for an existing goal. When they click "Import", the data is validated and if it is valid, the user is redirected to the Walking Goal page.
As a returning visitor, I want to be able to edit my goal.
When the user imports a goal, they are redirected to the Walking Goal page. Here, they can click the "Back to homepage" button to be redirected to the homepage where they can edit their goal. When they originally land on the site, their goal fields are also pulled from Local Storage, and they are updated as the user progresses through each section.
As a frequent user, I want to be able to view my updated goal timeframe.
When the user updates their goal, the timeframe is updated on the Walking Goal page. The date range is calculated from today's date to the user's target date.
As a frequent user, I want to be able to make updates to my goal.
In the "Goal details" section, the user can update the target date, weight and how many days they have available to exercise. When they click "Generate plan", the plan is updated with the new data.
- The app was tested on Google Chrome, Mozilla Firefox and Safari browsers.
- The app was viewed on a variety of devices such as Mac, Samsung Galaxy S22 and iPhone 11.
- Family members were asked to review the app and documentation to point out any bugs and/or user experience issues.
- I made sure to test the app's accessibility using keyboard.
Click to expand the manual testing table
;| Test | Expected behaviour | Chrome Desktop Passed? (Macbook - Ventura 13.4) | Safari Desktop Passed? (Macbook - Ventura 13.4) | Firefox Desktop Passed? (Windows 11 - Firefox 114) | Chrome Mobile Passed? (Samsung Galaxy S22) | Safari Mobile Passed? | Firefox Mobile Passed? |
|---|---|---|---|---|---|---|---|
| Click "Import goal" button. | Modal should open to allow user to input JSON. | Y | Y | Y | Y | Y | Y |
| Add invalid JSON and submit. | Instead of submitting, a an error message should be displayed. More than one message should not be displayed when clicked again. | Y | Y | Y | Y | Y | Y |
| Click "X" on modal. | Should dismiss the modal but should not remove the JSON. | Y | Y | Y | Y | Y | Y |
| Adding valid JSON and submit. | Should submit successfully and redirect to the walking goal page where the details are populated. | Y | Y | Y | Y | Y | Y |
| Click "Create a goal". | Auto-scroll to the next section. | Y | Y | Y - but smooth scroll isn't working | Y | Y | Y |
| Click "Back" in your details section with empty fields. | Should scroll back to previous section. | Y | Y | Y | Y | Y | Y |
| Click "Back" button when fields are filled in. | Should scroll back to previous section and keep field values. | Y | Y | Y | Y | Y | Y |
| Click "Next" button when fields are empty. | Should display error messages below required fields and not update the object in Local Storage. | Y | Y | Y | Y | Y | Y |
| Add required input to a field with an error message. | Should dismiss the error message when valid input is added. | Y | Y | Y | Y | Y | Y |
| Click "Next" button when fields required fields are filled in. | Should progress to the next section and update the object in Local Storage. | Y | Y | Y | Y | Y | Y |
| Click "Generate plan" button when the section fields are filled in but target weight is greater than current weight. | Error message should display and prevent submission. | Y | Y | Y | Y | Y | Y |
| Click "Generate plan" button when the section fields are filled in but target weight less than input minimum (50kg). | Error message should display and prevent submission. | Y | Y | Y | Y | Y | Y |
| Click "Generate plan" button when the section fields are filled in but target date is in the past. | Error message should display and prevent submission. | Y | Y | Y | Y | Y | Y |
| Click "Generate plan" button when the section fields are filled in but other required fields are missing from goal object in Local Storage. | Error message should display saying which fields are missing and prevent submission. | Y | Y | Y | Y | Y | Y |
| Click "Generate plan" button when the section fields and all required fields are filled in correctly. | Update the object in local storage and redirect to Walking Goal page. | Y | Y | Y | Y | Y | Y |
| Click "Return home" button on Walking Goal page. | Go to the landing page (all fields should contain values from Local Storage). | Y | Y | Y | Y | Y | Y |
| Click "Export goal" button on Walking Goal page. | JSON Object from Local Storage should be copied to the clipboard. | Y | Y | Y | Y | Y | Y |
| Input a random page that does not exist. | 404 page should be displayed. | Y | Y | Y | Y | Y | Y |
| Click "Return home" button. | Should be brought back to the homepage. | Y | Y | Y | Y | Y | Y |
Click to expand the bugs encountered table
| Bug | Fixed (Y/N) | Additional comments |
|---|---|---|
| Overlapping sections on the homepage. | Y | Changed the sections to 100vh, which allowed for the section to take up the space it needed. |
| Duplicate "Invalid JSON" Error messages when importing JSON. | Y | I added a check in JavaScript to see if the error already existed. If it did, then another one wouldn't be added |
| Clicking the next or previous buttons create a 405 error. | Y | Since they were buttons inside a form, the default behaviour was to submit. I prevented the default event. |
| Clicking the next or previous buttons create a 405 error. | Y | Since they were buttons inside a form, the default behaviour was to submit. I prevented the default event. |
| Radio button error is only removed when first option is selected. | N | When the error message is displayed, it is normally dismissed when the correct input is added, but for radio buttons, it is only dismissed when the first radio is selected. To fix it, I would need to loop through all the buttons to check if one option is selected, then dismiss the error. |
| When selecting the radio button, the value of the last radio button in the group is always passed instead of the selected one. | Y | When re-populating the values, I was accidentally overwriting the value of the selected input with the last value. I fixed the code so that it no longer happens. |
| If there is an error on one section of the homepage, it prevents the "Next" or "Generate plan" button from submitting, even if there isn't an error on their sections. | Y | This originally wasn't as serious an issue because the user was going to have to step through the form. I fixed it by checking for errors in the current section as opposed to the whole document. |
| In Firefox, the days of the week checkboxes were not being checked. | Y | I was using the :has selector and it is not supported in Firefox. I had to stop using the :has selector and restructure the code so that it now works. |
| On the activity level section, the error message appears as a sibling to the card as opposed to a sibling of the parent. | Y | After re-structuring the code, the javascript that was selecting parent was no longer the same parent, so I had to add in another parent to correct position the error. |
| If the weight is a three-digit number, the error that "the target weight must be less than your current weight" is shown, even if the is less. | Y | It looks like the fact one (or both) were being treated as strings instead of numbers caused the issue. |
Deployment (Click to expand)
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the A Great Step Github Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Main Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site in the "GitHub Pages" section.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the A Great Step Github Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the A Great Step Github Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/stephendawsondev/A-Great-Step
- Press Enter. Your local clone will be created.
$ git clone https://github.com/stephendawsondev/A-Great-Step
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
Credits (Click to expand)
- Scroll snap instructions
- MDN Documentation on the dialog element for popup
- MDN Documentation on insertAdjacentElement
- MDN Documentation on form validation
- MDN Documentation on validity
- MDN Documentation on aria-live
- MDN Documentation on Math.pow
- Article on adding accessible SVGs
- Adding a 404 to GitHub Pages
- Information on Docstring commands
- How to write a good commit message for longer commands
- MDN Documentation on the :has selector (removed eventually due to incompatibility with Firefox)
- My Mentor for continuous helpful feedback.
- My Code Institute team for feedback on the project.
- The Code Institute #peer-code-review channel for feedback.