Random Background Color Changer

Il Progetto

Applicazione web per cambiare casualmente il colore di sfondo, sviluppata come esercizio di debugging. Un progetto che mi ha fatto sentire più sicuro delle competenze JavaScript acquisite.

Codice Sorgente

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>

L’esperienza di Debugging

C’è poco da dire: è stato un progetto molto breve che ho adorato fare.

Non so se fosse stato progettato apposta per essere così semplice o se l’ho trovato semplice io, fatto sta che per la maggior parte del tempo leggevo le istruzioni dopo aver già risolto i bug.

Detto questo, ha rafforzato ancora una volta i concetti di JavaScript che ho imparato finora, ed è questo ciò che conta! 💪

I Bug Risolti

Ho individuato e corretto 6 errori principali nel codice di CamperBot:

1. Errore di sintassi negli array:

// ❌ Bug: mancano le virgole
const darkColorsArr = [
  "#2C3E50"
  "#34495E"  // SyntaxError
];

// ✅ Fix: virgole aggiunte
const darkColorsArr = [
  "#2C3E50",
  "#34495E",
];

2. Case sensitivity – oggetto Math:

// ❌ Bug: math invece di Math
const randomIndex = math.random();  // ReferenceError

// ✅ Fix: Math con la maiuscola
const randomIndex = Math.random();

3. Formula random invertita:

// ❌ Bug: ordine delle operazioni errato
Math.floor(darkColorsArr.length * math.random());

// ✅ Fix: ordine corretto
Math.floor(Math.random() * darkColorsArr.length);

4. Case sensitivity – querySelector:

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

// ✅ Fix: querySelector corretto
document.querySelector("body");

5. Selettore ID senza #:

// ❌ Bug: manca # per l’ID
document.querySelector("bg-hex-code");  // null

// ✅ Fix: # aggiunto
document.querySelector("#bg-hex-code");

6. Funzione non invocata:

// ❌ Bug: mancano le parentesi
const color = darkColorsArr[getRandomIndex];  // undefined

// ✅ Fix: parentesi aggiunte
const color = darkColorsArr[getRandomIndex()];

Cosa Ho Imparato

Competenze di Debugging:

Case sensitivity – JavaScript distingue tra maiuscole e minuscole
Sintassi precisa – virgole negli array, parentesi nelle chiamate
Selettori CSS – # per gli ID, . per le classi
Debug con console.log per verificare i valori passo dopo passo

Rafforzamento dei concetti JavaScript:

Manipolazione degli array e accesso tramite indice
Oggetto Math e metodi random/floor
DOM manipulation con querySelector
Event handling con onclick
Chiamata di funzioni vs riferimento a funzioni

Riflessione

Questo progetto ha confermato che sto assimilando bene i fondamenti di JavaScript. Il fatto di aver risolto molti bug in modo intuitivo prima ancora di leggere le istruzioni mi dà molta fiducia nei miei progressi.

I bug più comuni (case sensitivity, errori di sintassi, selettori sbagliati) sono esattamente il tipo di problemi che ogni sviluppatore impara a riconoscere velocemente con l’esperienza.

Prossimo Progetto: Imparare la Form Validation costruendo un Calorie Counter

Il Progetto​

Codice Sorgente​

L’esperienza di Debugging​

I Bug Risolti​

Cosa Ho Imparato​

Riflessione​