Live Website

Welcome to RGB Color Game where we want to give the user a fun and easy way of learning RGB. It begins with the user getting all information needed to learn everything about RGB and then suggest that the user start playing a game to exercise on what one just learned. This game provides squares that holds different colors and a rgb value the user then should look to and try to guess what color it have by clicking on the square holding the correct color. The user also have the option to reset the current rgb in case the first one was too hard to figure out. After that there is just to play along with the game, go back to the home page holding all information if needed and make the most use out of the site, to make sure the websites main purpouse continues to help someone learn rgb.

• First Time Visitor Goals

  • As a first time visitor, I want quick and easy understanding about the main purpous of the website;
  • As a first time visitor, I want easy navigation that takes me to my prefered information or playground on the website;
  • As a first time visitor, I want a section that gives me a clear description of how the game works;
  • As a first time visitor, I Want a section that clearly describes RGB;
  • As a first time visitor, I want good basic knowledge in RGB.
  • As a first time visitor, I want a simple game to test my new knowledge in RGB.

• Returning Visitor Goals

  • As a returning visitor, I want to have easy access to the RGB color game;
  • As a returning visitor, I want to quickly find the information about RGB;
  • As a returning visitor, I want to easily find the information about how the game works, in case I don't rememeber.
  • As a returning visitor, I want the same game experience as a first time visitor.

• Frequent User Goals

  • As a frequent user, I want the same user experience as a returning visitor.

Based on the determined strategy and taking into account the user stories the website should contain:

• A landing page that holds all information about the ”Company” itself creating this website, information about the RGB and what it is and information about how the game works;
• A navigation bar that makes it easy for the user to find different sections of the landing page and also quickly find the rgb game ore the landing page.
• A page created for the game only;
• The game page should contain:
  • The rgb Game;
  • One random rgb value;
  • Six squares presenting different colors that the user can click on;
  • A button to change rgb value with;
  • A easy & hard button adding or removing squares from the screen;
  • Text displaying if the user guesses correctly or not;
  • A timer counting down in seconds and stops when user guesses correct;
  • A link leading back to the home page;
  • A help modal opening a screen that hold text explaining the rgb values once more.
  • A how the game works section.

With the current scope the game will take up a bigger part of the screen yet will still have space holding the how the game works section, link to home page and help modal underneath the main game section see more of this under the existing features section.

Below the Wireframes: Original wireframes can be found here:
wireframe 1
wireframe 2

We wanted this website to have a more clean, modern and simple look. With the use of several colors displaying when talking about rgb and adding images to the website the color scheme was kept simple and minimal and the typography used for easy to read purpose.

• Color scheme

  • Main color is #ffff.
  • Navigation bar color is #e3f2fd.

• Typography

  • The main font for the text and paragraphs is Roboto from google fonts.

• Navigation Bar

  • The navigation bar is designed to always stay with the user trough the site.
  • Minimal and simple looking and some icons as well as text showing what the user can find and quickly take them there.
  • A line showing up when the user hover over one of the navigation bar options.

• The header section

  • The user is presented with one image to give the header som style and make the over all look a little bit more fun.
  • Holds a heading of the name for the "Company";
  • Holds a smaler text explaining the whole purpous of the site in a welcoming way;
  • Holds a button with a hover effect that lead the user to the game right away;
  • Holds the navigation that will remain whilst scrolling.

• The welcome Section

  • Heading that welcome the user even more;
  • Some text that want the user to feel welcome and get a bigger understanding of what the purpous of the site is;
  • Image that show a quick look of how the rgb module looks.

• RGB section

  • Main heading of the name RGB;
  • Smaler headings telling what the text is about;
  • the user is provided with text that tells all about RGB;
  • A image to demonstrate how rgb is overlapping with it's colors.

• How to play section

  • Heading of How to play, so the users knows what section they are on;
  • A video displayed for the user to watch showing how the game works;
  • Smaler heading telling step by step;
  • Step by step text of how the game works;
  • Image to the right or under(if on smaler screen) the step by step text with numbers following the step by step text.

• Game page

  • Heading of the name for the game;
  • RGB value displayed under heading;
  • Button proving new colors, new RGB value and reset timer;
  • Squares with colors to pick from when playing the game;
  • Text displayed when the user plays the game so he or she knows if the answer is correct or not and know how much time there is;
  • Easy and hard button that gives the user 3 or 6 squares.
  • Also provided with the navigation bar that stays with the user on scroll.
    

