Charity Earth was created as part of the April 2022 Earth Day Hackathon held by the Code Institute.
Charity Earth - Tell us what you value - The fun way to discover new environmental charities! Take a short quiz and based on your areas of interest we will suggest a charity that would love a donation from you.
Don't have any spare funds but still want to contribute? Select to donate your time instead! Want to donate to a specific area of the UK? We can help you find the right charity for that area.
Visit the deployed site: Charity Earth
-
To quickly and easily discover charities that are local to me, that have an environmental focus, and which reflect my values and interests, without having to research and compare a range of organisations.
-
To be profiled for these recommendations through a light-hearted, multiple choice quiz.
-
To be presented with a link to my recommended organisation’s website.
-
To feel secure in the knowledge that my recommended organisation is a legitimate, registered charity.
-
To be able to easily navigate back to the homepage after completing the quiz if I wish to repeat the quiz with different answers.
-
To have a means of learning more about Earth Day, and its theme for 2022, as well as a resource for discovering more organisations that work in these areas.
-
To be able to access a full list of the charities for my area of choice, without having to navigate the quiz repeatedly to get different results.
-
To have different quiz questions presented to me based on my earlier choices in the quiz, creating a sense a variety that encourages repeat use.
We wanted to choose colours that reflected the environment, so we have chosen a variety of greens, blues and browns for our site.
Google Fonts was used to import the chosen fonts for use in the site.
We have chosen to use the oxygen font. This is a sans serif font which is great for accessibility and dyslexic users. We also felt the name was very fitting for use on our site for Earth Day 😊.
All imagery used within the site has been chosen to showcase the beautiful nature of Earth.
All charity images used belong to their respective charitites.
Wireframes were created for mobile, tablet and desktop using Balsamiq.
Index Page Wireframe
Quiz Screen Wireframe
End of Quiz Wireframe
Result Wireframe
404 Error Page Wireframe
The website is comprised of 7 pages, the index page, 5 charity themed pages and the 404 page.
The index page is divided into 4 sections, the hero image, the quiz, the information section and the contact section.
The quiz begins with the user selecting the location they wish to find a charity in. After the user submits this form and sets their location, they will be presented with their first multiple choice quiz question, where each answer corresponds to one of the 5 themes of Earth Day 2022. They will answer 5 of these "pick-one-of-three" questions, with each answer increasing their tally for a given theme. Next, the user answers whether they are seeking to find a charity to volunteer with, or to make donations towards. If there is "tie" in the results of their quiz, a final tiebreaker question will be displayed, which will offer the user a multiple choice question that only features answers that correspond to the "tied" scores the user has in the quiz. Once the tie is broken, or in the case that there is no tie to begin with, the user is presented with a button offering to take them to their results. The url attached to the button is generated using their chosen location, preferred "donation" type, and the theme they chose through completing the rest of the quiz.
Climate change charity page.
Conservation and restoration charity page.
End plastic charity page.
Environmental literacy charity page.
Food and the environment charity page.
The 404 page lets the user know that there has been an error and gives them the option through a choice of buttons to be redirected to the home page, the quiz section, the information section and the contact us section.
-
All Pages on the website have:
-
A favicon. We have chosen to use an image of the Earth to tie our site in the with Earth Day theme of the hackathon.
-
A navbar. This allows the user to easily navigate through the site. On mobile devices the navbar collapses down into a toggle navbar.
-
A footer. The footer contains links to the the teams GitHub and Linked In accounts.
-
-
Future Implementations.
We have been mindful during coding to ensure that the website is as accessible friendly as possible. This has been have achieved by:
- Using semantic HTML.
- Using descriptive alt attributes on images on the site.
- Providing information for screen readers where there are icons used and no text. This has been actioned in the footer of our project.
- Ensuring that there is a sufficient colour contrast throughout the site.
HTML, CSS, Javascript
Balsamiq - Used to create wireframes.
Git - For version control.
Github - To save and store the files for the website.
Coolors - To select the colour palette for the site.
Google Fonts - To import the fonts used on the website.
Font Awesome - For the iconography on the website.
Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
Tiny PNG To compress images.
Birme To compress images in the webp format.
Favicon.io To create favicon.
Am I Responsive? To show the website image on a range of devices.
Shields.io To add badges to the README
remove.bg To remove the background from the logo image
The site is deployed using GitHub Pages. Visit the deployed site here. To deploy using GitHub pages:
- Login or Sign Up to GitHub.
- Open the project repository.
- Click on "Settings" on the navigation bar under the repository title.
- Click on "Pages" in the left hand navigation panel.
- Under "Source", choose which branch to deploy. This should be Main for newer repositories (older repositories may still use Master).
- Choose which folder to deploy from, usually "/root".
- Click "Save", then wait for it to be deployed. It can take some time for the page to be fully deployed.
- Your URL will be displayed above "Source".
To fork the repository:
- Log in (or sign up) to Github.
- Go to the repository for this project, earth-day-hackathon-2022.
- Click the Fork button in the top right corner.
To clone the repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, earth-day-hackathon-2022.
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- 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 and then paste the link you copied in step 3. Press enter.
Please view Testing.md for the testing documentation.
The content for the site was created by the team. Biographies for each charity were taken from the charities website.
-
Header Image used on the index page and 404 page
-
All Charity Logo images were taken from each charities websites.
We would like to thank the following people:
- Suzy Our hackathon facilitator
- Our families for their endless patience as we disappeared for a weekend to code
- The Code Institute Hackathon team for putting on these wonderful events to allow us to develop our skills within an agile development environment.
Meet team 5 Hackathon Newbies & Me!