Code Preview
Folder Structure:
- First we will need to create a main folder for our projects
- Then we will create three files inside that folder index.html, style.css, and script.js
Introduction:
This project is about creating a fun and interactive Random Background Color Generator using HTML, CSS, and JavaScript. It allows users to generate random background colors with just a click of a button. The generated color code is displayed on the screen, making it easy to note or use elsewhere. Additionally, users can copy the color code to their clipboard by clicking the copy icon, which dynamically changes to indicate the action is successful.
HTML Code:
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="content">
<h2 id="color_code">#fff</h2>
<i id="icon" class="far fa-copy"></i>
</div>
<button id="btn">Change Background</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
...
Explanation:
In the <body>, a wrapper div is created to center the content both horizontally and vertically using Flexbox. Inside the wrapper, a container div holds the main interactive elements.
The content div contains an <h2> element to display the generated color code and an <i> tag with a Font Awesome copy icon. A button with an ID of btn is provided for users to generate new random background colors.
The structure is simple and logical, ensuring that all interactive elements are grouped and styled appropriately. Additionally, IDs are assigned to specific elements (#color_code, #icon, and #btn) for easier targeting and manipulation in JavaScript.
Overall, the HTML acts as a well-organized foundation for styling and dynamic functionality.
CSS Code:
...
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
transition: background .5s;
}
.wrapper {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 300px;
border-radius: 15px;
background: #fff;
padding: 15px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
}
.container .content {
display: flex;
margin: 15px 0;
}
.content #color_code {
font-size: 1rem;
margin-right: 20px;
}
.content i {
font-size: 18px;
cursor: pointer;
}
#btn {
display: block;
background: #cb5eb1;
color: #fff;
width: 100%;
border: 0;
outline: none;
border-radius: 10px;
padding: 10px;
cursor: pointer;
}
...Explanation:
The CSS begins with a universal selector * to apply a consistent reset across all elements, setting padding and margin to 0 and enabling box-sizing: border-box for better control over element dimensions. A global font family of Arial, Helvetica, sans-serif is specified for a clean, modern look.
The body has a smooth transition effect on the background color (background .5s), ensuring visually pleasing color changes.
The .wrapper class is styled to take up the full viewport height and width (100vh and 100%) while using display: flex to center its child elements in both directions.
Inside the wrapper, .container is styled as a small, centered card with a fixed width of 300px, a light background (#fff), rounded corners (border-radius: 15px), and subtle box shadow for a modern and elevated look. Padding inside the container ensures the content is spaced nicely.
Within the container, .content uses display: flex to horizontally align its children: the color code and the copy icon.
The #color_code element is given a moderate font size (1rem) and spacing (margin-right: 20px) to maintain balance in the layout. The copy icon (i) is styled with a font-size of 18px and a cursor: pointer for interactive feedback, encouraging users to click it.
The button (#btn) is styled to be visually striking, with a vibrant background color (#cb5eb1), white text, and rounded corners (border-radius: 10px). Its full width (width: 100%) and generous padding make it touch-friendly, especially on smaller devices.
To ensure a polished look, the button’s border and outline are removed, and the cursor changes to a pointer when hovered.
Overall, the CSS creates a responsive, user-friendly design with a focus on visual clarity and smooth interactivity.
JavaScript Code:
...
const getColor = () => {
const randomNumber = Math.floor(Math.random() * 16777215);
const randomCode = "#" + randomNumber.toString(16);
document.body.style.backgroundColor = randomCode;
document.getElementById("color_code").innerText = randomCode;
const icon = document.getElementById("icon");
if (icon.classList.contains("fas")) {
icon.classList.replace("fas", "far");
}
};
const copyColor = () => {
const colorCode = document.getElementById("color_code").innerText;
navigator.clipboard.writeText(colorCode).then(() => {
const icon = document.getElementById("icon");
if (icon.classList.contains("far")) {
icon.classList.replace("far", "fas");
}
});
};
document.getElementById("btn").addEventListener("click", getColor);
document.getElementById("icon").addEventListener("click", copyColor);
getColor();
....Explanation:
The JavaScript code starts by defining a function getColor, which generates a random background color. It uses Math.random() to create a random number and multiplies it by 16777215 (the maximum value for a 6-digit hexadecimal color) before converting it to a hexadecimal string using toString(16).
The resulting color code is then applied to the backgroundColor property of the body, dynamically changing the background color of the webpage.
The same color code is also displayed in the <h2> element with the ID color_code. Additionally, within the function, the copy icon is checked using its classList to ensure it switches back to its default state if it was previously toggled.
The copyColor function allows users to copy the displayed color code to their clipboard. It retrieves the text content of the color_code element and uses the navigator.clipboard.writeText API to copy it. Once the copying is successful, the Font Awesome icon is updated by replacing the far class (outline style) with fas (solid style) to visually indicate success. This provides instant feedback to the user.
Event listeners are added to the button and the copy icon. The getColor function is triggered whenever the button with the ID btn is clicked, and the copyColor function is triggered when the copy icon is clicked.
Finally, the getColor function is called once during page load to ensure the background color and displayed color code are initialized. This script focuses on user interaction and DOM manipulation, making the page dynamic and engaging.
Source Code:
Download “BG-Color-Changer.zip” BG-Color-Changer.zip – Downloaded 37 times – 1.84 KBConclusions:
