Supermercato no by @garghy64 - Codewith.it

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

Referenze

<select>Usato per creare un menu a tendina.
<ol>Crea liste ordinate o numerate.
<td>Definisce una cella di una tabella HTML.
animationDefinisce i parametri dell'animazione di un elemento o selettore
<table>Tag primario per la creazione di tabelle
_topApre collegamenti ipertestuali nell'elemento parent assoluto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads and Tails

Casetta NEWTON+

JS Strutture dati e funzioni es1

benvenuti nella mia scuola

congettura collatz

Heads Or Tails Random Tally

Navbar Example 2

HOTEL STELLA MARIS

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>Supermercato</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Supermercato</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#prodotti">Prodotti</a></li>
                <li><a href="#contatti">Contatti</a></li>
                <li><a href="#feedback">Feedback</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Benvenuti a SuperMarket Plus</h2>
            <h3>Chi siamo</h3>
            <p>SuperMarket Plus è più di un semplice supermercato. Siamo il vostro partner di fiducia per una spesa quotidiana conveniente, di alta qualità e sostenibile. Dal 1990, abbiamo servito la nostra comunità con passione, innovazione e un impegno costante verso la qualità.</p>
            <h3>La nostra missione</h3>
            <p>La nostra missione è offrire ai nostri clienti prodotti freschi, sani e di alta qualità a prezzi accessibili. Ci impegniamo a creare un'esperienza di acquisto piacevole e senza stress, mettendo sempre al primo posto le esigenze dei nostri clienti.</p>
            <h3> La nostra Community</h3>
            <p> Plus è al centro della comunità. Organizziamo eventi locali, degustazioni di prodotti, corsi di cucina e molto altro. Partecipiamo attivamente a programmi di beneficenza per sostenere chi è in difficoltà.</p>
        </section>
        <section id="prodotti">
            <h2>I Nostri Prodotti</h2>
            <div class="product">
                <img src="https://d2j6dbq0eux0bg.cloudfront.net/images/73689327/4337941451.png" alt="Mela">
                <h3>Mela</h3>
                <p>Descrizione: Una mela fresca e croccante.</p>
                <p>Prezzo: €1,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product">
                <img src="https://www.biobottega.com/media/catalog/product/cache/81cdebfeec0161cbb13a51aa3183b56e/b/i/biobottega-banane.jpg" alt="Banana">
                <h3>Banana</h3>
                <p>Descrizione: Banana matura e dolce.</p>
                <p>Prezzo: €1,50</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product">
                <img src="https://www.gelcosurgelati.it/wp-content/uploads/2022/05/pane-e-affini-1-copy-1.png" alt="Pane">
                <h3>Pane</h3>
                <p>Descrizione: Pane fresco da forno.</p>
                <p>Prezzo: €2,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product">
                <img src="https://sicalb.it/cdn/shop/products/ferruzzi-uova-confezioni-OPEN-XL-gabbia_1200x1200.jpg?v=1604239451" alt="Uova">
                <h3>Uova</h3>
                <p>Descrizione: Confezione di 12 uova biologiche.</p>
                <p>Prezzo: €3,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product" id="latte-product">
                <img id="latte-img" src="path/to/latte1.jpg" alt="Latte">
                <h3 id="latte-title">Latte Marca 1</h3>
                <p id="latte-desc">Descrizione: Latte fresco intero di Marca 1.</p>
                <p id="latte-prezzo">Prezzo: €1,20</p>
                <label for="latte-brand">Marca:</label>
                <select id="latte-brand" name="brand">
                  <div class="select-container">
                    <option value="marca1">Marca 1</option>
                    <option value="marca2">Marca 2</option>
                    <option value="marca3">Marca 3</option>
                  </div>
                </select>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product" id="pasta-product">
                <img id="pasta-img" src="path/to/pasta-penne-marca1.jpg" alt="Pasta">
                <h3 id="pasta-title">Penne Marca 1</h3>
                <p id="pasta-desc">Descrizione: Penne di grano duro Marca 1.</p>
                <p id="pasta-prezzo">Prezzo: €1,50</p>
                <label for="tipo-pasta">Tipo di Pasta:</label>
                <select id="tipo-pasta" name="tipo-pasta">
                  <div class="select-container">
                    <option value="penne">Penne</option>
                    <option value="spaghetti">Spaghetti</option>
                    <option value="fusilli">Fusilli</option>
                    <option value="rigatoni">Rigatoni</option>
                  </div>
                </select>
                <label for="pasta-brand">Marca:</label>
                <select id="pasta-brand" name="brand">
                  <div class="select-container">
                    <option value="marca1">Marca 1</option>
                    <option value="marca2">Marca 2</option>
                    <option value="marca3">Marca 3</option>
                  </div>
                </select>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product" id="biscotti-product"> 
              <img id="biscotti-img" src="path/to/biscotti-cioccolato-marca1.jpg" alt="Biscotti"> 
              <h3 id="biscotti-title">Biscotti al Cioccolato Marca 1</h3> 
              <p id="biscotti-desc">Descrizione: Biscotti croccanti al cioccolato Marca 1.</p> 
              <p id="biscotti-prezzo">Prezzo: €2,50</p> 
              <label for="tipo-biscotti">Tipo di Biscotti:</label> 
              <select id="tipo-biscotti" name="tipo-biscotti">
                <div class="select-container"> 
                  <option value="cioccolato">Cioccolato</option> 
                  <option value="vaniglia">Vaniglia</option> 
                  <option value="frollini">Frollini</option> 
                </div>
              </select> 
              <label for="biscotti-brand">Marca:</label> 
              <select id="biscotti-brand" name="brand"> 
                <div class="select-container">
                  <option value="marca1">Marca 1</option> 
                  <option value="marca2">Marca 2</option> 
                  <option value="marca3">Marca 3</option>
                </div> 
              </select> 
              <button>Aggiungi al carrello</button> 
            </div>
            <div class="product">
                <img src="path/to/succo.jpg" alt="Succo di frutta">
                <h3>Succo di frutta</h3>
                <p>Descrizione: Succo di frutta 100% naturale.</p>
                <p>Prezzo: €3,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product">
                <img src="path/to/riso.jpg" alt="Riso">
                <h3>Riso</h3>
                <p>Descrizione: Riso integrale biologico.</p>
                <p>Prezzo: €2,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product"> 
              <img src="path/to/pollo.jpg" alt="Pollo"> 
              <h3>Pollo</h3> 
              <p>Descrizione: Pollo fresco biologico.</p> 
              <p>Prezzo: €5,00</p> 
              <button>Aggiungi al carrello</button> 
            </div> 
            <div class="product"> 
              <img src="path/to/tonno.jpg" alt="Tonno"> 
              <h3>Tonno</h3> 
              <p>Descrizione: Tonno al naturale in scatola.</p> 
              <p>Prezzo: €1,80</p> 
              <button>Aggiungi al carrello</button> 
              </div> 
              <div class="product"> 
                <img src="path/to/acqua.jpg" alt="Acqua Minerale"> 
                <h3>Acqua Minerale</h3> 
                <p>Descrizione: Acqua minerale naturale.</p> 
                <p>Prezzo: €0,50</p> 
                <button>Aggiungi al carrello</button> 
              </div>
              <div class="product"> 
                <img src="path/to/elettrodomestico.jpg" alt="Elettrodomestico"> 
                <h3>Elettrodomestico</h3> 
                <p>Descrizione: Piccolo elettrodomestico per la cucina.</p> 
                <p>Prezzo: €30,00</p> 
                <button>Aggiungi al carrello</button> 
              </div> 
              <div class="product"> 
                <img src="path/to/abbigliamento.jpg" alt="Abbigliamento"> 
                <h3>Abbigliamento</h3> 
                <p>Descrizione: Vestiti alla moda per tutta la famiglia.</p> 
                <p>Prezzo: €25,00</p> 
                <button>Aggiungi al carrello</button> 
              </div> 
              <div class="product"> 
                <img src="path/to/giocattolo.jpg" alt="Giocattolo"> 
                <h3>Giocattolo</h3> 
                <p>Descrizione: Giocattolo educativo per bambini.</p> 
                <p>Prezzo: €15,00</p> 
                <button>Aggiungi al carrello</button> 
              </div>
              <div class="product"> 
                <img src="path/to/confezione-olio.jpg" alt="Confezione Olio"> 
                <h3>Confezione Olio di Oliva</h3> 
                <p>Descrizione: Confezione da 5 litri di olio di oliva extra vergine.</p> 
                <p>Prezzo: €20,00</p> 
                <button>Aggiungi al carrello</button> 
              </div>
            <!-- Aggiungi altri prodotti qui -->
        </section>
        <section id="feedback">
            <h2>Lascia il tuo Feedback</h2>
            <form id="feedback-form">
                <label for="name">Nome:</label>
                <input type="text" id="name" name="name" required>
                <label for="comment">Commento:</label>
                <textarea id="comment" name="comment" required></textarea>
                <button type="submit">Invia</button>
            </form>
            <div id="feedback-list">
                <h3>Commenti dei Clienti</h3>
                <ul>
                    <!-- I feedback verranno aggiunti qui -->
                </ul>
            </div>
        </section>
    </main>
    <footer>
        <section id="contatti">Telefono: +39 06 1234 5678<br>
          Email: info@supermarketplus.it
          <h4>Indirizzi e Orari di Apertura</h4>
          Sede Centrale: Via Roma, 123, 00100 Roma, Italia.
          Orari di Apertura: Lunedì - Sabato: 08:00 - 21:00, Domenica: 09:00 - 20:00.<br><br>
          &copy; 2024 Supermercato. Tutti i diritti riservati.
          </section>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 1rem;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 2rem;
}

