- Electrillo
- UX
- User Stories
- Scope
- Structure
- Features
- Testing
- Deployment
- Technology Used
- Credits
- Acknowledgements
With climate change becoming a increasing urgent problem in our lives, vehicle numbers globally now at an estimated 1.446 billion and 80% of lung diseases being caused by car pollution there is a no better time to start looking for more eco-friedly vehicles for the planets health and our own.
Electic Vehicles (EVs) and Hybrid Vehicles are improving rapidly and if more people moved to the alternatives then maufactures would be motivated to put more money and emphasis into development of these vehicles. With One-fifth of Europe's greenhouse gases coming from the transportation sector alone, this is a massive market which could play a major part in our planets future.
To help educate and encourage the everyday motorist to consider moving to an alternativly fueled vehicle, we have created a website that easily provides the user with more eco-friendly alternatives to the type of vehicle they are looking for. The website also provides more information about the problems and threats caused by ICEs and what the benefits of making a change could be, for the enviroment and the motorist.
This project has been build as part of Code Institutes Earth Day Hackathon Event April 2022 by the team Mother Nature's Minions.
- Educate the user about the danger of climate change
- Show the
- Educate the user about the options available to avoid pollution
- Give environment friendly options following the user choices
- Men and women ages 35 to 65 that want to save money and are willing to learn more about environmentalism and possess these qualities:
- All genders and ethnicities
- Users with an interest in learning more about the climate issue
- Cars enthusiasts
- Learn more about the issues caused by using traditional fuel types and the benefits of alternatives
- Easily find vehicles that use alternative power sources that I am interested in and would suit the users needs
- Calculate possible savings by moving to an alternative fuel
ID | As a... | I Want To Be Able To... | So That I Can... |
---|---|---|---|
01 | User | Easily navigate the website | Explore all the pages and features |
02 | User | Find more information about the website | Understand what the website is designed for and what it can do for me |
03 | User | Learn more about the problems caused by using traditionially fueled vehicles | Understand the problems and see the benefit if changing vehicle power sources |
04 | User | Calculate how much I could save on fuel moving to an alternative vehicle | See the financial benefit of changing to an electric vehicle |
05 | User | Choose what type or style of vehicle that I am looking for | Be shown approptiate vehicle options that are more eco-friendly |
06 | User | View information about individual vehicles | Decide if the vehicle I am reading about is perfect for me |
The Database has been created with MongoDB and exported as Json file:
While working on the project we had to execute the following alterations:
Page/Section | Alteration | Reason |
---|---|---|
Home Page | Removed the team section from the Home Page | It is a priority to display the mission of the website and define a stronger identity |
Home Page | Removed the Car Search feature | In order to deliver are more clean website we moved the feature to a different page |
Evaluation Page | Moved the Calculator up | The Calculator is the core feature of the page so it needs to be displayed first |
Evaluation Page | Pop-up the result of the Evaluation | In order to give the user a better experience, easier to read and visualize |
Evaluation Page | Car Search highlighted with a scroll down arrows | In order to give the user a clear suggestion on how to navigate the website |
Navbar
- Logo: To display the website identity and act as home button
- Mission: Links to the mission behind the project
- Evaluator: Links to the core features of the website
- Team: Links to a presentation of the team with contacts options
Footer
In addition to the Navbar features the footer displays:
- Social links to informative websites and the project repository
- Mission statement
- Direct link to the Evaluator page
- An EV/Fuel Calculator that will display, in a pop-up window, the advantages on choosing an electric ca
- A mini-questionnaire to suggest to the user some options within their budget and preferred car size
- Cards of each team member, implemented with links to their LinkedIn and Github pages
- Implement more currencies and different units of measurements for the EV/Fuel Calculator
- Add a carbon emission calculator
- Add users car details to make savings and carbon emissions more accurate
- More Options button displays more cars from their one result
- Add link to buy the car
- Visit W3C Validator
- Paste the contents of
index.html
into the tool to check input - Click "check"
- Observe warnings & errors
- Notice there is a stray
</p>
tag on like 36 - Open IDE and visit
index.html
- Remove the stray element
- Repeat steps 1-3 until there are no errors
- Mark test "passed"
- Visit W3C Validator
- Paste the contents of
questions.html
into the tool to check input - Click "check"
- Observe the following warning: "Potentially bad value sha512-....for attribute integrity on element link: Invalid base64-value ("
- Open IDE and visit
questions.html
- Observe that there is an error in the font awesome CDN link
- Conclude that error most likely occurred while merging or formatting the code
- Replace with correct CDN link
- Repeat steps 1-3 until there are no errors
- Observe validator's outpit, "Document checking completed. No errors or warnings to show"
- Mark test "passed"
- Visit W3C Validator
- Paste the contents of
team.html
into the tool to check input - Click "check"
- Observe the following error: "Attribute target not allowed on element i at this point"
- Visit
team.html
in local IDE - Move the target attribute to its' corresponding
<a></a>
element - Observe the following error: "Duplicate ID"
- Visit
team.html
and observe that all team cards are using the same ID - Create new ID names for all div elements effected by this error
- Visit
style.css
and style all new ID's accordingly - Repeat steps 1-3 until there are no errors
- Mark test "passed"
- Visit W3C Validator
- Paste the contents of
404.html
into the tool to check input - Click "check"
- Observe the following warning: "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed."
- Visit
404.html
in IDE - Replace
div
withh2
- Repeat steps 1-3 until there are no errors
- Mark test "passed"
- Visit W3C Jigsaw validator in the browser
- Copy all properties from
style.css
- Paste the contents of
style.css
in the validator tool - Click, "Check"
- Observe an error coming from line 410
- Notice the media query definition is outdated
- Revise
- Repeat steps 1-4
- Observe all tests are now passing
- Mark test, "passed"
- Visit the project in the browser
- Click on the CTA button to visit the calculator tool
- Click on answers for each question
- Observe how a CSS border effect is applied to the selected card when clicked
- Notice that clicking on one of the cards a second time removes CSS
select
effect from other elements - Open Google Chrome Dev Tools and visit the JavaScript console to check for errors
- Notice there are no errors in the console
- Visit JSHInt and paste contents of
script.js
into the testing space - Return to IDE and make all changes
- Repeat steps 1-5 and observe same problem
- Identify that error is coming from the grid structure in the HTML
- Visit
questions.html
and notice the first row of questions is missing a closing</div>
- Note that the absence of the closing
</div>
has left the row open and caused the bug - Add the missing
</div>
to close the row - Test again and notice the problem no longer exists
- Mark test as, "PASS"
- Visit the project in the browser
- Click on the CTA button to visit the calculator tool
- Use the Evaluator tool to generate a savings quote
- Observe the number
- Repeat steps 1-3 to ensure the price quote changes
- Repeat steps 1-3 a few more times to test all functionality
- Mark test as, "PASS"
- Visit the deployed project in the browser
- Click on the CTA button to visit the calculator tool
- Scroll down to search for a vehicle
- Click on a choice for each question
- Click, "Search"
- Observe that clicking the "Search" button returns nothing on the front-end
- Open up the JS console
- Observe a 404 error, stating that the JSON file can not be found by the server
- Consult with team
- Have team member refactor and troubleshoot
- Observe that the error during production resulted from the use of a file path in the fetch statement
- Replace the file path with a URL
- Commit, push and deploy changes
- Repeat steps 1-5
- Observe that the search functionality has been repaired and search results are now printing on the front end.
- Open the JavaScript console
- Observe that there are no longer any errors
- Mark test, "passed"
- Copy the contents of
script.js
- Visit JSHint
- Paste the contents of
script.js
into the JavaScript validator - Observe the warnings
- Add semicolons wherever they are missing
- Notice the remaining warnings suggest dot notation
- Observe there are no errors with the JavaScript
- Repeat steps 1 - 3
- Mark test, "passed"
- Visit the project in the browser
- Press F12 to open the developer tools
- Click on 'Lighthouse' in the developer tools
- Click 'Run Audit'
- Observe the SEO, Performance, and Accessibility scores are all above 90, with no errors
- Refactor the code to make it more readable
- Resize the image on the landing page to improve the performance score
- Set a "width" and "height" attribute on the image to improve the performance score
- Observe the performance score is now 100%
- Read the notes about SEO
- Refactor until the SEO score reaches 100%
- Read the notes about Accessibility
- Make suggested changes until the Accessibility score reaches 100%
- Mark test, "passed"
- Fuel Input Validates for every car search result calculation if input is Invalid which could lead to multiple alerts if there is multiple results.
This project was deployed with Github Pages. To see the deployed version, visit Electrillo
Our development team deployed the project successfully by following these steps:
- Visit "repository settings" on GitHub
- Scroll to the GitHub Pages section and click, "source".
- Select the 'main' branch for deployment.
- Open browser and go here to ensure deployment was successful.
- Follow this link to the project's GitHub Repository.
- Click the green button labeled, 'Clone or download.'
- Copy the provided URL.
- Open your local Integrated Development Environment.
- Type the command,
git clone
. - Paste this URL that was copied from GitHub earlier.
- Enter
python3 -m http.server
to start the server.
Languages and Libraries
- HTML5 - Programming Language
- CSS 3 - Programming Language
- JavaScript - Programming Language
- Python - Programming Language
- Bootstrap v5 - Library Import
- Google Fonts - Typography Import
- Font Awesome v5.14 - Icon provider
IDE and Version Control
- Git Pod - IDE (Integrated Development Environment)
- Git - Version Control Tool
- Github - Cloud based hosting service to manager my Git Repositories
- Code Institute GitPod Template - Provides GitPod extensions to help with code production
Design and Development
- Google Chrome Development Tools - Design/Development Tools
- Balsamiq - Wireframe designer software
- Figma - Wireframe designer software
- MongoDB Compass - GUI of MongoDB
- Dbdiagram.io - Data Schema drawing tool
Validation and Testing
- CSS Beautifier - Beautifying CSS Code
- JavaScript Validator - Validating JS code
- Am I Responsive? - Webpage Breakpoint visualizer and image generator
- Black- Code Formatter
- W3C CSS Validation Service
- Browser Stack Responsive Design Tester
- Media Genesis RESPONSIVE WEB DESIGN CHECKER
- Chrome Dev Tools
- Lighthouse
- pylint
Documentation
- TinyPNG - Image Compression
- CompressPNG - Image Compression
- Markdown Table Generator - Markdown Table Production
- Table Converter - Excel to Markdown table converter
- Am I Responsive? - Responsive design validator (used only for documentation purposes)
- Ev Specifications - Source for the data of the cars
- kWh Calculator - Calculator to verify the kWh/mi
- Eco Cost Savings - Reference for most of the car kWh/mi
Default Values for Savings Calculator :
- Average American yearly mileage is 14,263 according to the Federal Highway Administration. https://www.thezebra.com/resources/driving/average-miles-driven-per-year/#average-miles-driven-per-year-by-state
- Average residential electricity rate at 13.72 cents per kilowatt-hour (kWh). https://www.saveonenergy.com/electricity-rates/#:~:text=The%20average%20residential%20electricity%20rate,is%2011.36%20cents%20per%20kWh.
- Miles Per Kilowatt hour consumption of 4 taken from the Tesla Model 3 Standard Range Plus and the Fiat 500e. https://www.selectcarleasing.co.uk/hybrid-electric-cars/guides/miles-per-kwh
- Average fuel price of petrol obtained on 20/04/2022 from https://gasprices.aaa.com/
-
Design Shack - CSS
text-shadow
styles were copied from Design Shack's article, "12 Fun CSS Text Shadows You Can Copy and Paste" -
The 404 Error Page was copied from FreeFrontEnd
-
EvSpecifications - Source for the images of the cars in the database
-
EvSpecifications Source for the images of the cars in the database
-
The illustration on the landing page was copied from iStockPhoto
-
The favicon image was copied from FreeSVG
The team includes: