Random Background Color Changer

Copy Code


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Background Changer</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .button {
            background: #000;
            font-size: 50px;
            padding: 16px 24px;
            border-radius: 24px;
            color: #fff;
            border: solid #000 4px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="button">Change Color</div>
    <script>
        const button = document.querySelector('.button');
        const characters = ['a', 'b', 'c', 'd', 'e', 'f', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        button.addEventListener('click', () => {
            let color = "#";
            for (let i = 0; i < 6; i++) {
                const randomNumber = Math.floor(Math.random() * characters.length);
                color += characters[randomNumber];
            }
            document.body.style.background = color;
        })
    </script>
</body>

</html>

Breakdown of the code

1. HTML Document Structure

<!DOCTYPE html>

Declares the document type and version of HTML being used.

<html lang="en">:

The root element of the HTML document, with lang="en" indicating that the content is in English.

<head>...</head>: Contains meta-information about the document.

<meta charset="UTF-8">

Specifies the character encoding for the document as UTF-8.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ensures the page is responsive and sets the viewport to match the device's width.

<title>Random Background Changer<title>

Sets the title of the document shown in the browser tab.

<style>...</style>: Contains CSS to style the elements of the document.

<body>...</body>: Contains the content of the document.

2. CSS Styling


* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

Resets default margin and padding for all elements and sets the box-sizing property to border-box for consistent sizing.


body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Ensures the body takes up at least the full height of the viewport and centers its content both vertically and horizontally.


.button {
    background: #000;
    font-size: 50px;
    padding: 16px 24px;
    border-radius: 24px;
    color: #fff;
    border: solid #000 4px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    cursor: pointer;
    user-select: none;
}

Styles the button with a black background, large font size, padding, rounded corners, white text color, black border, specific font family, and sets the cursor to pointer and prevents text selection.

3. HTML Content

<div class="button">Change Color</div>

A div element styled as a button with the text "Change Color".

4. JavaScript Functionality

<script>...</script>: Contains JavaScript to add interactivity to the page.

const button = document.querySelector('.button');

Selects the button element using 'querySelector' and stores it in the 'button' variable.

const characters = ['a', 'b', 'c', 'd', 'e', 'f', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

Defines an array of characters and numbers that will be used to generate random hex color codes.


button.addEventListener('click', () => {
    let color = "#";
    for (let i = 0; i < 6; i++) {
        const randomNumber = Math.floor(Math.random() * characters.length);
        color += characters[randomNumber];
    }
    document.body.style.background = color;
});

Adds a click event listener to the button.
When the button is clicked, the following happens:
Initializes an empty string 'color' with the character '#' (indicating the start of a hex color code).
A 'for' loop runs 6 times, each time generating a random number between 0 and the length of the 'characters' array.
Appends the character at the index of the random number to the color string.
After the loop, color will be a string representing a random hex color code (e.g., #1a2b3c).
Sets the background property of the body element to this random color, changing the background color of the entire page.

Summary

This HTML document creates a simple webpage with a button. When the button is clicked, the background color of the webpage changes to a randomly generated color. The CSS ensures the button is styled nicely and the content is centered. The JavaScript handles the generation of the random color and the application of that color to the background of the page.

Digital Clock Stopwatch