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

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

References

checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
maxImposta il valore numerico o temporale massimo per un elemento input
langSpecifica la lingua del contenuto di un elemento
<h4>Titolo di intestazione di quarto livello
<textarea>Area di testo libero espandibile per form HTML
<a>Inserisce link e collegamenti ipertestuali

Users

Log in to search for users

Explore

Find inspiration

ximena sanchez JavaScript animati

Template Bootstrap(2)

voxel characters generator

esercizio 04 pagina beep

99 Bottles of Beer

Lola Harrel 3rd Hour 12/4/20

Review of Functions I

Heads Or Tails Random Tally

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