Debug a Random Background Color Changer - Debug a Random Background Color Changer

JavaScript
1

Tell us what’s happening:

done that line with different scope but wont pass the test

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debug a random background color changer</title>
    <link rel="stylesheet" href="./styles.css" />
</head>

<body class="body">
    <h1>Random Background Color changer</h1>

    <main>
        <section class="bg-information-container">
            <p>Hex Code: <span id="bg-hex-code">#110815</span></p>
        </section>

        <button class="btn" id="click-btn">Change Background Color</button>
    </main>
    <script src="./script.js"></script>
</body>

</html>

/* file: styles.css */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --yellow: #f1be32;
    --golden-yellow: #feac32;
    --dark-purple: #110815;
    --light-grey: #efefef;
}

body {
    background-color: var(--dark-purple);
    color: var(--light-grey);
    text-align: center;
}

.bg-information-container {
    margin: 15px 0 25px;
    font-size: 1.2rem;
}

.btn {
    cursor: pointer;
    padding: 10px;
    margin: 10px;
    color: var(--dark-purple);
    background-color: var(--golden-yellow);
    background-image: linear-gradient(#fecc4c, #ffac33);
    border-color: var(--golden-yellow);
    border-width: 3px;
}

.btn:hover {
    background-image: linear-gradient(#ffcc4c, #f89808);
}

/* file: script.js */
const darkColorsArr = [
    "#2C3E50",
    "#34495E",
    "#2C2C2C",
    "#616A6B",
    "#4A235A",
    "#2F4F4F",
    "#0E4B5A",
    "#36454F",
    "#2C3E50",
    "#800020",
  ];
  
  function getRandomIndex() {
    return Math.floor(Math.random() * darkColorsArr.length);
  }
  console.log(getRandomIndex())
  
  const body = document.querySelector("body");
  const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
  console.log(bgHexCodeSpanElement);
  
  function changeBackgroundColor() {
    const color = darkColorsArr[getRandomIndex()];
  
    bgHexCodeSpanElement.innerText = color;
    body.style.backgroundColor = color;
  }
  const btn = document.querySelector("#click-btn");
  console.log(btn)
  
  btn.addEventListener("click", changeBackgroundColor);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Challenge Information:

Debug a Random Background Color Changer - Debug a Random Background Color Changer

2

You are failing this test:

You should fix the capitalization error in the math.random() line.

This is because you have made uncalled for modifications to this original code:

function getRandomIndex() {
    const randomIndex = darkColorsArr.length * math.random();
    return randomIndex;
  }

You should correct the capitalization error and round the value down to the nearest integer, without making any other changes (i.e. you should keep the const declaration and return statement on separate lines).

3

const randomIndex = Math.floor(Math.random) * darkColorArr.length);
return randomIndex;

was the first correction

4

You have typos in this line now. Check your parentheses and variable name carefully.

5

function getRandomIndex() { const randomIndex = Math.floor(Math.random() * darkColorsArr.length); return randomIndex; }

please am confused right now

6

do not change the order of things

7

thanks guys this took me a full day to do.