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

JavaScript
1

Tell us what’s happening:

They said I should change the capitalization error for math.random( ) and also I should call the getRandomIndex function inside the darkColorsArr[getRandomIndex] line.

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>
    <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="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);
}

const body = document.querySelector("body");
const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");

function changeBackgroundColor() {
  const randomIndex = getRandomIndex();
  const color = darkColorsArr[randomIndex];

  bgHexCodeSpanElement.innerText = color;
  body.style.backgroundColor = color;
}

// FIX THIS TO MATCH YOUR ACTUAL BUTTON ID
const btn = document.querySelector("#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/142.0.0.0 Safari/537.36

Challenge Information:

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

2

you also changed the order of things, the tests now don’t recognize the line anymore and fail

3

Exactly, the order of the factors should not matter but if you invert the order it passes. It should consider both cases. The other thing that is failing in your code is that they are expecting a call to getRandomIndex function inside the darkColorsArr[getRandomIndex] line. That one is well explained in the tests.

4

you can open a github issue to have both orders passing

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

5

I also do not know why they are talking about capitalization in that test.

6

because the starting code has a syntax error with math.random (math does not exist in JS, it’s Math)

1 Like
7

The capitalization error is still failing me

const darkColorsArr = [
  "#2C3E50",
  "#34495E",
  "#2C2C2C",
  "#616A6B",
  "#4A235A",
  "#2F4F4F",
  "#0E4B5A",
  "#36454F",
  "#2C3E50",
  "#800020",
];

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

const body = document.querySelector("body");
const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");

function changeBackgroundColor() {
  const color = darkColorsArr[getRandomIndex()];

  bgHexCodeSpanElement.innerText = color;
  body.style.backgroundColor = color;
}

const btn = document.querySelector("#btn");

btn.addEventListener("click", changeBackgroundColor);
8

you still have the two terms in the multiplication in the wrong order

1 Like
9

I have opened an issue here: