Tracker delle attività 2 by @lion-h - Codewith.it

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

Referenze

<i>Formatta il testo in corsivo/italico non enfatizzato
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
methodDetermina il metodo di invio dei dati di un form al server
placeholderDefinisce un testo segnaposto per un elemento input o textarea
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
heightDetermina l'altezza di un elemento HTML in pixel

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Random Tally

I beneficii di avere un cane

Roba info triangoli

Autoscuola Roma EUR Torrino Patent

Tabella Landing page

esercitazione 1

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 lang="it">
  <head>
    <meta charset="UTF-8">
    <title>Tracker delle attività</title>
  </head>

  <body>
    <div class="container">
      <h1>Tracker delle Attività Giornaliero</h1>
      <p>Monitora il tuo peogresso giornaliero completando le attività!</p>

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

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

body {
  margin-top: 30px;
  padding: 20px;
}

.container {
  text-align: center;
  width: 500px;
  margin: auto;
  box-shadow: 20px 20px 30px rgb(114, 114, 114);
  border-radius: 30px;
  padding: 20px;
  background-color: rgb(116, 255, 128);
}

button {
  background-color: burlywood;
  padding: 10px;
  border-radius: 5px;
  border: none;
  font-weight: bold;
  font-size: 18px;
  box-shadow: 2px 2px 5px rgb(69, 69, 69);
  margin: 5px;
}

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

#reset {
  width: 100px;
}

#counter {
  font-size: 50px;
  font-weight: bold;
  color: red;
}

button:hover {
  background-color: red;
}

.display {
  width: 150px;
  margin: auto;
  background-color: gold;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px;
}

.buttons {
  margin-top: 20px;;
}

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

let counter = 0;

function updateDisplay() {
  counterDisplay.textContent = counter;
  if (counter === 0) {
    messageDisplay.textContent = "Forza, sei ancora a 0.";
  } else if (counter > 0 && counter <= 3) {
    messageDisplay.textContent = "Stai migliorando, manca poco";
  } else if (counter > 3) {
    messageDisplay.textContent = "Ottimo!";
  } else {
    messageDisplay.textContent = "Caspita, è impossibile che tu abbia inserito un valore negativo";
  }
}

increaseButton.addEventListener('click', function () {
  counter++;
  updateDisplay();
});

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

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