Pizzafy - Calcolatore di Pizza by @lion-h - Codewith.it

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

References

widthImposta la larghezza di un elemento HTML
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<th>Definisce una cella di intestazione di una tabella HTML.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<div>Crea contenitori generici o sezioni in una pagina
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)

Users

Log in to search for users

Explore

Find inspiration

Il museo di Leonardo

test1 pagina principale

Due Sezioni - 4 colori (2x2)

ESERCITAZIONE ORSI

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pizzafy - Calcolatore di Pizza</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Pizzafy</h1>
        <p>Preparare la pizza perfetta non è mai stato così facile!</p>
    </header>

    <main>
        <form id="pizza-form">
            <label for="num-panetti">Numero di panetti:</label>
            <input type="number" id="num-panetti" min="1" required>

            <label for="peso-panetto">Peso di ogni panetto (g):</label>
            <input type="number" id="peso-panetto" min="1" required>

            <label for="idratazione">Idratazione dell'impasto (%):</label>
            <input type="number" id="idratazione" min="50" max="100" required>

            <label for="lievitazione-totale">Ore di lievitazione totale:</label>
            <input type="number" id="lievitazione-totale" min="1">

            <label for="lievitazione-frigo">Ore di lievitazione in frigo:</label>
            <input type="number" id="lievitazione-frigo" min="0">

            <label for="temperatura-ambiente">Temperatura ambiente (°C):</label>
            <input type="number" id="temperatura-ambiente" min="0">

            <button type="button" onclick="calcolaIngredienti()">Calcola</button>
            <button type="button" onclick="caricaDati()">Carica dati salvati</button>
        </form>

        <div id="risultati">
            <h2>Risultati:</h2>
            <p>Farina: <span id="farina"></span> g</p>
            <p>Acqua: <span id="acqua"></span> ml</p>
            <p>Lievito: <span id="lievito"></span> g</p>
            <p>Sale: <span id="sale"></span> g</p>
        </div>

        <div id="risultati-storico">
            <h2>Storico dei dati salvati:</h2>
        </div>
    </main>

    <footer>
        <p>&copy; Salvatore Crapanzano</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #fdf8e4;
    color: #333;
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
    background-color: #ff8c00;
    color: #fff;
    padding: 1.5rem 0;
}

main {
    padding: 2rem;
    max-width: 600px;
    margin: auto;
}

form {
    display: grid;
    gap: 1rem;
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    background-color: #ff8c00;
    color: #fff;
    padding: 0.8rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: #e07a00;
}

#risultati, #risultati-storico {
    margin-top: 2rem;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.record {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

function calcolaIngredienti() {
    const numPanetti = parseFloat(document.getElementById('num-panetti').value);
    const pesoPanetto = parseFloat(document.getElementById('peso-panetto').value);
    const idratazione = parseFloat(document.getElementById('idratazione').value);

    const totalFlour = numPanetti * pesoPanetto / (1 + idratazione / 100);
    const totalWater = totalFlour * (idratazione / 100);
    const totalSalt = totalFlour / 1000 * 30;
    const totalYeast = totalFlour * 0.01; // Calcolo del lievito di esempio.

    document.getElementById('farina').textContent = Math.round(totalFlour);
    document.getElementById('acqua').textContent = Math.round(totalWater);
    document.getElementById('sale').textContent = Math.round(totalSalt);
    document.getElementById('lievito').textContent = Math.round(totalYeast);

    salvaDati(numPanetti, pesoPanetto, idratazione, totalFlour, totalWater, totalSalt, totalYeast);
}

function salvaDati(numPanetti, pesoPanetto, idratazione, farina, acqua, sale, lievito) {
    const dati = {
        numPanetti,
        pesoPanetto,
        idratazione,
        farina: Math.round(farina),
        acqua: Math.round(acqua),
        sale: Math.round(sale),
        lievito: Math.round(lievito),
        data: new Date().toLocaleString()
    };

    let storico = JSON.parse(localStorage.getItem('storicoPizze')) || [];
    storico.push(dati);
    localStorage.setItem('storicoPizze', JSON.stringify(storico));
    alert("Dati salvati con successo!");
}

function caricaDati() {
    const storico = JSON.parse(localStorage.getItem('storicoPizze')) || [];
    const risultatiContainer = document.getElementById('risultati-storico');
    risultatiContainer.innerHTML = '';

    if (storico.length === 0) {
        risultatiContainer.innerHTML = '<p>Nessun dato salvato!</p>';
        return;
    }

    storico.forEach((record, index) => {
        const div = document.createElement('div');
        div.className = 'record';
        div.innerHTML = `
            <h3>Salvataggio #${index + 1} (${record.data})</h3>
            <p>Panetti: ${record.numPanetti}, Peso panetto: ${record.pesoPanetto}g, Idratazione: ${record.idratazione}%</p>
            <p>Farina: ${record.farina}g, Acqua: ${record.acqua}ml, Sale: ${record.sale}g, Lievito: ${record.lievito}g</p>
        `;
        risultatiContainer.appendChild(div);
    });
}