This project presents information about the Metric System, where it came from, who is still using the Imperial System and a conversion tool, from Imperial to Metric only.
One of the purposes of this project is to demonstrate the developer skills with JS. You will be able to see this in three sections of the website:
- The converter.
- The Google Maps API, where it shows the countries still using the Imperial System, and
- The contact form, where EMailJS is used to send the messages.
This is for educational purposes only.
This website is for users interested in knowing a bit more about the Metric System and need to convert measurements from the Imperial System.
Users visit the website for different reasons. They want to:
- Learn a bit more about the history of the Metric System.
- Learn who is still officially using the Imperial System.
- Convert Imperial measurements to the Metric System.
- Get in touch with the developer behind the project.
The King Metric website provides all the necessary tools to convert basic Imperial measurements to the Metric System. It also provides a bit of history on the Metric System and who are the countries that to this day are still officially using the Imperial System.
The website provides:
- A "Origins" section in which background information is provided about the Metric System.
- Inside the website's footer, a direct link to the Wikipedia page where the content for the "Origins" section was taken.
The website provides:
- A "The Others" section in which information and a map are provided about the countries who are still officially using the Imperial System.
- Inside the website's footer, a direct link to the Webpage where the content for the "The Others" section was taken.
The website provides:
- A "Convert" section in which users can easily convert Imperial units to the Metric System.
- The measuring properties considered for this project are Length, Area, Volume and Weight.
- For each property, the project provides four options of units to be converted. For example, for Length, we offer Inch, Foot, Yard and Mile.
- A "Reset Converter" button is provided to clear the converter for other conversions.
The website provides:
- A "Contact" section in which users can get in touch with the developer. The form asks for Name, Email and a Message.
- This is a fully operational contact form, which includes an automatic email sent to the user after submission.
Below you will find the website's wireframes. These were generated using Balsamiq. There are two versions of the wireframes. Choose your option:
- Wireframes for the desktop & mobile version in PDF.
- Wireframes for the desktop & mobile version in Balsamiq.
First and foremost, the essential elements that had to be in place were:
- Responsiveness: The website has to be fully responsive and adapt to different screen sizes.
- Interactivity: The site has to provide users with interactivity and with more than just one type to demonstrate different managements of JS.
- Simplicity: The website has to be simple, easy to navigate, read and interact.
This project was developed to be presented as Milestone 2 for CI's Full Stack Software Development course. MS2 requires the explicit use of Javascript to provide site visitors with interactivity, so the decision was made to focus on a simple overall website, but with clear, interactive elements in it.
- Navigation bar: It allows users to easily access all the sections of the webpage and content on the King Metric's website, at all times. It also provides a direct button taking them to the "Convert" section.
- Home section: It welcomes users with a quick pitch about King Metric and those still using the Imperial System. It also provides a big button taking users to the "Convert" section.
- Footer: It allows users to easily access all the sections of the webpage and content on the King Metric's website, at all times. It also provides a direct button taking them to the "Convert" section. Additionally, it provides users with direct links to the websites where the content was taken from for the "Origins" and "The Others" section.
- Origins section: It allows users to learn a bit about the history of the Metric System and where it came.
- The Others section: It enables users to learn a bit about who is still officially using the Imperial System.
- Convert section: It enables users to convert Imperial units to the Metric System. It provides conversion for units in Length, Area, Volume and Weight. It also provides a reset button, to clear the converter for new calculations if necessary.
- Contact section: It allows users to get in touch with the developer through a simple and fully functional contact form.
- HTML/HTML5
- The project used HTML/HTML5 as this is the essential language of websites.
- CSS/CSS3
- The project used CSS/CSS3 to provide the styles for the website.
- JavaScript
- The project used JavaScript to provide the interactivity for the website.
- BootStrap 4
- The project used the BootStrap 4 framework to help design the website faster and easier.
- Gitpod
- The project used the Gitpod IDE to develop the website.
- GitHub
- The project used the GitHub hosting service to save the project in a repository.
- Imgur
- The project used the Imgur service to host and access images online.
- Google Drive
- The project used the Google Drive service to host and access others files and documents online.
- Auto-Prefixer
- The project used the Auto-Prefixer to add CSS compatibility with other browsers.
- W3C CSS Validation Service
- The project used the W3C CSS Validation Service to validate the CSS code.
- W3C Markup Validation Service
- The project used the W3C Markup Validation Service to validate the HTML code.
- HackMD
- The project used the HackMD to edit the README file.
- Google Maps API
- The project used the Google Maps API to provide the interactive Google Maps.
- EmailJS
- The project used the EmailJS to enable a functional contact form.
- JSFiddle
- The project used the JSFiddle tool to test ideas and codes in a safe environment.
- Chrome DevTools
- The project used Chrome DevTools to test variations to the CSS rules and ideas to its optimisation.
- The project also used it to Simulate Mobile Devices and test the website behaviour on mobile views.
- iPhone 8
- The project used an iPhone 8 mobile device to test the website in a real mobile environment.
- iPad (5th Generation)
- The project used an iPad (5th Generation) mobile device to test the website in a real mobile environment.
Details about how testing was conducted and the outcomes.
The developer decided that testing was going to be conducted in parallel with the project development, which means that regularly, during the development of the project, the developer used Chrome DevTools to test the behaviour of the project both in desktop and mobile views.
The JS interactive elements were tested with its development, to make sure that the code was providing the expected outcomes consistently.
Testing the project in mobile devices was conducted towards the project's end, and only once all main sections were implemented and tested with CDT.
As indicated above, JSFiddle and CDT were the main tools used to test the project regularly.
Here's how this looked like:
- Chrome browser was used as the primary tool.
- On one tab, Gitpod open with the project.
- On a second tab, the preview of the project, using the "python3" method inside Gitpod.
- On that second tab, CDT open to visualise and test styles, and use the console.
- On a third tab, JSFiddle to check the JS codes and snippets.
Once the project had finished, and the Github repository was live using Github pages, the project was tested with the mobile devices mentioned above.
Since the testing was ongoing, the results of it were many during that period. Most of the issues were related to code not doing what the developer wanted:
- CSS rules not working: CDT used to review the reasons, detect the root of the problem and apply the fix back to the CSS rules.
- JS code not working: Console used to review the potential reasons. Once possible solutions were detected, they were tested with the code and eventually fix the problem.
The eventual outcome of each testing was detecting issues, evaluating the reasons and finding the solutions.
Once the root of each issue is detected, then the applied solution is coded into the corresponding code, whether that's the HTML, CSS, JS or API.
With each error detected and fixed, the developer's knowledge increased.
Going over the user stories indicated in the UX section to ensure that they work as intended.
-
Learn a bit more about the history of the Metric System.
- Go to the "Origins" section through the top menu or by scrolling down the page.
- Scroll down through the page to read the piece of history about the origins of the Metric System.
- Learn with it that the French invented it between 1790 and 1800.
- Learn with it that this was done during the French Revolution.
- Try to accomplish the steps both on desktop and mobile views.
-
Learn who is still officially using the Imperial System.
- Go to the "The Others" section through the top menu or by scrolling down the page.
- Scroll down through the page to read the piece of information about the countries that are still officially using the Imperial System.
- Interact with Google Maps, which highlights the three countries.
- Learn with it that the USA, Myanmar and Liberia are the only countries still officially using the Imperial System.
- Learn with it that the UK is not on that list. 😉 😉
- Try to accomplish the steps both on desktop and mobile views.
-
Convert Imperial measurements to the Metric System.
- Go to the "Convert" section through the menu or footer button. The "Home" section also provides one additional button with the main content.
- Change the property and check if the rest of the converter reacts to it (the unit selector must change).
- Change the unit and check if the rest of the converter reacts to it.
- Input a value in the input field and check if the converter reacts to it. (here is when the converter runs the conversion).
- Maintain the inputted value and change the property and unit selectors and check if the converter reacts to it, and recalculates.
- Change the inputted value and check if the converter reacts to it by recalculating.
- Click on the "Reset Converter" button and check if the converter resets to its original values.
- Try to accomplish the steps both on desktop and mobile views.
-
Get in touch with the developer behind the project.
- Go to the "Contact" section through the menu or footer options.
- Try to submit an empty contact form and check that an error message about the required fields appears.
- Try to submit the contact form with an invalid email address and check that the error message appears.
- Try to submit the contact form with all inputs valid and check that the information is processed and a confirmation message is presented.
- Try to submit the contact form with all inputs valid and verify that a confirmation message is presented immediately after.
- Try to acknowledge the confirmation message and check that the contact form is cleared.
- Try to submit the contact form with all inputs valid and verify that an email is sent with a confirmation of the message sent.
- Try to accomplish the steps both on desktop and mobile views.
There were no brand-new or relevant bugs/problems during the development of this project.
The usual suspects were always there because of my lack of experience and mistyping the code.
Carlos developed this project using Gitpod’s IDE. He pushed all developments to the corresponding repository inside his GitHub account.
He followed the steps below:
- He first created the repository inside his GitHub account. Repo URL.
- He launched the project on Gitpod from the repository, using Gitpod's Chrome extension.
- He continued his work and development on Gitpod.
- He pushed all relevant and significant changes to the repository, from Gitpod, regularly.
- Once the project was completed, he published the project using GitHub Pages.
There are no differences between the deployed and the developed version. Carlos used one branch: master.
You can run and view the project by following this URL: View Project.
Once all JS code was fully tested and everything was working as intended, it was time for refactoring, because the original codes were not optimal.
The following functions were refactored:
- PropertyConverter() in file propertyConvert.js.
- UnitConverter() in file unitConvert.js.
- ValueConverter() in file valueConvert.js.
The original codes were saved in a folder called "beforeRefactoring", inside assets/js. This was done to enable easy access to those versions if needed.
- Knowledge for usage of Google Maps API: Google Documentation.
- Inspiration for coding improvement on the Google Maps API: Traversy Media.
- Inspiration for the converter: W3Schools.
- Inspiration for the contact form: Resume Project (Part of CI curriculum).
- Inspiration for the fraction number in Hero section: Stack Overflow.
- Background image in Hero section: Pexels.
- King Metric logo: Created with Keynote.
- Content for "Origins" section: Wikipedia.
- Content for "The Others" section: WorldAtlas.
- Font Awesome icons: Font Awesome.
- Flags for Google Maps: IconFinder.
- Image with people measuring (France): Wikipedia.
- Lato, Google Font: Lato.
- Jonathan Munz (My CI Mentor): Thanks for your support as a mentor. You have provided excellent guidance, feedback and inputs into my ideas and development. Looking forward to working together again on the next milestones.
- CI Slack Community: Through several conversations and calls, I continuously improve my knowledge as an engineer, and I grow as a person.