Learn Basic Debugging by Building a Random Background Color Changer - Step 3

JavaScript
1

Tell us what’s happening:

I have been trying to solve this challenge since yesterday and i have reset it as well but i am not sure why it is not working as it should be pls can i get some help

/* file: script.js */
const darkColorsArr = [
  "#2C3E50",
  "#34495E",
  "#2C2C2C",
  "#616A6B",
  "#4A235A",
  "#2F4F4F",
  "#0E4B5A",
  "#36454F",
  "#2C3E50",
  "#800020",
];

// User Editable Region

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

const randomIndex = getRandomIndex();
console.log("Random index:", randomIndex); 
const randomColor = darkColorsArr[randomIndex];

console.log("Random color:", randomColor);

// User Editable Region

Your browser information:

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

Challenge Information:

Learn Basic Debugging by Building a Random Background Color Changer - Step 3

2

Not sure if you tagged the wrong step, or if you are doing way more than the step asks you to. My suggestion is: reset the step once more, and do only what the challenge asks you, on the code you already have.

  • Update the console statement to print a whole number between 0 and 9 […] with a method […] that rounds a number down to the nearest whole number.
3

i have reset it now but i am confused on why it is not working

const darkColorsArr = [
  "#2C3E50",
  "#34495E",
  "#2C2C2C",
  "#616A6B",
  "#4A235A",
  "#2F4F4F",
  "#0E4B5A",
  "#36454F",
  "#2C3E50",
  "#800020",
];
function getRandomIndex() {
  console.log(darkColorsArr.length * Math.random())
}
getRandomIndex();
4

Good! Now all you have to do is follow these instructions and not more than that.

5

do i just put a number in

6

Nope, use a method that rounds down numbers. You probably already used it a few steps back.

7

i did not do the previous one before this

8

That is one good reason to do the challanges in order, as they complete each other.

You can always search outside material for questions like this as well. Being able to search for answers is always an important part of coding. A lot of everything is already answered in forums, blogs, etc.

Happy coding!

1 Like
9

Tell us what’s happening:

I have not recived any help for this challenge i have used stackoverflow to help but it never worked. I also reset the challenge multiple times

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>Build 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",
];

// User Editable Region

function getRandomIndex() {
  console.log(darkColorsArr[Math.floor(darkColorsArr.length * Math.random())])
}

// User Editable Region

Your browser information:

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

Challenge Information:

Learn Basic Debugging by Building a Random Background Color Changer - Step 3

10

Why did you add darkColorsArr[...] to this line?

12 
const darkColorsArr = [
  "#2C3E50",
  "#34495E",
  "#2C2C2C",
  "#616A6B",
  "#4A235A",
  "#2F4F4F",
  "#0E4B5A",
  "#36454F",
  "#2C3E50",
  "#800020",
];
function getRandomIndex() {
  console.log( Math.random())
}
getRandomIndex();
13

Ok, you forgot to answer my question.

Now you deleted a ton of the code that was there originally. Why?

14

Look at the hint you are given:

You should round darkColorsArr.length * Math.random() down to the nearest whole number.

1 Like
15

how tho i have tried everything by googling but nothing is working

16

What did you google? I searched for “js round down” and the first result was useful.

Please show what you tried?

17

You found the correct function to use, just apply it to the expression that the hint asks you to.

1 Like
18

i searched it up on stackoverflow

19

stackoverflow tends to not have infos on specific methods or functions, it’s more focused on more complex or abstract problems. Use google, or JavaScript documentation like MDN or devdocs.io to search for a specific method

20

You are only asked to log out the floored number. You should not access the array using the number inside that function.

If you look at the name of the function, its return value is implied. As such, its call would be used to get the index for array access and the access would not happen inside the function. Otherwise, the function would be named something like getRandomColor and not getRandomIndex.

21 
const darkColorsArr = [
  "#2C3E50",
  "#34495E",
  "#2C2C2C",
  "#616A6B",
  "#4A235A",
  "#2F4F4F",
  "#0E4B5A",
  "#36454F",
  "#2C3E50",
  "#800020",
];
function getRandomIndex() {
  const randomIndex = Math.floor*(darkColorsArr.length *Math.random());
  console.log(Math,floor); 
}