Tracker dei km fatti by @lion-h - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<aside>Definisce un contenuto separato dal testo perincipale
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
maxImposta il valore numerico o temporale massimo per un elemento input
_parentApre collegamenti ipertestuali nell'elemento genitore
<map>Inserisce immagini mappa cliccabili in un documento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Random Tally

Blocco visualizzazione PC

Esercizi 05/03/2024 es4

VERDERAME | Serra e Orto Botanico

Obiettivi futuri.html

Inserimento immagini in un testo

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html>
  <head></head>

  <body>
    <div class="container">
      <div class="header">
        <h1>Tracker dei km fatti</h1>
        <p>Monitora lo svolgimento delle tue attività</p>
      </div>

      <div class="display">
        <span id="counter">0</span>
        <p id="message"></p>
      </div>

      <div class="button">
        <button id="increase">+</button>
        <button id="decrease">-</button>
        <button id="reset">Reset</button>
      </div>
    </div>
  </body>
</html>

body {
  text-align: center;
  font-family: calibri;
}

h1 {
  padding-top: 20px;
  color: red;
}

.container {
  width: 350px;
  height: 300px;
  margin: auto;
  background-color: lightgreen;
  border-radius: 20px;
  box-shadow: 20px 20px 25px grey;
}

#counter {
  font-size: 40px;
  color: blue;
  font-weight: bold;
}

#increase, #decrease {
  width: 50px;
}

#reset {
  width: 120px;
}

button {
  height: 40px;
  font-size: 20px;
  font-weight: bold;
  background-color: brown;
  color: white;
  border-radius: 5px;
}

button:hover {
  background-color: rgb(112, 26, 26);
}

const messageDisplay = document.getElementById('message');
const increaseButton = document.getElementById('increase');
const decreaseButton = document.getElementById('decrease');
const resetButton = document.getElementById('reset');
const counterDisplay = document.getElementById('counter');

let counter = 0;

function updateDisplay() {
  counterDisplay.textContent = counter;
  if (counter == 0) {
    messageDisplay.textContent = "Inizia a fare un'attività";
  } else if (counter > 3) {
    messageDisplay.textContent = "Bravo, sei sulla buona strada";
  } else if (counter > 10) {
    messageDisplay.textContent = "Ottimo, hai fatto molte attività oggi!"
  } else {
    messageDisplay.textContent = "Non è possibile che tu abbia fatto meno di 0 attività";
  }
}

increaseButton.addEventListener('click', () => {
  counter += 100;
  updateDisplay();
});

decreaseButton.addEventListener('click', () => {
  counter -= 100;
  updateDisplay();
});

resetButton.addEventListener('click', () => {
  counter = 0;
  updateDisplay();
});