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

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

References

requiredRende obbligatorio un campo di input
srcIndica la provenienza di una risorsa esterna (tramite URL).
<div>Crea contenitori generici o sezioni in una pagina
methodDetermina il metodo di invio dei dati di un form al server
<h2>Titolo di intestazione di secondo livello
sizeDetermina le dimensioni dell'elemento in base al valore contenuto

Users

Log in to search for users

Explore

Find inspiration

VIVIANARICETTARIO

\\\"Il Razzismo - Un Tema Importa(2)

meraviglieItalia

basic structure

Orologio Analitico

Il mio primo sito(2)

Esercizio forse più giust

Navbar Example 5

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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();
});