Hello Coders Hope you guys are doing good. In this article we are going to build this Random Hex Color Generator using HTML, CSS and JavaScript.
Below I have provided both step by step article guide as well as Complete video tutorial for you. You can download the complete source code of this project by clicking on the download button at the bottom of this article.
Create a Random Hex Color Generator using JavaScript | Video Tutorial
In the above video I have explained each and every line of code. If you are a complete beginner or having trouble understanding this article then consider watching the above tutorial.
Build a Random Hex Color Generator using JavaScript | Step by Step Article Guide
Project Setup :Â
Create three files. index.html, styles.css, script.js. Generate the boiler plate html and link css file and js file. I will be adding a font family “monospace” and clearing out the default margin and padding applied by the browser.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Random Hex Colors Generator</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
styles.css
* {
font-family: monospace;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
transition: all 0.2s linear;
}
Adding HTML & CSS :
Lets start adding html. Inside the html we will have h1, button and container for holding the color boxes. For the button we will also add an onclick event. So that when the button is clicked “generateColors” function is triggered. Then we will add all the necessary styling to make it look good.
index.html
<h1>Random Colors Generator</h1>
<button onclick="generateColors()">Generate Colors</button>
<div class="colors-container">
<div class="color-box">
<h2>#000000</h2>
</div>
<div class="color-box">
<h2>#000000</h2>
</div>
<div class="color-box">
<h2>#000000</h2>
</div>
<div class="color-box">
<h2>#000000</h2>
</div>
<div class="color-box">
<h2>#000000</h2>
</div>
<div class="color-box">
<h2>#000000</h2>
</div>
</div>
styles.css
body {
background-color: #eee;
padding: 5rem 9%;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #222;
font-size: 3rem;
margin-bottom: 2rem;
}
button {
background-color: #222;
color: #fff;
padding: 1rem 1.5rem;
font-size: 1.5rem;
cursor: pointer;
}
.colors-container {
margin-top: 3rem;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
}
.colors-container .color-box h2 {
background-color: black;
color: #fff;
padding: 5rem 5rem;
font-weight: 800;
font-size: 2.5rem;
}
.colors-container .color-box {
background-color: #fff;
padding: 1rem;
border-radius: 1rem;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
Adding JavaScript :
We need access to the color boxes. So we will select using queryselectorall. We will generate a different hex value for each of those color boxes and then update the DOM with the generated color. Refer the code below.
script.js
const colors = document.querySelectorAll('.color-box h2');
function generateColors() {
colors.forEach((color) => {
let hexCode = '#' + Math.random().toString(16).substring(2, 8);
color.style.backgroundColor = hexCode;
color.innerHTML = hexCode;
});
}
generateColors();
That’s it. Congratulations on building this JavaScript Project. Below in the comment section you can ask if you have any doubts.
Download Source Code of Random Hex Colors Generator built using HTML, CSS and JavaScript.
