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

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

Referenze

srcIndica la provenienza di una risorsa esterna (tramite URL).
<br>Inserisce uno spazio vuoto tra due elementi HTML.
Inserisce un commento nel codice
idIdentifica univocamente un elemento HTML
<h2>Titolo di intestazione di secondo livello
postDefinisce un metodo di invio di dati al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Review of Functions I

tabella mio esame

Tagliaerba Automatico Ecovacs GOAT

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