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

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

References

disabledImpedisce la modifica di un input
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<head>Tag primario di un documento HTML
<aside>Definisce un contenuto separato dal testo perincipale
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<input>Definisce un area di input per l'invio di dati e informazioni

Users

Log in to search for users

Explore

Find inspiration

VERIFICA RANZI LEONARDO

Indovna il numero

Bootstrap Basics

Geyser NEW 25 Litri

Esercizio 2 JS Bootstrap e jQuery

Primo esercizio in classe

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