Supermercato si by @garghy64 - Codewith.it

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

Referenze

formSpecifica a quale form appartiene un elemento.
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
formmethodDefinisce il metodo di invio dei dati oltre a method
<input>Definisce un area di input per l'invio di dati e informazioni
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Costruzione di tabella con html5

esercitazione a cazzo a casa

Esame di informatica

Idee background personaggio

Pagina di esempio

Navbar Example 4

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="https://www.assolatte.it/zpublish/4/uploads/4/salut_news/15053770556659478082_latte%20intero.jpg" alt="Latte">
                <h3 id="latte-title">Latte </h3>
                <p id="latte-desc">Descrizione:</p>
                <p id="latte-prezzo">Prezzo: </p>
                <label for="latte-brand">Marca:</label>
                <select id="latte-brand" name="brand">
                    <option value="marca1">Parmalat</option>
                    <option value="marca2">Zymil</option>
                    <option value="marca3">Berna</option>
                </select>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product" id="pasta-product">
                <img id="pasta-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_q08k6Hw-1cxXJN20iY-XSzEOxz2UiVbrcw&s" alt="Pasta">
                <h3 id="pasta-title">Penne</h3>
                <p id="pasta-desc">Descrizione:</p>
                <p id="pasta-prezzo">Prezzo:</p>
                <label for="tipo-pasta">Tipo di Pasta:</label>
                <select id="tipo-pasta" name="tipo-pasta">
                    <option value="penne">Penne</option>
                    <option value="spaghetti">Spaghetti</option>
                    <option value="fusilli">Fusilli</option>
                    <option value="rigatoni">Rigatoni</option>
                </select>
                <label for="pasta-brand">Marca:</label>
                <select id="pasta-brand" name="brand">
                    <option value="marca1">Barilla</option>
                    <option value="marca2">De Cecco</option>
                    <option value="marca3">Divella</option>
                </select>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product" id="biscotti-product"> 
              <img id="biscotti-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2QrPXIIcbO4QZsBUDuIiRGSc0qgNu2Ms86g&s" alt="Biscotti"> 
              <h3 id="biscotti-title">Biscotti </h3> 
              <p id="biscotti-desc">Descrizione:</p> 
              <p id="biscotti-prezzo">Prezzo:</p> 
              <label for="tipo-biscotti">Tipo di Biscotti:</label> 
              <select id="tipo-biscotti" name="tipo-biscotti">
                  <option value="cioccolato">Cioccolato</option> 
                  <option value="vaniglia">Vaniglia</option> 
                  <option value="frollini">Frollini</option> 
              </select> 
              <label for="biscotti-brand">Marca:</label> 
              <select id="biscotti-brand" name="brand"> 
                  <option value="marca1">Mulino Bianco</option> 
                  <option value="marca2">Gullon</option> 
                  <option value="marca3">Oro Saiwa</option>
                  <option value="marca2">Pavesi</option>
              </select> 
              <button>Aggiungi al carrello</button> 
            </div>
            <div class="product">
                <img src="https://vicinoateonline.it/foto/articoli/big/F/000000083081.jpg" alt="Succo di frutta">
                <h3>Estathe</h3>
                <p>Estathe a limone 1 Lt</p>
                <p>Prezzo: €2,30</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product">
                <img src="https://static.gamberorosso.it/2022/11/5-curtiriso-1024x835.jpg" alt="Riso">
                <h3>Riso</h3>
                <p>Curtiriso - Basmati 500gr</p>
                <p>Prezzo: €3,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product"> 
              <img src="https://m.media-amazon.com/images/I/71I5pdWg6OL._AC_UF894,1000_QL80_.jpg" alt="Tonno"> 
              <h3>Tonno</h3> 
              <p>Rio mare Tonno all'Olio di Oliva 240 g</p> 
              <p>Prezzo: €2,40</p> 
              <button>Aggiungi al carrello</button> 
            </div> 
              <div class="product"> 
                <img src="https://www.acquasorgesana.it/wp-content/uploads/2023/04/SORGESANA_bottle_2LT_perlage4.webp" alt="Acqua Minerale"> 
                <h3>Acqua Minerale</h3> 
                <p>Sorgesana Acqua Minerale Oligominerale Naturale 2 L</p> 
                <p>Prezzo: €1,50</p> 
                <button>Aggiungi al carrello</button> 
              </div>
              <div class="product"> 
                <img src="https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcSNOFqBTzL9C4uphMxI0l4D8fEJzlt56Vlaqi9D1BPoSfqCurXfycvxBWgZgJSoxPyRPm7eYyyn2R3MGEjMs2bwN1lGp9W-U6ZKoV3xCaTYXDF-dsMcUJJOZMk" alt="Confezione Olio"> 
                <h3>Cirio </h3> 
                <p>Olio Extravergine di Oliva Ml.1000</p> 
                <p>Prezzo: €8,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;
}

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.trim();
    const comment = document.getElementById('comment').value.trim();
        
    if (name && comment) {
      const feedbackItem = document.createElement('li');
      feedbackItem.innerHTML = `<strong>${name}</strong><p>${comment}</p>`;
        
      feedbackList.appendChild(feedbackItem);
      feedbackForm.reset();
    } else {
      alert('Both name and comment are required!');
    }
  });
});

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:'https://www.parmalat.it/origin0/app/uploads/2023/09/27155604/VIRTUALI-_-LATTE-_-SBIANCATI-_-SITO-6-PS.png',
    title: 'Parmalat',
    desc: 'Latte intero da 1000ml.',
    price: 'Prezzo: €1,20'
  },
  marca2: {
    img: 'https://www.bereacasa.it/wp-content/uploads/2018/12/latte-zymil-uht-buono-digeribile-1lt.png',
    title: 'Zymil',
    desc: 'Latte senza lattosio 100cl',
    price: 'Prezzo: €2,30'
  },
  marca3: {
    img: 'https://www.latteberna.it/wp-content/uploads/2022/01/LATT_800X1280_7-1.png',
    title: 'Berna',
    desc: 'Latte fresco intero di 1000ml.',
    price: 'Prezzo: €2,00'
  }
};

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;
});
    
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: 'https://m.media-amazon.com/images/I/61qbuPPQqyL._SL1000_.jpg',
      title: 'Barilla',
      desc: 'Penne rigate di grano duro 450gr.',
      price: 'Prezzo: €1,50'
    },
    marca2: {
      img: 'https://www.spesaconsegnata.it/wp-content/uploads/AM118.jpg',
      title: 'De Cecco',
      desc: 'Penne rigate di grano duro 500gr.',
      price: 'Prezzo: €1,20'
    },
    marca3: {
      img: 'https://m.media-amazon.com/images/I/71HB9onaRNL._AC_UF894,1000_QL80_.jpg',
      title: 'Divella',
      desc: 'Penne Candela 28, Pasta di Semola di Grano Duro , 500 g',
      price: 'Prezzo: €0,80'
    }
  },
  spaghetti: {
    marca1: {
      img: 'https://www.carrefour.it/on/demandware.static/-/Sites-carrefour-master-catalog-IT/default/dw459bc1ac/large/68805SPAGHETTIBARILLAGR500-8076800195057-5.png',
      title: 'Barilla',
      desc: ' Pasta Spaghetti n.5 100% Grano Italiano 500g',
      price: 'Prezzo: €1,20'
    },
    marca2: {
      img: 'https://portalvhdsqpfw2zh6dh7f3.blob.core.windows.net/spesasicura/img/sub580/12178.png',
      title: 'De Cecco',
      desc: 'spaghetti  n. 12 - 500 gr',
      price: 'Prezzo: €1,00'
    },
    marca3: {
      img: 'https://www.divella.it/wp-content/uploads/2022/10/pasta-di-semola-spaghetti-ristorante-500-1.jpg',
      title: 'Divella',
      desc: 'Divella pasta spaghetti n.8 gr.500',
      price: 'Prezzo: €1,30'
    }
  },
  fusilli: {
    marca1: {
      img: 'https://www.acchiari.it/8505-large_default/fusilli-n-98-500-gr-barilla.jpg',
      title: 'Barilla',
      desc: 'Fusilli 500gr.',
      price: 'Prezzo: €1,50'
    },
    marca2: {
      img: 'https://m.media-amazon.com/images/I/51Lf-gmmlsL._SL500_.jpg',
      title: 'De Cecco',
      desc: 'Fusilli 500gr.',
      price: 'Prezzo: €1,80'
    },
    marca3: {
      img: 'https://content.dambros.it/uploads/2017/07/26133141/0000079164-600x600.jpg',
      title: 'Divella',
      desc: 'Fusilli n°40 pasta di semola di grano duro 1Kg ',
      price: 'Prezzo: €1,80'
    }
  },
  rigatoni: {
    marca1: {
      img: 'https://d2f5fuie6vdmie.cloudfront.net/asset/ita/2021/7/2add708da9f83fbcb6cd6b53327f023e0f09ed84.jpeg',
      title: 'Barilla',
      desc: ' 89 Rigatoni 500gr',
      price: 'Prezzo: €1,00'
    },
    marca2: {
      img: 'https://m.media-amazon.com/images/I/61vMgNPquFL._AC_SX679_.jpg',
      title: 'De Cecco',
      desc: '  Mezzi Rigatoni N° 26 Pasta di Semola di Grano Duro, 500g',
      price: 'Prezzo: €1,60'
    },
    marca3: {
      img: 'https://m.media-amazon.com/images/I/413wy1QfetL._AC_PIbundle-24,TopRight,0,0_SH20_.jpg',
      title: 'DIVELLA',
      desc: ' PASTA DI SEMOLA DI GRANO DURO MEZZI RIGATONI 18 GR 500 ',
      price: 'Prezzo: €1,50'
    }
  }
};

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: 'https://www.cicalia.com/it/img/imgproducts/25169/l_25169.jpg', 
      title: 'Mulino Bianco', 
      desc: 'Biscotti Batticuori con cacao e cioccolato 350 gr.', 
      price: 'Prezzo: €3,00' 
    }, 
    marca2: { 
      img: 'https://www.cicalia.com/it/img/imgproducts/55798/l_55798.jpg', 
      title: 'Gullon', 
      desc: ' Mega duo chocolate gr.500', 
      price: 'Prezzo: €2,80' 
    }, 
    marca3: { 
      img: 'https://www.carrefour.it/dw/image/v2/BDWP_PRD/on/demandware.static/-/Sites-carrefour-master-catalog-IT/default/dw9aa81792/large/OROCIOK-8000090004461-1.png?sw=260&sh=260&sm=fit&sfrm=png', 
      title: 'Oro Saiwa', 
      desc: 'Oro Ciok biscotto con tavoletta di cioccolato al latte - 10 x 25 g', 
      price: 'Prezzo: €2,70' 
    },
    marca4: { 
      img: 'https://www.carrefour.it/dw/image/v2/BDWP_PRD/on/demandware.static/-/Sites-carrefour-master-catalog-IT/default/dwe5c431e2/large/GOCCIOLEALCIOCCOLATOPAVESI-8013355999143-1.png?sw=260&sh=260&sm=fit&sfrm=png', 
      title: 'Pavesi ', 
      desc: 'Gocciole Chocolate Biscotti con Gocce di Cioccolato 500g', 
      price: 'Prezzo: €2,70' 
    },
  }, 
  vaniglia: { 
    marca1: { 
      img: 'https://spesarecord.com/images/thumbs/0005938_mulino-bianco-soffi-di-vaniglia-gr300_550.jpeg', 
      title: 'MULINO BIANCO', 
      desc: 'SOFFI DI VANIGLIA GR.300', 
      price: 'Prezzo: €2,50' 
    }, 
    marca2: { 
      img: 'https://m.media-amazon.com/images/I/817ijiZT6UL.jpg', 
      title: 'Gullon', 
      desc: ' Aroma di vaniglia cialde biscotti senza zucchero 210 G Confezione',
      price: 'Prezzo: €6,00'
    },
    marca3: { 
      img: 'https://unesretailprod.blob.core.windows.net/retail/SECCHI/SCATOLAME/87158/56123FB7-E64E-4AB2-BCF6-21EBE426826E_70_BIG.Jpg', 
      title: 'Oro Saiwa ', 
      desc: 'Biscotti integrali con vaniglia, latte e cereali Senza Zuccheri aggiunti - 300 g',
      price: 'Prezzo: €2,40'
    },
    marca4: { 
      img: 'https://www.numeriprimishop.it/117540-large_default/ringo-vaniglia-pavesi-gr330.jpg', 
      title: 'Pavesi', 
      desc: 'RINGO VANIGLIA PAVESI GR.330',
      price: 'Prezzo: €2,80'
    }
  },
  frollini: { 
    marca1: { 
      img: 'https://m.media-amazon.com/images/I/81qzbRBpaFL._AC_UF894,1000_QL80_.jpg', 
      title: 'Mulino Bianco ', 
      desc: 'Biscotti Frollini Galletti, Colazione Ricca di Gusto, 800g', 
      price: 'Prezzo: €2,20' 
    }, 
    marca2: { 
      img: 'https://m.media-amazon.com/images/I/41tL-EaBDzL._AC_UF894,1000_QL80_.jpg', 
      title: 'Gullon', 
      desc: ' Frollini Biscotti con Zero Zuccheri Senza Olio di Palma 330g', 
      price: 'Prezzo: €4,30' 
    }, 
    marca3: { 
      img: 'https://www.acchiari.it/11249-home_default/le-frolle-con-panna-fresca-300-gr-oro-saiwa.jpg', 
      title: 'Oro Saiwa', 
      desc: 'Le Frolle con Panna Fresca 300 gr Oro Saiwa', 
      price: 'Prezzo: €2,50' 
    }, 
    marca4: { 
      img: 'https://www.tiportolaspesa.it/wp-content/uploads/2017/06/biscotti_petit_pavesi_gr_500.jpg', 
      title: 'Pavesi', 
      desc: 'Biscotti petit Pavesi gr.500', 
      price: 'Prezzo: €2,00' 
    } 
  },  
};
function updateBiscottiDetails() { 
  const selectedTipo = biscottiSelect.value; 
  const selectedMarca = biscottiBrandSelect.value; 
  const selectedBiscotti = biscotti[selectedTipo][selectedMarca];

  biscottiImg.src = selectedBiscotti.img;
  biscottiTitle.textContent = selectedBiscotti.title;
  biscottiDesc.textContent = selectedBiscotti.desc;
  biscottiPrezzo.textContent = selectedBiscotti.price;
}   
  biscottiSelect.addEventListener('change', updateBiscottiDetails);
  biscottiBrandSelect.addEventListener('change', updateBiscottiDetails);

  updateBiscottiDetails();