Guess The Rainbow is an interactive website designed to test the users knowledge of basic colour mixing. The website is designed to be a responsive website that can be accessed and easily viewed on a range of screen sizes. The primary audience of the site will be children and anyone else interested in learning the basics of colour mixing.
The deployed website can be found here
- User Experience (UX)
- Features
- Design
- Technologies Used
- Testing
- Deployment and Local Development
- Credits
As a user I would like:
- To improve my knowledge of colour mixing.
- Easily determine the purpose of the website.
- View the site on any device.
The main content website is a displayed on a single page with the following features:
- A favicon in the browser tab.
- A header with logo and title.
- A "welcome" modal is displayed on loading the page to welcome the user and inform them of the structure of the game.
- An interactive question section displaying the question to answer, with functionality to inform the user in text of the colours displayed when the cursor is hovered over the elements.
- A "Submit Answer" button used to submit the chosen answer to the question for feedback.
- A grid of colours to choose the answer from which will change the background colour of the question answer box to reflect the chosen answer. Each section of the colour grid also has the functionality to display the section colour in text when the cursor is hovered over.
- The user score is displayed below the colour grid displaying the number of correct answers out of the number of questions answered.
- Feedback is received via the display of a modal:
- "Select an Answer" modal to inform the user they have not submitted an answer.
- "Correct" modal to inform the user they have submitted the correct answer.
- "Incorrect" modal to inform the user they have submitted an incorrect answer and inform them of the correct answer.
- An instructions button which displays a modal containing instructions informing the user how to use the website.
- A reset button with the functionality to reset the game. The questions and score are reset when clicked.
The website also has a 404 error page informing the user that the page cannot be loaded.
- More advanced game play levels testing the user on the mixing of secondary and tertiary colours.
The website is designed with a simple structure with the content positioned centrally on the page displayed vertically in the following order:
- The logo
- The game title
- The question
- The submit button
- The answer options displayed in a grid format
- The user's current score
- The instructions and reset buttons
Click here to view the wireframes.
The colour scheme was chosen to complement the colours in the images without causing distraction and provide contrast for good readability of the information. The colour palette was created using Coolors.
Google Fonts was used to add the following fonts:
- 'Roboto' was used for the font of the whole website to provide a simple and clean appearance.
The logo image was chosen to reflect the content and title of the game, and provide a simple appearance without causing distraction.
Icons were used for the arithmetic symbols and the question mark displayed in the question.
All icons were sourced from Font Awesome.
HTML - to create the structure of the website.
CSS - to add style to the website.
JavaScript - to functionality to the website.
Chrome DevTools - used to help test features and for debugging.
Google Fonts - a fonts library.
Font Awesome - for iconography used on the website.
Git - for version control.
GitHub - to create and store the project repository.
GitPod - development hosting platform used to create the website.
Balsamiq - used to create Wireframes for the layout of the pages.
Coolors - used to create the colour palette.
Rawpixel - used to source logo image.
CloudConvert - used to convert images to webp format.
favicon.cc - used to create the favicon.
Am I Responsive - To view the website on a range of devices and create the mock-up screenshot image.
Pericles - Screen reader used to test accessibility.
The W3C Markup Validation Service - Used to validate HTML files.
The W3C CSS Validation Service - Used to validate the CSS file.
JSHint - Used to validate the JavaScript file.
PageSpeed Insights - Used to generate lighthouse reports.
Prettier.io - Used to format code.
Chrome DevTools was frequently utilised in the development of the website to manipulate and test features as they were added to the project, to test responsiveness and for debugging purposes.
Pericles screen reader was used to test the screen reader only elements intended to improve the accessibility of the website.
See Functionality Testing Document
The website was tested for functionality on different browsers (Chrome, Firefox and Edge) and found to be fully functional on them all.
The W3C Markup Validation Service was used to validate the HTML files.
The W3C CSS Validation Service was used to validate the CSS in the stylesheet.
JSHint was used to validate the JavaScript code in the script file.
PageSpeed Insights was used to generate Lighthouse audit reports to allow testing of the performance, accessibility, best practices and SEO of the website during the development of the website.
Lighthouse audit reports are as follows:
Diagnostics for all pages tested suggested to 'serve static assets with an efficient cache policy'. HTTP caching can be used to speed up the page load time on repeat visits by storing such as images, CSS files and JavaScript files. Web caches are used to reduce latency because the resources are stored closer to the client instead of the origin server speeding up the time it takes to satisfy requests for the resources and display the information on the website. Caching resources also reduces network traffic as the cached files are available locally to the client so they do not need to be downloaded again. The resources cached for this website are stored for 10 minutes before the cache expires and the files must be requested from the origin server again. Increasing the cache duration could speed up repeat visits to the website.
- Keydown event listener was not functioning. The problem was fixed by targeting the whole document instead of the answer box.
- When viewed on mobile devices the hover text was displayed before the span innerHTML was changed resulting in the previously displayed hover text being displayed. This problem was fixed by giving each span a unique id attribute and using these to set the innerHTML of each span in JavaScript.
- When the submit and instructions buttons were clicked, focus remained on the button. Hitting enter to close displayed modal called the button function again. This problem was fixed by adding
.blur();to display modal functions to remove focus from the button.
- Improve performance by serving static assets with an efficient cache policy, as suggested in the Lighthouse report.
The site was deployed to GitHub pages.
The steps to deploy are as follows:
- Log in (or sign up) to GitHub.
- Go to the repository for this project (https://github.com/VictoriaParkes/guess-the-rainbow).
- In the GitHub repository, navigate to the 'Settings' tab.
- From the 'Code and automation' section of the menu on the left, select 'Pages'.
- In the 'Build and deployment' section, under the heading 'Source' select 'Deploy from a branch' from the dropdown menu.
- Under the heading 'Branch', select 'main' from the branch selection dropdown menu and '/root' from the 'Select folder' dropdown menu.
- Click save, the page will be automatically refreshed and a message reading 'GitHub Pages source saved.' will be displayed to confirm successful deployment.
- The link to the live site will be displayed at the top of the 'GitHub Pages' page once deployment has completed and can be used to access the live website.
The live link can be found here - Guess The Rainbow
The steps to fork the repository are as follows:
- Log in to GitHub.
- Go to the repository for this project (https://github.com/VictoriaParkes/guess-the-rainbow).
- In the top-right corner of the page, click 'Fork'.
- Under 'Owner', select an owner for the repository from the dropdown menu.
- Optionally, in the "Description" field, type a description of your fork.
- To copy the main branch only, select the 'Copy the main branch only' check box. If you do not select this option, all branches will be copied into the new fork.
- Click 'Create fork'
- Log-in to GitHub.com, navigate to your fork of the repository.
- Above the list of files, click Code.
- Copy the URL for the repository.
- To clone the repository using HTTPS, under "Clone with HTTPS", click the 'Copy' icon.
- To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH, then click the 'Copy' icon.
- To clone a repository using GitHub CLI, click Use GitHub CLI, then click the 'Copy' icon.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory.
- Type git clone, and then paste the URL you copied earlier.
- Press Enter. Your local clone will be created.
For more details about forking and cloning a repository, please refer to GitHub documentation.
W3 Schools and lessons from Code Institute's Full Stack Developer Course were frequently referred to in the development of this website.
- The favicon was implemented using code from Code Institute's "Love Maths" project.
- The modals were created using W3school's How TO - CSS/JS Modal.
- The colour selection functionality was created using Change Background Color onclick using JavaScript from How to Code School.
- The
getcomputedstyle();method was utilised using W3school's page Window getComputedStyle(). - The hover text was created using W3school's pages How TO - Display an Element on Hover and CSS Tooltip.
- Elements were positioned centrally on the page using W3school's page CSS Layout - Horizontal & Vertical Align.
- Font Awesome docs were referred to in order to make the website more accessible to a wider audience.
The content of the website was written by Victoria Parkes.
The local development section of this document was written using GitHub documentation.
The website logo image was sourced from Rawpixel
I would like to thank Brian Macharia, my Code Institute mentor, for his helpful feedback and advice.