Supermercato si by @garghy64 - Codewith.it

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

References

typeSpecifica la tipologia/funzione di un elemento.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<strong>Definisce una parte del testo importante con formattazione in grassetto.
downloadConsente di scaricare file al click di collegamento ipertestuale.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form

Users

Log in to search for users

Explore

Find inspiration

Analizzatore Exif

Prototipo di form

CheatBlox | PayBack HUB

Tastiera digitale

Form Raccolta Segnalazioni Immobil

Table (prove)(2)

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