If you don't know what this is, check out this article. I got my first dev job within 2 months of coding because I followed tutorials and built my own thing on top of them. So I'm helping you guys to do the same thing. Because I'm awesome.
This tutorial goes over how to make a Guess the HEX game. You'll be given a random HEX code and two colours and you have to guess which one is the HEX. So not only will you build a pretty fun thing, but you might learn something about HEX codes.
(Disclaimer: This is not a promise. I still know nothing about HEX codes.)
You can find the code here and the 2:20 Tutorial video here.
(Another disclaimer: This code will give you the ugliest-looking thing ever. It's your job to make it look nice.)
Step 1: In an HTML file, create the divs and give them IDs
We need three divs - one that will hold the HEX code that we are trying to guess, one will hold the correct colour, and one will hold the incorrect colour. We gotta to give them IDs so we can easily manipulate them with our Javascript!
<html>
<head>
<title>HEX Code Guessing Game</title>
</head>
<body>
<h1>What color is this HEX Code?</h1>
<div id="hexCode"></div>
<div id="first"></div>
<div id="second"></div>
</body>
<html>
Step 2: Style our divs in css
Create a CSS file and give the first and second divs the same styling. We want to be able to see them together for easy comparison. I mean, you could make them far apart or really small if you want. I won't stop you.
#first, #second {
height: 200px;
width: 200px;
border: thin black solid;
margin: 10px;
}
Don’t forget to attach this CSS to your HTML file! I do this all the time! It is the source of 90% of my sadness!
Step 3: Generate random HEX codes
HEX codes are awesome. They’re just numbers written in hexadecimal format - it’s really easy to generate random ones in Javascript. We need two - one that is going to be the correct HEX code, and one that is going to be incorrect. Make a script tag to put your Javascript into and fill it with this.
<script>
correctRandomHex = '#' + Math.floor(Math.random() * 16777215).toString(16);
incorrectRandomHex = '#' + Math.floor(Math.random() * 16777215).toString(16);
</script>
What’s happening here? Math.random() picks a random number between 0 and 1, so multiplying it by 16777215 will create a random number between 1 and 16777215 (which is the largest number a valid HEX code can be.) Math.floor() rounds these numbers up or down, so we don’t end up with something like that 243.029. Then toString(16) converts the number into a hexadecimal! Just because it does! Thanks Javascript.
We’re going to make our hexCode div show the correct hex code that we have just generated.
document.getElementById("hexCode").innerHTML = correctRandomHex;
Step 4: Randomly select a div that will be the correct colour
We don’t want the first or second div to be showing the correct HEX code each time. We need to mix it up a bit. To do this, we’ll use our Math.random() again to choose a random number between 1 and 2, and then use Math.floor() to ensure we only get 1 or 2.
let correctColor = Math.floor(Math.random() * 2);
Then we’ll create an if statement.
if (correctColor === 1 ) {
}
else {
}
We’re going to fill this if statement with the two different possibilities. If the correctColor number is 1, the first div will be correct. If correctColor is 2, the second div will be correct.
Step 5: Show the correct and incorrect colours in the divs
In our if statement, we’re going to set the background colour of each div to be either correct or incorrect, depending on the correctColor number.
if (correctColor ===1 ) {
document.getElementById("first").style.backgroundColor = correctRandomHex;
document.getElementById("second").style.backgroundColor = incorrectRandomHex;
}
else {
document.getElementById("second").style.backgroundColor = correctRandomHex;
document.getElementById("first").style.backgroundColor = incorrectRandomHex;
}
Step 6: Alert the user if they are correct or incorrect
We’re going to add an event to each possibility (if correctColor === 1, or not) which will tell the user if the div they’ve selected is the correct or incorrect HEX code.
if (correctColor ===1 ) {
document.getElementById("first").style.backgroundColor = correctRandomHex;
document.getElementById("second").style.backgroundColor = incorrectRandomHex;
document.getElementById("first").addEventListener("click", function() {alert("Correct!")});
document.getElementById("second").addEventListener("click", function() {alert("Inorrect!")});
}
else {
document.getElementById("second").style.backgroundColor = correctRandomHex;
document.getElementById("first").style.backgroundColor = incorrectRandomHex;
document.getElementById("second").addEventListener("click", function() {alert("Correct!")});
document.getElementById("first").addEventListener("click", function() {alert("Inorrect!")});
}
And there you have it. Just make sure you close all your tags!
Now it’s your turn!
To really make the most out of these tutorials, try to build something on top of this project. That's the whole point. Here are some ideas:
- Make a better UI with errors other than alert
- Have more incorrect colours
- Turn it around - make the user guess the HEX code when given the colour (warning: this will be impossible unless the user is a literal genius)
- Automatically show another HEX code when the user is correct
- Implement a time limit
Good luck my nerd friends! DM me on Twitter if you need any help or you want to show off what you built!
Top comments (8)
That's an amazing post, easy to follow and really constructive. Thank you for writing this, instead of just making the videos and thanks for sharing your knowledge with us
Thank you so much! Hope it helps you ☺️
Oh hey, this is me again. Look, I did some tests, and, sometimes, instead of a 6 digits hexcode, the '#' + Math.floor(Math.random() * 16777215).toString(16); returns a 5 digits hexcode, what "breaks" the code, and give no background.
To solve this, I did the following code
function hexColorGenerator() {
var generatedColor = "";
}
Nice one! All of the projects in my tutorials are super basic and an be optimized to handle edge cases like this. Super awesome that you're doing that!
This is so cool! Thanks for sharing!
Awesome post, how about this kartikeytewari.github.io/Color-Ninja/
Love this!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.