A few feature that would be of more use to make this website better, all listed bellow:

• For the game a a socre board that counts how many times the user guessed right or wrong.
• More information about rgb and some links that lead to more pages explaining rgb.
• A quiz regarding RGB so the user can practise even more.
• A updated video that show how the updated game works, the principle is the same only a few features have been added and could be good to display even in the video.

For this project following technologies was used;

• HTML5
• CSS3
• Javascript

• Git, used for version control by utilizing the gitpod terminal to commit all changes to git and push those to github. Git
• Github, used to store the project after pushing it from Git. Github
• Font awesome, to implement icons on navigation bar Font Awesome
• wireframe.cc, to create wireframes wireframe.cc
• Bootstrap V5.0.x used to create a responsive website, thanks to their libraries and documentation. Bootstrap
• Google fonts to have a easy to read font for the site Google fonts
• Gitpod mainly used to create the code Gitpod
• Colors to help find a template for the theme colors of the website Colors
• Iconscount for their use of all images of the page Iconscount
• Validators to test my code W3C,Jslint and Jigsaw
• Lighthouse for testing performance and accessibility of the site existing in google devtools.
• Google Chrome Devtools for testing the site and how responsive it is.

• Website 1: I started off this project based on this website jsndesign that helped me gain understanding of how the structure of the code could be done. I followed it’s guide to grasp how to make a game like this work and started coding on my own with this websites information in the back of my head. After getting stuck with features as to randomize a value I had to turn to google to find more understanding leading me to Video 2.

• Video 2: From FaithTower MediaTeck on youtube I found another version of a game reminding me of the one I liked to create, and as discussed in the previous section I could here start to get the grasp of a solution for how to create a function randomizing rgb values by using a random integer such as math random. Yet to further understand the structure I also turned to website 3.

• Website 3: W3School was the main website used trough out this project, it gave me further understanding of functions and implementations that could work with my code without needing to copy and paste someone else code, mostly so regarding what was mentioned above and also regarding how to implement a easy and hard function as well ass understanding some extra css.

• Website 4: MDB bootstrap was used so that I would understand core concepts of bootstrap and learn simple ways to work with the boostrap library in a more simple way and create more out of the look I wanted for the website.

My own feature: Not only is the styling a big part here as well as the information page holding how the game works and explaining rgb something impelented by myself. Yet the timer is something I had to work a lot on my own to figure out. To do so I had to turn to this video on youtube made by Muhanad Hasan that explained to me how a timer works and how one could do to implement it in this game. Second resource was W3School again helping me understand how to make a set interval method. And lastly I had to turn to Stack Overflow to see how other people had done everything and find insipration from there without copy or paste anything, just to give myself some understanding.

The W3C Markup Validator, W3C CSS Validator and jshint.com was used to validate every page of the website to make sure there was no syntax errors in the project.

W3C Markup Validator - Two errors found for the index.html page telling me to remove stray end div tags, after fixing that no errors or warnings was found.

W3C CSS Validator - No errors or warnings found.

Jslint.com - No errors found, ther was some warnings that basically all of them were browser warnings.

• First time Visitor Goals

  • As a first time visitor, I want quick and easy understanding about the main purpous of the website
    • The user is given explanation and easy access already on the landing page regarding the rgb information and rgb game.
  • As a first time visitor, I want easy navigation that takes me to my prefered information or playground on the website
    • The user have a navigation bar that holds all links to the different sections of the landing page as well as the game itself.
    • The user can see a button leading to the game on the top of the landing page.
    • On the game page the user is provided with the navigation bar and a extra link under the game leading back to the home page.
    • On the game page the user can also find easy access back to the rgb section on the home page by pressing the ”Click for help” button that give further information about rgb and holds a extra link to that specific part.
  • As a first time visitor, I want a section that gives me a clear description of how the game works
    • A section on the bottom of the home page/landing page is holding all information about how the game works both presented in video, text and image.
    • The user get the same text information about how the game works also on the game page right under the game itself. Easily found as long as the user scroll down on the page.
  • As a first time visitor, I Want a section that clearly describes RGB
    • The user can find a section on the home page explaining rgb, found if he or she chooses to scroll down on the page or presses the rgb section on the navigation bar.
    • The user get further information about rgb on the game page if clicking on the ”Click for help” button giving a reminder of how rgb works.
  • As a first time visitor, I want good basic knowledge in RGB
    • If the user read all the information provided on the home page about rgb and then play the rgb game it’s most likely that he or she are going to get basic knowledge for this subject.
    • The website is something one also can get back to in case the user would need a reminder of the subject and continue to get basic knowledge of rgb.
  • As a first time visitor, I want a simple game to test my new knowledge in RGB.
    • The use can find a page holding the game itself on the website providing he or she with everything in need to play the game and continue to practice their learned skills.

