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

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

Referenze

<caption>Definisce didascalie all'interno di una tabella
<select>Usato per creare un menu a tendina.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
<br>Inserisce uno spazio vuoto tra due elementi HTML.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

primo esercizio 26 gennaio

Cambia colore testo JS

Lezione 4 (seconda parte)

Prova javascript

Esercitazione n. 2

Review of Functions I

Review of Functions I

INFORMATICA - ESERCIZIO 1 RISOLTO

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