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

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

References

<tfoot>Definisce il footer o sezione inferiore di una tabella.
<h4>Titolo di intestazione di quarto livello
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
valueValore alfanumerico o booleano contenuto in un elemento
minlengthDetermina il numero minimo di caratteri per un elemento input

Users

Log in to search for users

Explore

Find inspiration

riepilogativo 2

Alice nel Paese delle Meraviglie

I Nostri Servizi

Personal Portfolio

esercizio gatto

Il Labirinto di Teseo

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