Random Color Generator Project

Post Views: 106

HTML CSS Project
April 15, 2025
Ahmad

Random Color Generator Project

Post Views: 106

HTML CSS Project
April 15, 2025

INTRODUCTION

Discover a splash of inspiration with every click! Our Random Color Generator instantly gives you fresh, vibrant color codes — perfect for designers, developers, and creatives. Whether you’re building a palette or just exploring shades, it’s your go-to tool for colorful ideas. Just tap and create!

HTML

Use the H1 tag with the title in bold: Random Color Generator, let your page be the one shining with colors!
Build a div with the class of “container. “This will be the place where-all the color mayhem happens, but right now it is just a waiting void!
Link to a CSS file.
Attach the JavaScript file that will bring the entire project to life-a script turning your web page into a color-filled, moving portrait!

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 7 Random Color Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Random Color Generator</h1>
    <div class="container"></div>
    <script src="index.js"></script>
</body>
</html>

CSS

Container class – Think of it as the bedrock of your layout. It is wide enough to hold everything you need in visibility and place it in the best way possible. Let’s make sure it is spacious, centered, and happy to be out there!
Color-container class – Here is where the fun begins! This container shall be an arena of brilliant colors that change with time. Smooth, clean, and dynamic transitions that animate your colors bringing your page to life, that is what we mean!

				
					body {
    margin: 0;
    font-family: cursive;
  }
  
  h1 {
    text-align: center;
  }
  
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .color-container {
    background-color: orange;
    width: 300px;
    height: 150px;
    color: white;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    border: solid black 2px;
    border-radius: 10px;
  }

JavaScript

First, use the querySelector to create a container called ContainerA that will hold everything.
Next, create 12 color blocks inside that container, each one as follows: create a div with a class color-container and append it to the ContainerA.
Then create a function generateColors() which will be responsible for generating random colors for each of these blocks.
All the random color magic will go on here! Inside this function, we’ll have it grab each block, generate a random color code, and style it with that color.
Now, the randomColor() function actually produces a new hex color code each time it is called. So, the randomness will add that little twinkling touch!

				
					const containerA = document.querySelector('.container');  

for(index = 0; index < 12 ; index++){
    const colorContainerA = document.createElement('div');
    colorContainerA.classList.add("color-container");
    containerA.appendChild(colorContainerA);
}

const colorContainers = document.querySelectorAll('.color-container');

generateColors();

function generateColors(){
    colorContainers.forEach(colorContainerA => {
        const newColorCode = randomColor();
        colorContainerA.style.backgroundColor = "#" + newColorCode;
        colorContainerA.innerText = "#" + newColorCode;
    });
}

function randomColor(){
    const chars = "0123456789ABCDEF";
    const colorCodeLenght = 6;
    let colorCode = "";
    for (index = 0 ; index < colorCodeLenght; index++){
        const randomNum = Math.floor(Math.random()* chars.length);
        colorCode += chars.substring(randomNum, randomNum + 1);
    }
    return colorCode;
}