Scribd Logo
Upload

Welcome to Scribd!

  • HNK

    Uploaded by

    huzaifajalal01
    2 views2 pages
    The document is about reflective thinking and includes an interactive button that changes the background color of the page when clicked. It asks the reader to imagine what type of application they would like to create as a computer programmer. The JavaScript code generates a random hex color for the new background, then determines if it is a bright or dark color to appropriately update the text color for visibility.

    Original Description:

    Original Title

    hnk

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document is about reflective thinking and includes an interactive button that changes the background color of the page when clicked. It asks the reader to imagine what type of application they would like to create as a computer programmer. The JavaScript code generates a random hex color for the new background, then determines if it is a bright or dark color to appropriately update the text color for visibility.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views2 pages

    HNK

    Uploaded by

    huzaifajalal01
    The document is about reflective thinking and includes an interactive button that changes the background color of the page when clicked. It asks the reader to imagine what type of application they would like to create as a computer programmer. The JavaScript code generates a random hex color for the new background, then determines if it is a bright or dark color to appropriately update the text color for visibility.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reflective Thinking</title>
    <style>
    body {
    font-family: 'Arial', sans-serif;
    text-align: center;
    transition: background-color 0.5s;
    margin: 0;
    padding: 0;
    }
    h1 {
    color: #333;
    }
    p {
    color: #555;
    }
    button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    }
    </style>
    </head>
    <body>

    <h1>Reflective Thinking</h1>

    <p>
    Imagine you are a computer programmer. What kind of application would you
    like to create, and how would it benefit people?
    </p>

    <button onclick="changeBackgroundColor()">Change BG Color</button>

    <script>
    function changeBackgroundColor() {
    const body = document.body;
    const currentColor = window.getComputedStyle(body,
    null).getPropertyValue('background-color');
    const newColor = getRandomColor();

    // Change background color


    body.style.backgroundColor = newColor;

    // Update text color based on background brightness


    const textColor = isBrightColor(newColor) ? '#333' : '#fff';
    document.querySelectorAll('h1, p, button').forEach(element => {
    element.style.color = textColor;
    });
    }

    function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
    }

    function isBrightColor(color) {
    // Calculate brightness using relative luminance formula
    const rgb = parseInt(color.substr(1), 16);
    const r = (rgb >> 16) & 0xff;
    const g = (rgb >> 8) & 0xff;
    const b = (rgb >> 0) & 0xff;
    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    return luminance > 128;
    }
    </script>

    </body>
    </html>

    You might also like