In this project, we build a simple web page where clicking a button changes the background color randomly. It’s a fun way to learn how HTML, CSS, and JavaScript work together to create interactive web experiences.
HTML:
The HTML sets up the basic structure of the page. It contains a div with the class container that centers our content. Inside, there is a heading (<h1>) to tell users what to do, and a button element (<button>) with an ID of changeColorBtn. This button is what users will click to change the background color. The HTML also links the CSS file for styling and the JavaScript file for the interactive behavior.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project 2: Random BG Color On Click</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Click to change background color</h1>
<button id="changeColorBtn">Change Color</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: Styling and Layout:
The CSS styles the page to look clean and modern. We start by resetting margins and padding on all elements with the universal selector * to ensure consistency across browsers. The body is styled to take the full viewport height and uses Flexbox to center the content both vertically and horizontally. The initial background color is black (#000000), and the text is white for contrast. The button has padding, rounded corners, a white background, black text, and a subtle shadow to make it stand out. A smooth transition on the background color change makes the color shift visually pleasing.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000;
color: #ffffff;
transition: background-color 0.5s ease;
}
.container {
text-align: center;
}
button {
padding: 15px 25px;
font-size: 1em;
background-color: #ffffff;
color: #000000;
border: none;
cursor: pointer;
border-radius: 8px;
box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.2);
}
JavaScript: Making It Interactive:
The JavaScript adds the magic of interactivity. It first selects the button using document.getElementById. Then, it listens for a click event on the button. When clicked, the script calls the getRandomColor function to generate a random RGB color string. This function creates random values for red, green, and blue components by using Math.random() and Math.floor(). The new random color is then applied to the page’s background by updating document.body.style.backgroundColor. This dynamic change happens smoothly thanks to the CSS transition.
const btn = document.getElementById("changeColorBtn");
btn.addEventListener("click", () => {
const randomColor = getRandomColor();
document.body.style.backgroundColor = randomColor;
});
function getRandomColor() {
const red = Math.floor(Math.random() * 256);
const green = Math.floor(Math.random() * 256);
const blue = Math.floor(Math.random() * 256);
return `rgb(${red},${green},${blue})`;
}
Conclusion:
This simple project is a great example of how HTML, CSS, and JavaScript combine to create interactive web pages. The HTML provides the content and structure, CSS adds style and layout, and JavaScript brings the page to life with dynamic behavior. By understanding each part, you can build more complex and engaging websites. Try customizing the button or adding new features like changing text color or adding animations to enhance the user experience even further!
