Colour Genius

Inspiration

After attending the Introduction to Web Development and UI/UX workshops, we noticed how important the role of colour plays in marketing, coding, and design. This inspired us to familiarize others with Hex colour codes, one of the most common colour systems in coding through the form of a game.

What it does

Colour Genius is a simple game website where the objective is to guess the hex colour code based on the randomly generated colour on the screen. The closer you are to the colour code, the closer your score is to 800.

How we built it

As four quite inexperienced coders, we did not know what we were able to create. The idea of Colour Genius was ambitious, but with the help of the web design workshop and google, we were able to make our visions come true. The easiest part of the website-making process was coding the HTML. Using the knowledge we got, we were able to create a basic frame that we could build onto. The hardest part of making the website was trying to design through code and functionalize it through Java Script. From here, Google was able to help us. Through the search engine, we were able to find lines of code or inspiration that could help us. Since most of the code we found was not exactly made for our project, we edited and added our own code to make them match what we aimed to do.

Challenges we ran into

Just like any great product that is made, we ran into several irritating but not unexpected challenges throughout the process of making this website. One such challenge was determining how to allow the program to randomly generate a color using RGB values. However, we overcame this barrier by researching the way RGB values are converted in code. After some quick google searches, we figured out how to generate random colors by creating a function that assigned 3 random integers and putting those integers into the newly implemented converter. Other obstacles such as coding the program to determine a score and the design of the program were solved using the information gathered from the recent workshops.

Accomplishments that we're proud of

Overall we were pleased with our final product; we were very glad to have our hard work represented in the hex code. We were also pretty satisfied with the organization of the code; we didn't have to worry about stray or unnecessary lines of code too much. The implementation of the score that is shown in the result is also something we think helped make the game stand out.

What we learned

From this 2 day hackathon, we were able to learn many things. Firstly, we learned through the Intro to Web Dev workshop the basics of HTML, CSS, and JavaScript. This was proven to be crucial during our building of the final project. Although we did not implement Symbl.ai in our final project, the workshop was very interesting and definitely something that we could use in the future. Finally, we learned some very important core values such as the importance of patience, problem-solving, and teamwork in coding or in general.

What's next for Colour Genius

Colour Genius currently is simply a foundation for the game. In the future, we plan to include party rooms where users can compete against others online or with friends. Furthermore, we want to advance the display of results. For example, we could attempt at displaying the actual answer after the user guesses or such.