The Climate Memory website was created to raise the awareness of the climate change. The website attempts to present the facts of the human activities effecting the nature and the life of other people include our childern.
The website was developed as a memory game with additional features. In contrast to the classical memory game, the user tries to match an image with an corresponding image description. The image can be either a visualization, icon or just a figure. The content of the fliped card is everytime magnified in order to read the text or see the image properly.
The game is particularly for adults or children who can already read. The website can even be used at schools for educative purposes.
Click here to play the game!
The purpose of the game is communicate the facts about the climate change in an appealing and user-friedly way. This educative website is responsive so that the user can play the game on various devices.
-
First-Time User Goals
- US1: As a first-time visitor, I want to understand the purpose of the gama.
- US2: As a first-time visitor, I want to the game is fun and interactive.
- US3: As a first-time visitor, I want to found out interesting information about the climate change.
- US4: As a first-time visitor, I want to understand the game rules.
- US5: As a first-time visitor, I want to play the game on my mobile phone.
- US6: As a first-time visitor, I want to see my progress.
-
Returning Visitor Goals
- US7: As a returning visitor, I want to found out more facts about the climate change.
- US8: As a returning visitor, I want to suggest the developer including additional facts.
The Wireframes were designed using Balsamiq. Two different layouts were mainly considered:
Fonts were selected based on the fontpair. The fonts were included in the web page via the link tags, which were generated using the Google Fonts.
- Montserrat was chosen for headings
- Hind was takein for body text, such as paragraphs
The color pallete was chosen using coolors with a slight modification. The final colors includes the Eerie Black and Alice Blue, see here.
The chosen colors were evaluated in term of accessibitlity using the toolnes tool. The resulting accessible color matrix revealed the following suggested combinations.
- text in modal card is sometimes cut off; solution: remove all classes specific to the type of card (i.e. card__modal--txt) after closing the card modal and to read the text properly, make the modal larger
- the blue color of buttons on iphone; specify the color and set webkit
- Js Validator: missing semicolons and advice to used the dot notation when working with the objects
The site was deployed to GitHub Pages. The steps to deploy the webpage were following:
- In the GitHub repository, the Settings Section was selected.
- The Page Category on the left hand side was selected.
- Under the Branch Section, the source branch from the drop-down menu (e.g. master branch) was chosen.
- The Save Button was cliked on.
- The page url was generated, which indicates the successful deployment.
The website can be viewed here
During the development, the commit type was included in commit messages, following the blog post.
The repository can also be cloned locally, the steps are following:
- On Git
- Go to the repository, i.e. https://github.com/brodsa/mgv-vorau
- You see the content of the repository, i.e. all the files are listed. On the right side at the top of the list, find the Code drop down button and click on it.
- Copy the repository HTTPS link to the clipboard.
- In the terminal (Note: git must be preinstalled)
- Open the terminal and navigate, where you want to clone the repository.
- Type
git cloneand insert the content from the clipboard, leading to the commandgit clone https://github.com/brodsa/climate-memory.git. - Once the project is cloned, you can start using the repository locally.
- HTML
- CSS
- JavaScript
- Markdown
- JavaScript Tutorial & Documentations
- Data for the Memory Game
- Google Fonts was used to import the fonts into the style.css file.
- Color Pallete was used to select accessible colors.
- Image Compressor was used to compress the images.
- Image Converter was used to convert all images in the webp format.
- Favicon was used to generate the code and files for the webpage favicon.
- GitHub was used to store the code and host the website.
- Gitpod is an IDE and was used to develop the website.
- Formsubmit was used for the form submission.
- Mockup Generator was used to generate the mockup for README.
- Balsamiq was used to create wireframes.