Faça a depuração do modificador de cor de fundo aleatório

Instruções

Faça a depuração do modificador de cor de fundo aleatório

O Camperbot está aprendendo JavaScript e tentou criar seu próprio modificador de cor de fundo aleatório. Entretanto, ele cometeu alguns erros ao longo do caminho. Objetivo: Cumprir as histórias de usuário abaixo e fazer com que todos os testes passem para que o laboratório funcione corretamente. Histórias de Usuário: 1. Você deve corrigir os erros de sintaxe no array darkColorsArr. 1. Você deve corrigir o ReferenceError lançado quando o objeto math é referenciado dentro da função getRandomIndex. 1. Você deve arredondar para baixo o randomIndex para o número inteiro mais próximo. 1. Você deve atualizar o valor da variável body para que use o nome de método correto e corrigir o TypeError relacionado. 1. Você deve corrigir o bgHexCodeSpanElement para que ele selecione corretamente o elemento com o id de bg-hex-code. 1. Você deve modificar a variável color dentro de changeBackgroundColor para que ela seja definida como uma cor aleatória do array darkColorsArr. 1. Você deve atualizar a variável btn para que ela aponte para o elemento botão. Abra o arquivo index.html para ver o nome correto do id desse elemento botão. 1. Você deve corrigir a linha que adiciona um ouvinte de eventos para o evento de click no btn passando uma referência para a função changeBackgroundColor ao método. 1. O fundo deve mudar aleatoriamente para uma das cores em darkColorsArr cada vez que o #btn for clicado.

O que fazer:

Testes:

Você deve resolver os erros de sintaxe no array `darkColorsArr`. Lembre-se de que os elementos do array devem ser separados por vírgulas.
Você deve corrigir o erro de capitalização na linha `math.random()`.
Você deve arredondar para baixo `darkColorsArr.length * Math.random()` para o número inteiro mais próximo.
Você deve atualizar o valor da variável `body` para que `queryselector` use camel case.
Você deve corrigir `"bg-hex-code"` para que ele referencie corretamente o `id` de `bg-hex-code`. Lembre-se de que os seletores de `id` em CSS começam com um símbolo de hashtag (`#`).
Você deve chamar a função `getRandomIndex` dentro da linha `darkColorsArr[getRandomIndex]`.
Você deve corrigir o nome do `id` da linha `"#click-btn"` para que coincida com o nome de `id` correto no arquivo `index.html`.
Você não deve chamar a função `changeBackgroundColor`. Em vez disso, você deve passar a referência da função para o método `addEventListener`.

<!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>

*,
*::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);
}

const darkColorsArr = [
    "#2C3E50",
    "#34495E",
    "#2C2C2C"
    "#616A6B"
    "#4A235A"
    "#2F4F4F",
    "#0E4B5A",
    "#36454F",
    "#2C3E50",
    "#800020",
  ];
  
  function getRandomIndex() {
    const randomIndex = darkColorsArr.length * math.random();
    return randomIndex;
  }
  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());

Preview