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

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

References

methodDetermina il metodo di invio dei dati di un form al server
<div>Crea contenitori generici o sezioni in una pagina
hreflangConsente di dichiarare la lingua del documento collegato.
<ol>Crea liste ordinate o numerate.
relServe a definire la relazione tra il documento e una risorsa.
selectedPre-seleziona un elemento di input

Users

Log in to search for users

Explore

Find inspiration

pagina prova sara

Con nome bandiera(2)

informatica 13/10

Scuola G.Galilei.html

Twitchpage1confirm

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