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

text/plainDefinisce un metodo di non codifica dei valori di un form
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<h6>Titolo di intestazione di sesto livello
<td>Definisce una cella di una tabella HTML.
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
<input>Definisce un area di input per l'invio di dati e informazioni

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Estratti di mitologie greche

effect6 bouncing

Esercitazione n. 1(2)

ciao io sono sara

Quiz ristrutturazione

copia dicountdownfineanno

tabella html(2)

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