Random Background Color Changer

The Project

Web application to randomly change background color, developed as a debugging exercise. A project that made me feel more confident in my acquired JavaScript skills.

Source Code

index.html
styles.css
script.js

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

*,
*::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 = Math.floor(darkColorsArr.length * Math.random());
  return randomIndex;
}

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.onclick = changeBackgroundColor;
</script>

The Debugging Experience

There isn't much to say, it was a very short project that I absolutely loved doing.

I don't know if it was designed to be so simple on purpose or if I found it simple myself, because most of the time I read the instructions after I had already solved the bugs.

That aside, it reinforced once again the concepts I've learned so far in JavaScript and that's what matters! 💪

The Bugs Resolved

I identified and corrected 6 main errors in CamperBot's code:

1. Array Syntax Error:

// ❌ Bug: missing commas
const darkColorsArr = [
  "#2C3E50"
  "#34495E"  // SyntaxError
];

// ✅ Fixed: commas added
const darkColorsArr = [
  "#2C3E50",
  "#34495E",
];

2. Case Sensitivity - Math Object:

// ❌ Bug: math instead of Math
const randomIndex = math.random();  // ReferenceError

// ✅ Fixed: Math capitalized
const randomIndex = Math.random();

3. Inverted Random Formula:

// ❌ Bug: wrong operation order
Math.floor(darkColorsArr.length * math.random());

// ✅ Fixed: correct order
Math.floor(Math.random() * darkColorsArr.length);

4. Case Sensitivity - querySelector:

// ❌ Bug: queryselector lowercase
document.queryselector("body");  // TypeError

// ✅ Fixed: querySelector correct
document.querySelector("body");

5. ID Selector Without #:

// ❌ Bug: missing # for ID
document.querySelector("bg-hex-code");  // null

// ✅ Fixed: # added
document.querySelector("#bg-hex-code");

6. Function Not Called:

// ❌ Bug: missing parentheses
const color = darkColorsArr[getRandomIndex];  // undefined

// ✅ Fixed: parentheses added
const color = darkColorsArr[getRandomIndex()];

What I Learned

Debugging Skills:

Case sensitivity - JavaScript distinguishes upper/lowercase
Precise syntax - commas in arrays, parentheses in calls
CSS selectors - # for IDs, . for classes
Console.log debugging to verify values step by step

JavaScript Concepts Reinforcement:

Array manipulation and index access
Math object and random/floor methods
DOM manipulation with querySelector
Event handling with onclick
Function calls vs function references

Reflection

This project confirmed that I'm assimilating JavaScript fundamentals well. The fact that I solved many bugs intuitively before reading the instructions gives me confidence in my progress.

The most common bugs (case sensitivity, missing syntax, wrong selectors) are exactly the type of errors every developer learns to recognize quickly with experience.

Next Project: Learn Form Validation by Building a Calorie Counter

The Project​

Source Code​

The Debugging Experience​

The Bugs Resolved​

What I Learned​

Reflection​