## 🍣 FORMULARIO — SUSHI JOY | HTML · CSS · JAVASCRIPT
### 🟠 HTML
COLLEGARE CSS E JS ```html
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
⚠ Il tag <script> va messo sempre alla fine del <body>!
INPUT (TUTTI I TIPI) ```html
(Tipi: text, number, url, email)* *⚠ NON usare `<form action="...">`, gestisci tutto tramite JavaScript.
TAG UTILI NELLE CARD ```html
<img src="https://google.com/url" alt="desc">
<h3> <p> <button> <div>
TEMPLATE LITERAL (JavaScript) ```javascript
Ciao ${variabile}! Prezzo: €${obj.prezzo}
Usa i backtick ` e ${ } per inserire variabili JS nelle stringhe.
---
### 🔵 CSS
FLEXBOX — CONTENITORE ```css
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
GRID — CONTENITORE ```css
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
STILE CARD ```css
border-radius: 10px;
box-shadow: 0 2px 8px #0002;
padding: 12px;
width: 200px;
IMMAGINE NELLA CARD ```css
width: 100%;
height: 130px;
object-fit: cover;
(Ritaglia senza deformare l'immagine)
---
### ⚡ JAVASCRIPT
SELEZIONARE & LEGGERE ```javascript
document.querySelector("#id / .classe")
input.value // legge stringa
parseFloat(n.value) // legge numero
EVENTO CLICK ```javascript
el.addEventListener("click", function() {
// codice...
});
CREARE & AGGIUNGERE ELEMENTO ```javascript
let el = document.createElement("div");
el.innerHTML = "<p>Testo</p>";
padre.appendChild(el);
padre.innerHTML = ""; // svuota il contenitore
ARRAY DI OGGETTI ```javascript
let cards = [];
const obj = { nome: "...", prezzo: 0 };
cards.push(obj); // aggiunge
cards.forEach(c => { }); // itera
cards = cards.filter(c => c !== obj); // rimuove
LISTA SPESA
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista della spesa</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="aggiungiNuoviElementi">
<h1>Lista della spesa</h1>
<div class="interruzione"></div>
<form action="">
<input type="text" id="elemento" placeholder="Inserisci un nuovo elemento alla lista">
<input type="button" value="Aggiungi" onclick="aggiungi()">
</form>
</div>
<h1>Lista</h1>
<div class="pulsanti">
<button id="rimuoviLista" onclick="svuotaLista()">Svuota Lista</button>
<button id="rimuoviComprati" onclick="rimuoviComprati()">Rimuovi elementi comprati</button>
</div>
<ul id="lista"></ul>
</body>
</html>
CSS
.aggiungiNuoviElementi {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
width: fit-content;
padding: 15px;
border: 2px solid black;
margin: 0 auto;
}
.aggiungiNuoviElementi h1 { margin: 0; }
.interruzione { width: 100%; }
#elemento {
width: 300px;
height: 40px;
font-size: 17px;
}
body { text-align: center; }
button, input[type="button"] {
font-size: 16px;
padding: 10px;
margin: 5px;
}
#lista {
list-style-type: none;
padding: 0;
}
li {
font-size: 20px;
margin: 15px;
}
JavaScript
let contatore = 0;
function aggiungi(){
let testo = document.getElementById("elemento").value;
if (testo == ""){
alert("Inserisci un oggetto valido");
return;
}
let nuovoElemento = document.createElement("li");
nuovoElemento.textContent = testo + " ";
nuovoElemento.id = "elemento" + contatore;
nuovoElemento.addEventListener("click", segna);
let bottoneRimuovi = document.createElement("button");
bottoneRimuovi.textContent = "Rimuovi";
bottoneRimuovi.addEventListener("click", rimuovi);
document.getElementById("lista").appendChild(nuovoElemento);
nuovoElemento.appendChild(bottoneRimuovi);
document.getElementById("elemento").value = "";
contatore++;
}
function segna(){
if (this.style.textDecoration != "line-through"){
this.style.textDecoration = "line-through"
} else{
this.style.textDecoration = "none";
}
}
function rimuovi(){
let li = this.closest("li");
li.remove();
}
function svuotaLista(){
document.getElementById("lista").innerHTML = "";
}
function rimuoviComprati() {
let elementi = document.querySelectorAll("#lista li");
for (let i = 0; i < elementi.length; i++) {
if (elementi[i].style.textDecoration === "line-through") {
elementi[i].remove();
}
}
}
SUSHI JOI
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sushi Joy</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="input">
<h1>Sushi Joy</h1>
<form id="formuccio">
<label for="nome">Nome: </label>
<input type="text" id="nome" placeholder="Come si chiama?">
<br>
<label for="descrizione">Descrizione:</label>
<input type="text" id="descrizione" placeholder="Piccola descrizione">
<br>
<label for="urlImg">URL immagine:</label>
<input type="text" id="urlImg" placeholder="URL immagine">
<br>
<label for="prezzo">Prezzo:</label>
<input type="number" id="prezzo" placeholder="Quanto costa?">
<br>
<button type="submit" id="invio">Aggiungi</button>
</form>
</div>
<div class="card" id="contenitore"></div>
</body>
</html>
JavaScript
const form = document.querySelector("#formuccio");
const nome = document.querySelector("#nome");
const descr = document.querySelector("#descrizione");
const urlImg = document.querySelector("#urlImg");
const prezzo = document.querySelector("#prezzo");
const contenitore = document.querySelector("#contenitore");
let array = [];
form.addEventListener("submit", () => {
event.preventDefault();
const elemento = {
nome : nome.value,
descrizione : descr.value,
urlImmagine : urlImg.value,
prezzo : Number(prezzo.value),
elimina : false,
}
array.push(elemento);
const cont2 = document.createElement("div");
cont2.classList.add("icon");
const titolo1 = document.createElement("h3");
titolo1.textContent = elemento.nome;
const titolo2 = document.createElement("p");
titolo2.textContent = "Descrizione: " + elemento.descrizione;
const immagine = document.createElement("img");
immagine.src = elemento.urlImmagine
const price = document.createElement("p");
price.textContent = elemento.prezzo + "$";
const bottone = document.createElement("button");
bottone.textContent = "Rimuovi"
bottone.addEventListener("click", () => {
elemento.elimina = true;
array = array.filter(p => !p.elimina);
cont2.remove();
})
cont2.appendChild(immagine);
cont2.appendChild(titolo1);
cont2.appendChild(price);
cont2.appendChild(titolo2);
cont2.appendChild(bottone);
contenitore.appendChild(cont2);
form.reset();
})
CSS
.input{
padding: 20px;
margin: auto;
display: flex;
flex-direction: column;
width: 200px;
}
.icon{
border-width: 5px;
margin: 20px;
}
#formuccio{
padding: 20px;
margin: auto;
display: flex;
flex-direction: column;
width: 200px;
}
.card{
display: flex;
padding: 20px;
}
