Random Color Code Generator with HTML, CSS, and JavaScript @rayen-code

Rayen

Embark on a colorful journey as we unveil the magic of a Random Color Code Generator created using HTML, CSS, and JavaScript. This delightful tool brings a touch of serendipity to your projects, offering endless possibilities for vibrant color schemes.




Step 1: HTML Markup:

Begin by structuring your HTML to include the elements for displaying the generated color code. Define the container and the button for generating random colors, setting the stage for your color exploration tool.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Color Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="header">Random Color Generator</h1>
    <div class="container">
        <!-- <div class="color">
            <span class="hex-code">#1324df</span>
        </div> -->
    </div>


    <script src="main.js"></script>
</body>
</html>

Step 2: Styling with CSS:

Elevate the visual appeal of your color generator with CSS styles. Customize the appearance of the color box and button to create an engaging user experience.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-width: 100vh;
}
.header {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: #000000;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 30px;
}

.container {
    width: 100%;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
}

.color {
    width: 200px;
    height: 150px;
    border-radius: 3px;
    background: red;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    position: relative;
    cursor: pointer;
}

.color .hex-code {
    position: absolute;
    color: white;
    padding: 3px;
    background: #0002;
    left: 0;
    bottom: 0;
    opacity: 0.3;
    text-transform: uppercase;
}
.color:hover .hex-code {
    opacity: 1;
}

Step 3: Adding JavaScript Interaction:

Implement the logic for generating random colors using JavaScript. Define functions to create random RGB values and update the color box dynamically.
//-------------------- Java Script --------------------//
let container = document.querySelector(".container");

for (let i = 0; i < 48; i++) {
    container.innerHTML += `
    <div class="color">
            <span class="hex-code">#1324df</span>
        </div>
    `
}

let colors = document.querySelectorAll(".color");

colors.forEach((color)=>{
    function ranRed(){
        return Math.floor(Math.random() * 255);
    }
    function ranGreen(){
        return Math.floor(Math.random() * 255);
    }
    function ranblue(){
        return Math.floor(Math.random() * 255);
    }
    function rgbToHex(r, g, b) {
        var hexR = r.toString(16).padStart(2, "0");
        var hexG = g.toString(16).padStart(2, "0");
        var hexB = b.toString(16).padStart(2, "0");

        return "#" + hexR + hexG + hexB;
    }

    let hexColor = rgbToHex(ranRed(), ranGreen(),ranblue());
    // console.log(hexColor);
    color.style.backgroundColor = hexColor;
    let hexCode = color.querySelector(".hex-code");
    hexCode.textContent = hexColor;



    // copy code function 
    color.addEventListener("click", (box)=>{
        box.target.style.opacity = 0.8;
        setTimeout(()=>{
            box.target.style.opacity = 1;
        }, 100);
        let hexCode = box.target.querySelector(".hex-code");
        
        if(hexCode.textContent != "copied"){
            let code = hexCode.textContent;
            hexCode.textContent = "copied";
            setTimeout(()=>{
                hexCode.textContent = code;
            }, 1000);
            copyCode(code);
        }

        
    })
});


function copyCode(text) {
    var textarea = document.createElement("textarea");
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
}

In conclusion, the Random Color Code Generator adds a splash of spontaneity to your design process, enabling you to discover captivating color combinations effortlessly. With the fusion of HTML, CSS, and JavaScript, unleash your creativity and infuse your projects with vibrant hues.

0 Comments