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

formmethodDefinisce il metodo di invio dei dati oltre a method
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<q>Indica una parte di testo come citazione breve

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

Fotogallery SEMI al FUTURO

Round+ - social bar

spotify dashboard

GEMELLAGGIO IN DEUTSCHLAND

Home Page di Cristian Moraru\\

Obiettivi futuri.html

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