Donazioni per il compleanno di Emm by @devil86sc - Codewith.it

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

Referenze

formenctypeDefinisce il tipo di codifica dei dati di un elemento input
text/plainDefinisce un metodo di non codifica dei valori di un form
<em>Formatta il testo in corsivo/italico enfatizzato
<td>Definisce una cella di una tabella HTML.
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
<iframe>Crea un frame all'interno di una pagina HTML.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

GreenBox - Giardinaggio a casa tua

Prova qualsiasi

Esercizio tabella

Esercizi 05/03/2024 es8

servizio_fiscale.html

esercitazione 5

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="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Donazioni per il compleanno di Emma Bucci</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Donazioni per il compleanno di Emma Bucci</h1>
    <img src="minnie_mouse.jpg" alt="Minnie Mouse" class="minnie-image">
    <div id="buttons">
      <button class="donate-button" onclick="donate(50)">50€</button>
      <button class="donate-button" onclick="donate(10)">10€</button>
      <button class="donate-button" onclick="donate(150)">150€</button>
      <button class="donate-button" onclick="donate(200)">200€</button>
      <button class="donate-button" onclick="donate(300)">300€</button>
      <button class="donate-button" onclick="donate(400)">400€</button>
      <button class="donate-button" onclick="donate(500)">500€</button>
      <button class="donate-button" onclick="donate(700)">700€</button>
      <button class="donate-button" onclick="donate(1000)">1000€</button>
      <button class="donate-button" onclick="donate(1500)">1500€</button>
    </div>
    <button class="undo-button" onclick="undoLastDonation()">Annulla ultima donazione</button>
    <ul id="donation-list"></ul>
    <table id="donation-table">
      <thead>
        <tr>
          <th>Donazione</th>
        </tr>
      </thead>
      <tbody id="donation-table-body">
      </tbody>
      <tfoot>
        <tr>
          <td>Totale: <span id="total-amount">0</span>€</td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script src="script.js"></script>
</body>
</html>

body {
  background-color: black;
  color: white;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  margin-top: 30px;
}

.minnie-image {
  width: 300px;
  margin: 20px auto;
}

#buttons {
  margin-bottom: 20px;
}

.donate-button {
  background-color: fuchsia;
  color: white;
  padding: 10px 20px;
  margin: 5px;
  border: none;
  cursor: pointer;
}

.undo-button {
  background-color: yellow;
  color: black;
  padding: 10px 20px;
  margin: 5px;
  border: none;
  cursor: pointer;
}

table {
  margin: 0 auto;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

tfoot td {
  font-weight: bold;
}

let totalAmount = 0;
let donations = [];

function donate(amount) {
  totalAmount += amount;
  donations.push(amount);
  updateList();
  updateTable();
  updateTotal();
}

function undoLastDonation() {
  if (donations.length === 0) return;
  const lastDonation = donations.pop();
  totalAmount -= lastDonation;
  updateList();
  updateTable();
  updateTotal();
}

function updateList() {
  const list = document.getElementById("donation-list");
  list.innerHTML = "";
  donations.forEach(amount => {
    const listItem = document.createElement("li");
    listItem.textContent = amount + "€";
    list.appendChild(listItem);
  });
}

function updateTable() {
  const tableBody = document.getElementById("donation-table-body");
  tableBody.innerHTML = "";
  donations.forEach(amount => {
    const row = tableBody.insertRow(-1);
    const cell = row.insertCell(0);
    cell.textContent = amount + "€";
  });
}

function updateTotal() {
  document.getElementById("total-amount").textContent = totalAmount;
}