• Returning Visitor Goals

  • As a returning visitor, I want to have easy access to the RGB color game
    • Returning users should here be able to click on the play now button leading directly to the game
    • The user can always use the navigation bar to find everything on the page here also the game by pressing on the name ”game”
  • As a returning visitor, I want to quickly find the information about RGB
    • The user can use the navigation bar to go directly to the rgb section
    • The user can find a link on the game page on the click for help button holding text about rgb and a link leading to the rgb section of the home page
    • The user can scroll down on the home page and quickly find the rgb section.
  • As a returning visitor, I want to easily find the information about how the game works, in case I don't rememeber
    • Scrolling down to the bottom of the home page leads directly to the explanation of how the game works.
    • The user could use the navigation bar by pressing the name ”how” and from there be directed to the how to play section.
    • The user is provided with the same image and text section also on the bottom of the game page.
  • As a returning visitor, I want the same game experience as a first time visitor
    • The game is the same as for the first time visitor, therefore also providing the same game experience as for the first time visiting the website.

• Frequent User Goals

  • As a frequent user, I want the same user experience as a returning visitor.
    • The frquent user is presented with the same website as the returning visitor.

• The website was tested on google chrome and Safari browsers.
• The website was viewed on various different devices, laptops, different iPhones and desktops.
• The website was viewed on google chrome devtools to find any errors and test overall responsiveness.
• Friends, family, slack members and my mentor had the chance to look at this website and give me some extra feedback on potential issues, bugs and user experience issues.

• The squares once they are clicked turn black when clicking on them and the answer is wrong, my wish was to make these go white so that they ”disappear” yet this maintain for a future fix.
• On mobile devices the squares goes a bit too small and could be hard to see for some people.
• The timer for the game would preferably count up instead of down so that how long it took for the user to guess would be displayed, instead of how much time the user had left guessing.
• The Javascript code in a best case scenario need some refactoring to get more clean.

This project as mentioned under the Frameworks section was deployed to GitHub pages by using these steps:

1. Login in to my Github account and look up the right Github Repository for the website.
2. At the top of the Repository page, find the settings button on the menu on the right side.
3. Under the name source, click the dropdown that is called None and select ”Master Branch”.
4. After that the page will be automatically refreshed for you.
5. Scroll then back down trough the page to find the now newly published site link in the Github Pages section.

If you would prefer to run the project locally you should follow these steps:

1. Log in to Github and open the repository that you wanted to deploy.
2. Click on the repository then press the button code.
3. There you will find Clone and Download ZIP.
4. Open in your preferres IDE.
5. Run your local server.

• MBD to help me understand how to work with bootstrap, making a header for the home page and how to implement a video MBD
• jsndesign for helping me understand hwo to make a random RGB generating function, how to create tags that will send out the function to the game itself, how to make a function to generate random colors in a array, easy and hard buttons and so on. jsndesign
• I did not come up with the idea for the RGB color game myself and found the inspiration for it from FaithTower MediaTeck on youtube FaithTower MediaTeck
• Without the help from this video I would never have understood how to make a timer in javascript therefore this needs a huge credit for its good explanation on how to create a timer Muhanad Hasan
• This page teached even furthure about how to make a timer and was much needed whilst trying to figure out how to make it start counting once the page load Stack Overflow
• Several of my problems was solved by looking at W3Schools website and also Stackoverflow

All images used on this website was taken from different sources. None of these are owned by me and are only used in educational purpose, therefore the copyright belongs to the brands themselves all linked bellow:

• Header image on home page women.png iconscount
• RGB circles image logo (2).png clker
• Laptop rgb circles image RGB-profile.jpgShutterstock
• The image called RGB-Profile.jpg is made my me and the video inserted is made by me on a programe called Movie Video Editor Plus 2021

• Antonija Simic, my mentor providing with valuable understanding and helpful feedback.
• Slack members who could be there for me when having a question I could not find a answer to.