Link di anteprima: https://portafoglio.github.io/ilmiocarrello/spesa.html
Non riesco a far comparire il nome del supermercato salvato insieme alla lista, infatti quando apro la lista salvata compare solo la lista ma il nome del supermercato no, anche perché l'utente deve vedere a che supermercato si riferisce la lista salvata.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="spesa.css" rel="stylesheet" type="text/css">
<title>IL MIO CARRELLO</title>
</head>
<body>
<div id="container0">
<h1 id="title">IL MIO CARRELLO<?xml version="1.0" ?><svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1"><g><path d="M20.756,5.345C20.565,5.126,20.29,5,20,5H6.181L5.986,3.836C5.906,3.354,5.489,3,5,3H2.75c-0.553,0-1,0.447-1,1 s0.447,1,1,1h1.403l1.86,11.164c0.008,0.045,0.031,0.082,0.045,0.124c0.016,0.053,0.029,0.103,0.054,0.151 c0.032,0.066,0.075,0.122,0.12,0.179c0.031,0.039,0.059,0.078,0.095,0.112c0.058,0.054,0.125,0.092,0.193,0.13 c0.038,0.021,0.071,0.049,0.112,0.065C6.748,16.972,6.87,17,6.999,17C7,17,18,17,18,17c0.553,0,1-0.447,1-1s-0.447-1-1-1H7.847 l-0.166-1H19c0.498,0,0.92-0.366,0.99-0.858l1-7C21.031,5.854,20.945,5.563,20.756,5.345z M18.847,7l-0.285,2H15V7H18.847z M14,7 v2h-3V7H14z M14,10v2h-3v-2H14z M10,7v2H7C6.947,9,6.899,9.015,6.852,9.03L6.514,7H10z M7.014,10H10v2H7.347L7.014,10z M15,12v-2 h3.418l-0.285,2H15z"/><circle cx="8.5" cy="19.5" r="1.5"/><circle cx="17.5" cy="19.5" r="1.5"/></g></g></svg></h1>
<h2 id="beta">Beta: 0.2</h2>
<div id="container1">
<label id="labelSupermercato">Nome del supermercato:</label><br>
<input id="supermercato" type="text" placeholder="es: Conad"><br>
<button id="creaLista" onclick="creaLista();">Crea carrello</button>
</div>
<p id="messaggio_uno"></p>
<div id="container2">
<h2 id="messaggio_due"></h2>
<label id="labelProdotti">Aggiungi prodotti:</label><br>
<div id="textbox">
<input id="inserisciProdotto" type="text" placeholder="es: Insalata">
<button id="aggiungi" onclick="aggiungiProdotto();">+</button>
<button id="salvaLista" onclick="salvaLista();">Salva</button>
</div>
<ol id="listaProdotti"></ol>
</div>
<p id="messaggio_tre"></p>
<a href="#" id="ripristinaListe" onclick="ripristinaListe();">Visualizza lista salvata</a>
<p id="messaggio_quattro"></p>
<p id="messaggio_cinque"></p>
<p id="messaggio_sei"></p>
</div>
<script>
let messaggioUno = document.getElementById("messaggio_uno");
let messaggioDue = document.getElementById("messaggio_due");
let messaggioTre = document.getElementById("messaggio_tre");
let messaggioQuattro = document.getElementById("messaggio_quattro");
let messaggioCinque = document.getElementById("messaggio_cinque");
let messaggioSei = document.getElementById("messaggio_sei");
let sezioneUno = document.getElementById("container1");
let sezioneDue = document.getElementById("container2");
let salvaButton = document.getElementById("salvaLista");
let ripristinaListeButton = document.getElementById("ripristinaListe");
sezioneDue.style.display = "none";
messaggioCinque.style.display="none";
function creaLista() {
let nomeSupermercato = document.getElementById("supermercato").value;
if (nomeSupermercato === "") {
messaggioUno.innerHTML = "Inserisci il nome del supermercato.";
} else {
sezioneDue.style.display = "block";
messaggioUno.style.display = "none";
sezioneUno.style.display = "none";
ripristinaListeButton.style.display = "none";
messaggioDue.innerHTML = nomeSupermercato;
}
}
function aggiungiProdotto() {
let inserisciProdotti = document.getElementById("inserisciProdotto").value;
if (inserisciProdotti === "") {
messaggioTre.innerHTML = "Il campo di testo è vuoto.";
} else {
messaggioTre.style.display = "none";
let listaProdotti = document.getElementById("listaProdotti");
let li = document.createElement("li");
li.textContent = inserisciProdotti;
li.classList.add("elementiLista");
listaProdotti.appendChild(li);
let button = document.createElement("button");
button.textContent = "X";
button.classList.add("rimuoviElemento");
button.addEventListener("click", function() {
li.parentNode.removeChild(li);
button.parentNode.removeChild(button);
});
li.appendChild(button);
}
}
function salvaLista() {
let messaggioQuattro = document.getElementById("messaggio_quattro");
messaggioQuattro.innerHTML = "Lista salvata!";
let prodotti = [];
let lista = document.getElementsByClassName("elementiLista");
for (let i = 0; i < lista.length; i++) {
prodotti.push(lista[i].firstChild.textContent);
}
localStorage.setItem("listaSpesa", JSON.stringify(prodotti));
}
function ripristinaListe() {
let listaSalvata = localStorage.getItem("listaSpesa");
let nomeSupermercato = localStorage.getItem("nomeSupermercato");
if (listaSalvata) {
let prodotti = JSON.parse(listaSalvata);
let listaProdotti = document.getElementById("listaProdotti");
if(ripristinaListeButton){
ripristinaListeButton.style.display="none";
messaggioCinque.style.display="block";
messaggioQuattro.style.display="none";
sezioneDue.style.display="block";
sezioneUno.style.display="none";
messaggioDue.style.display="block";
}
for (let i = 0; i < prodotti.length; i++) {
let li = document.createElement("li");
li.textContent = prodotti[i];
li.classList.add("elementiLista");
let button = document.createElement("button");
button.textContent = "X";
button.classList.add("rimuoviElemento");
button.addEventListener("click", function() {
li.parentNode.removeChild(li);
button.parentNode.removeChild(button);
});
li.appendChild(button);
listaProdotti.appendChild(li);
}
}
}
</script>
</body>
</html>
@Giulio_M
