The Conversionator is your ultimate travel companion, helping you plan your trips efficiently and calculate costs as well as your CO₂ footprint.
The live link can be found here - THE-CONVERSIONATOR
Link to responsive Mockup
The idea behind the Conversionator is to quickly and clearly answer the most important questions when planning a trip with a vehicle.
- How long will I need for the journey?
- How much will the fuel cost me for the journey?
- What is the exchange rate for the currency at my destination?
- What is my ecological footprint for the journey?
The app answers these four basic questions. The design is optimised for mobile devices from 375px and is therefore an ideal travel companion.
The aim of this project is to have a handy tool at hand for and on my journey to calculate the most important key data.
Such as traveling time, fuel costs, currency conversion and ecological footprint of my trip.
- People who are planning a trip or are on a trip.
- As a user, I can get answers to my important travel questions quickly and easily.
- I have all the information I need to use the app available in an intuitive way.
- The app should be easy to use and also be able to be set up with alternative input methods, such as screen readers or keyboard input without a mouse.
- As the operator of the app, I offer the user the opportunity to get answers to their most important questions about their trip quickly and easily.
- I also have the opportunity to evaluate their data within the framework of the legal regulations and to inform them with targeted and needs-based advertising or offers.
-
- As a first-time user of the app, I find my way around quickly and easily.
-
- As a returning user of the app, I know how the app works and can specifically get the information I need for my current trip.
-
- As a regular user of the app, I appreciate its benefits and will include it in my planning of my next trip.
-
- The first-time visitor finds the app appealing and the information provided helps him to quickly find his way around.
-
- The returning user gives me the opportunity to evaluate their data and adapt my additional planned content to their needs.
-
- Regular users of the app leave a positive review in the app store, thus attracting more customers.
- The idea for this colour scheme was to choose a bright theme this time. There are also some additional colours, e.g. for shadows, borders and other indicators that are not in the main palette.
-
The fonts for this project are from google fonts.
- The title font is "Alfa Slab One" serif
- The content font is "Lato" sans-serif
- Desktop
- Screen size 992px and larger
- Tablet
- Screen size 768px
- Mobile
- Screen size 375px
- The design for the header is minimalist. The idea behind it is not to irritate the user with an overloaded header.
For this reason, I have also deliberately kept the menu icons simple.
The app's focus should be on the calculators and not on the navigation.
- I took the same approach with the footer.
The icons for the socials are simple and follow the design of the app.
- On screens larger than 992px, all 4 calculators are displayed in a grid layout.
This makes unnecessary scrolling obsolete and allows the user to interact seamlessly with the app.
-
Clicking on the question mark icon opens the instruction page, where the operation of the individual calculators is explained.
The calculators are displayed by selecting the title of the desired calculator.
This action should enable the user to navigate the page with as few clicks as possible. -
The entire page and all elements can also be operated using the keyboard.
- In the desktop version, the modal menu only shows the really necessary links to minimize distractions for the user.
- The overlay menu closes by click on the prominent close icon, with ESC, or backspace key pressed.
- On mobile devices, the user has the option of displaying the calculators either individually or all the calculators in one column.
- In the mobile version of the modal, all links are displayed, as the user has the option of displaying the calculators individually.
- Calculates your estimated traveling time by entering your speed and the desired distance.
- Calculates your foreign currency for euros, pounds sterling and US dollars.
- Calculates the cost of your journey by entering the distance, fuel consumption and fuel costs.
- Calculates how big the ecological footprint of the journey will be.
- The classic burger menu opens the modal with the navigation.
- The question mark icon opens the Instructions page.
- The Reset button resets the input of the fields.
-
Add alt="", aria-labels and semantic elements like as much as possible to make the site easy to navigate and understand by keyboard and/or screen reader users.
-
All icons on the page scale by a factor of 1.7 when clicked to give the user visual feedback for their action.
-
The overlay menu closes by click, with ESC, or backspace key, all fields can be accessed using the tab key.
-
The fields update themselves automatically as soon as the required parameters are entered.
Therefore, an additional action such as pressing the enter key or clicking a calculate button is not necessary.
-
API access for the currency calculator to get live conversion rates
-
Integration of Google Maps for live traffic forecasts and route planning.
-
Weather app to forecast the conditions for your journey.
-
Theme toggle that the user can switch between dark and light mode.
-
Add login and registration to give users the opportunity to plan and manage trips in advance.
- M-Issue-01: The links to the individual calculators do not work in the mobile view. The blur effect shifts when clicking on the links.
- M-Issue-02: The links in the instruction section do not work in the mobile view.
- Solution: The navigation for smaller screens was not functional.
For this reason, I separated the code for the navigation from the main code for the calculators and completely rewrote it.
I have documented this process separately [here]. The visual solution for the user can be seen in the following image.
-
S-Issue-01: The input field allow to typed letter into any of the calculators.
-
S-Issue-02: Minus numbers are possible to input into the calculators.
- Solution: Add an alternative method for field validation in JavaScript, as the usual method is not possible due to the needed form input element type=‘text’.
This is the case because the function to replace the comma in the output field with a dot, relies on a type=‘text’ attribute instead of an input type=‘number’.
- Solution: Add an alternative method for field validation in JavaScript, as the usual method is not possible due to the needed form input element type=‘text’.
-
S-Issue-03: Time in hours seems to be a little glitchy when adding a value, then converting from miles -> km -> miles. It says it takes 37 mins to go 1m at 1 mph
-
before:
-
Solution: Scale back the conversion part from miles to km and vice versa and focus on travel time.
Change event listeners to let the select element switch the visual units for better UX. -
after:
- S-Issue-04: Function to calculate travel cost is not working
- Solution: Add correct syntax for function name in camelCase
- Error-1 Duplicate attribute
- Solution: Move attribute "instructions-btn" inside existing class element and delete duplicated class element.
- Error-2+3 End tag section wrong indentation but there were open div element.
- Solution: Add forgotten end tag of DIV element. Correct indentation for section element.
- Error-4~17 Element p not allowed as child of ul in this context.
- Solution: Change HTML Structure set div for ul and h5 for li elements see Commit-File
Error-V1 Attribute step not allowed on element input
- This new error arose after the attempt to resolve the error S-Issue-1 + S-Issue-01.
- Solution: Remove the attributes no longer required for input validation.
CC-Issue-1: Possibly add a switch currency button to swap the two currently in play
- This bug does not prevent the currency calculator from working well.
- And due to lack of time until the project is due to be submitted, the fix is postponed.
Github - Used for storage of my site and for publishing online.
Gitpod - The IDE used for editing my site and pushing changes.
Python - Used python 3 via terminal to preview my site using a local http server.
HTML - The core of the site was built with HTML version 5.
CSS - CSS was used to style the website and define fonts and layout.
JavaScript - JavaScript was used for the logic elements on the website.
Font Awesome - icons are from Font Awesome.
Cloudflare - I use Cloudflare as a library-host for the Font Awesome.
Google Chrome - The website was tested in google Chrome dev tools.
Favicon Generator Website - The favicon was made by favicon.io\
- HTML
- CSS
- JavaScript
- Github - I GitHub for the storage of my site and Gitpages to publish my website.
- Balsamiq - Balsamiq was the choice for the wireframes.
- MS-Paint - MS-Paint for some of my image resizing.
- VS-Code - VS-Code Desktop for various testing on a save playground.
- Slack - Slack to communicate with my Mentor, Peers and get some help and infos.
The site is deployed using GitHub Pages - THE-CONVERSIONATOR
To Deploy the site using GitHub Pages by following these steps:
- Login (or signup) to Github.
- Go to the repository for this project, lorenz-127/THE-CONVERSIONATOR.
- Click the settings button.
- Select pages in the left hand navigation menu.
- From the source dropdown select main branch and press save.
- The site has now been deployed, please note that this process may take a few minutes before the site goes live.
To fork the repository:
- Log in (or sign up) to Github.
- Go to the repository for this project, lorenz-127/THE-CONVERSIONATOR
- Click the Fork button in the top right corner.
To clone the the repository:
- Log into your account on github
- Go to the repository of this project lorenz-127/THE-CONVERSIONATOR
- Click on the code button, and copy your preferred clone link.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal, paste the link you copied in step 3 and press enter.
- Some of the functions are adaptations of the various lessons taught by CI's own LMS.
- Most of my JavaScript questions was answered by MDN web docs
- For harder coding questions, I used Co-Pilot as an assistant, which is provided by the CI GitHub Student Pack.
- The text on the website is written entirely by me. However, I have used deepl.com for some parts of the translation.
- The inspiration for the Modal Overlay Menu I got from W3schools
- My Peers in various Code Institute's Slack channels for their feedback and support.
- All the great videos that are periodically posted by slack-bot in the various channels (You're a legend!).
- Erik_4P_Lead for his advice and tips in early production process. LinkedIn GitHub
- Tomáš_Kubánčik_Alumni_lead For additional advice on solving JavaScript bugs. LinkedIn GitHub
- Daisy Mc Girr For additional sharing her wisdom in various community-coffee meetings. LinkedIn GitHub