.product {
    border: 1px solid #ddd;
    padding: 1rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product img {
    max-width: 50%;
    height: auto;
    margin-bottom: 1rem;
}

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

#feedback {
    margin-top: 2rem;
}

#feedback-form {
    margin-bottom: 2rem;
}

#feedback-form label, #feedback-form input, #feedback-form textarea {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}

#feedback-list ul {
    list-style-type: none;
    padding: 0;
}

#feedback-list ul li {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 1rem;
}

/* Stile base del selettore */
.select-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
  border: 2px solid #3498db;
  border-radius: 8px;
  background-color: #f7f7f7;
  font-family: 'Arial', sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Stile del dropdown */
.select-container select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  color: #333;
  appearance: none;
  cursor: pointer;
}

/* Icona del dropdown */
.select-container select:focus {
  outline: none;
  border-color: #2980b9;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Stile del menu aperto */
.select-container select option {
  padding: 10px;
  font-size: 16px;
}

.select-container::after {
  content: '▼';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  color: #666;
}

document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            alert('Prodotto aggiunto al carrello!');
        });
    });

    const feedbackForm = document.getElementById('feedback-form');
    const feedbackList = document.getElementById('feedback-list').querySelector('ul');

    feedbackForm.addEventListener('submit', function(event) {
        event.preventDefault();
        
        const name = document.getElementById('name').value;
        const comment = document.getElementById('comment').value;
        
        const feedbackItem = document.createElement('li');
        feedbackItem.innerHTML = `<strong>${name}</strong><p>${comment}</p>`;
        
        feedbackList.appendChild(feedbackItem);

        feedbackForm.reset();
    });

    // Gestione del prodotto latte
    const latteBrandSelect = document.getElementById('latte-brand');
    const latteImg = document.getElementById('latte-img');
    const latteTitle = document.getElementById('latte-title');
    const latteDesc = document.getElementById('latte-desc');
    const lattePrezzo = document.getElementById('latte-prezzo');

    const lattes = {
        marca1: {
            img: 'path/to/latte1.jpg',
            title: 'Latte Marca 1',
            desc: 'Descrizione: Latte fresco intero di Marca 1.',
            price: 'Prezzo: €1,20'
        },
        marca2: {
            img: 'path/to/latte2.jpg',
            title: 'Latte Marca 2',
            desc: 'Descrizione: Latte fresco intero di Marca 2.',
            price: 'Prezzo: €1,30'
        },
        marca3: {
            img: 'path/to/latte3.jpg',
            title: 'Latte Marca 3',
            desc: 'Descrizione: Latte fresco intero di Marca 3.',
            price: 'Prezzo: €1,40'
        }
    };

    latteBrandSelect.addEventListener('change', function() {
        const selectedBrand = latteBrandSelect.value;
        const latte = lattes[selectedBrand];

        latteImg.src = latte.img;
        latteTitle.textContent = latte.title;
        latteDesc.textContent = latte.desc;
        lattePrezzo.textContent = latte.price;
    });

    // Gestione del prodotto pasta
    const pastaSelect = document.getElementById('tipo-pasta');
    const pastaBrandSelect = document.getElementById('pasta-brand');
    const pastaImg = document.getElementById('pasta-img');
    const pastaTitle = document.getElementById('pasta-title');
    const pastaDesc = document.getElementById('pasta-desc');
    const pastaPrezzo = document.getElementById('pasta-prezzo');

    const pastas = {
        penne: {
            marca1: {
                img: 'path/to/pasta-penne-marca1.jpg',
                title: 'Penne Marca 1',
                desc: 'Descrizione: Penne di grano duro Marca 1.',
                price: 'Prezzo: €1,50'
            },
            marca2: {
                img: 'path/to/pasta-penne-marca2.jpg',
                title: 'Penne Marca 2',
                desc: 'Descrizione: Penne di grano duro Marca 2.',
                price: 'Prezzo: €1,60'
            },
            marca3: {
                img: 'path/to/pasta-penne-marca3.jpg',
                title: 'Penne Marca 3',
                desc: 'Descrizione: Penne di grano duro Marca 3.',
                price: 'Prezzo: €1,70'
            }
        },
        spaghetti: {
            marca1: {
                img: 'path/to/pasta-spaghetti-marca1.jpg',
                title: 'Spaghetti Marca 1',
                desc: 'Descrizione: Spaghetti di grano duro Marca 1.',
                price: 'Prezzo: €1,50'
            },
            marca2: {
                img: 'path/to/pasta-spaghetti-marca2.jpg',
                title: 'Spaghetti Marca 2',
                desc: 'Descrizione: Spaghetti di grano duro Marca 2.',
                price: 'Prezzo: €1,60'
            },
            marca3: {
                img: 'path/to/pasta-spaghetti-marca3.jpg',
                title: 'Spaghetti Marca 3',
                desc: 'Descrizione: Spaghetti di grano duro Marca 3.',
                price: 'Prezzo: €1,70'
            }
        },
        fusilli: {
            marca1: {
                img: 'path/to/pasta-fusilli-marca1.jpg',
                title: 'Fusilli Marca 1',
                desc: 'Descrizione: Fusilli di grano duro Marca 1.',
                price: 'Prezzo: €1,50'
            },
            marca2: {
                img: 'path/to/pasta-fusilli-marca2.jpg',
                title: 'Fusilli Marca 2',
                desc: 'Descrizione: Fusilli di grano duro Marca 2.',
                price: 'Prezzo: €1,60'
            },
            marca3: {
                img: 'path/to/pasta-fusilli-marca3.jpg',
                title: 'Fusilli Marca 3',
                desc: 'Descrizione: Fusilli di grano duro Marca 3.',
                price: 'Prezzo: €1,70'
            }
        },
        rigatoni: {
            marca1: {
                img: 'path/to/pasta-rigatoni-marca1.jpg',
                title: 'Rigatoni Marca 1',
                desc: 'Descrizione: Rigatoni di grano duro Marca 1.',
                price: 'Prezzo: €1,50'
            },
            marca2: {
                img: 'path/to/pasta-rigatoni-marca2.jpg',
                title: 'Rigatoni Marca 2',
                desc: 'Descrizione: Rigatoni di grano duro Marca 2.',
                price: 'Prezzo: €1,60'
            },
            marca3: {
                img: 'path/to/pasta-rigatoni-marca3.jpg',
                title: 'Rigatoni Marca 3',
                desc: 'Descrizione: Rigatoni di grano duro Marca 3.',
                price: 'Prezzo: €1,70'
            }
        }
    };

    function updatePastaDetails() {
        const selectedPasta = pastaSelect.value;
        const selectedBrand = pastaBrandSelect.value;
        const pasta = pastas[selectedPasta][selectedBrand];

        pastaImg.src = pasta.img;
        pastaTitle.textContent = pasta.title;
        pastaDesc.textContent = pasta.desc;
        pastaPrezzo.textContent = pasta.price;
    }

    pastaSelect.addEventListener('change', updatePastaDetails);
    pastaBrandSelect.addEventListener('change', updatePastaDetails);

    const biscottiSelect = document.getElementById('tipo-biscotti');
    const biscottiBrandSelect = document.getElementById('biscotti-brand'); 
    const biscottiImg = document.getElementById('biscotti-img'); 
    const biscottiTitle = document.getElementById('biscotti-title'); 
    const biscottiDesc = document.getElementById('biscotti-desc'); 
    const biscottiPrezzo = document.getElementById('biscotti-prezzo'); 
    const biscotti = { 
        cioccolato: { 
            marca1: { 
                img: 'path/to/biscotti-cioccolato-marca1.jpg', 
                title: 'Biscotti al Cioccolato Marca 1', 
                desc: 'Descrizione: Biscotti al cioccolato croccanti Marca 1.', 
                price: 'Prezzo: €2,50' 
            }, 
            marca2: { 
                img: 'path/to/biscotti-cioccolato-marca2.jpg', 
                title: 'Biscotti al Cioccolato Marca 2', 
                desc: 'Descrizione: Biscotti al cioccolato croccanti Marca 2.', 
                price: 'Prezzo: €2,60' 
            }, 
            marca3: { 
                img: 'path/to/biscotti-cioccolato-marca3.jpg', 
                title: 'Biscotti al Cioccolato Marca 3', 
                desc: 'Descrizione: Biscotti al cioccolato croccanti Marca 3.', 
                price: 'Prezzo: €2,70' 
            }, 
        } 
        vaniglia: { 
            marca1: { 
                img: 'path/to/biscotti-vaniglia-marca1.jpg', 
                title: 'Biscotti alla Vaniglia Marca 1', 
                desc: 'Descrizione: Biscotti alla vaniglia croccanti Marca 1.', 
                price: 'Prezzo: €2,50' 
            }, 
            marca2: { 
                img: 'path/to/biscotti-vaniglia-marca2.jpg', 
                title: 'Biscotti alla Vaniglia Marca 2', 
                desc: 'Descrizione: Biscotti alla vaniglia croccanti Marca 2.',
                price: 'Prezzo: €2,40'
            },
            marca3: { 
                img: 'path/to/biscotti-vaniglia-marca3.jpg', 
                title: 'Biscotti alla Vaniglia Marca 3', 
                desc: 'Descrizione: Biscotti alla vaniglia croccanti Marca 3.',
                price: 'Prezzo: €2,40'
            },
        }
        frollini: { 
            marca1: { 
                img: 'path/to/biscotti-frollini-marca1.jpg', 
                title: 'Biscotti alla Frollini Marca 1', 
                desc: 'Descrizione: Biscotti alla frollini croccanti Marca 1.', 
                price: 'Prezzo: €2,50' 
            }, 
            marca2: { 
                img: 'path/to/biscotti-frollini-marca2.jpg', 
                title: 'Biscotti alla Frollini Marca 2', 
                desc: 'Descrizione: Biscotti alla frollini croccanti Marca 2.', 
                price: 'Prezzo: €2,50' 
            }, 
            marca3: { 
                img: 'path/to/biscotti-frollini-marca3.jpg', 
                title: 'Biscotti alla Frollini Marca 3', 
                desc: 'Descrizione: Biscotti alla frollini croccanti Marca 3.', 
                price: 'Prezzo: €2,50' 
            }, 
        }
    }        
});