3E e 3I SIA: Crea un programma in javascript che utilizzando gli array, gestisce la prenotazione dei panini con le funzioni di caricamento, visualizzazione, modifica e cancellazione dell'ordine. La pagina deve essere in Html 5 con il Css
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prenotazione Panini</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
.container {
width: 50%;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Prenotazione Panini </h1>
<input type="text" id="panino" placeholder="Nome panino" />
<button onclick="aggiungiOrdine()">Aggiungi Ordine</button>
<h2>Ordini:</h2>
<ul id="listaOrdini"></ul>
<div>
<input type="text" id="modificaIndice" placeholder="Indice da modificare" />
<input type="text" id="nuovoPanino" placeholder="Nuovo nome panino" />
<button onclick="modificaOrdine()">Modifica Ordine</button>
</div>
<div>
<input type="text" id="indiceDaCancellare" placeholder="Indice da cancellare" />
<button onclick="cancellaOrdine()">Cancella Ordine</button>
</div>
</div>
<script>
let ordini = [];
function aggiungiOrdine() {
const panino = document.getElementById('panino').value;
if (panino) {
ordini.push(panino);
document.getElementById('panino').value = '';
visualizzaOrdini();
} else {
alert("Inserisci il nome del panino!");
}
}
function visualizzaOrdini() {
const listaOrdini = document.getElementById('listaOrdini');
listaOrdini.innerHTML = '';
ordini.forEach((panino, indice) => {
listaOrdini.innerHTML += `<li>${indice}, ${panino} <button onclick="cancellaOrdine(${indice})">Cancella</button></li>`;
});
}
function modificaOrdine() {
const indice = document.getElementById('modificaIndice').value;
const nuovoPanino = document.getElementById('nuovoPanino').value;
if (indice && nuovoPanino) {
ordini[indice] = nuovoPanino;
document.getElementById('modificaIndice').value = '';
document.getElementById('nuovoPanino').value = '';
visualizzaOrdini();
} else {
alert("Compila entrambi i campi!");
}
}
function cancellaOrdine(indice) {
ordini.splice(indice, 1);
visualizzaOrdini();
}
</script>
</body>
</html>
Spiegazione del Codice
.gif)
<!DOCTYPE html> Questa riga dice al browser che il documento è scritto in HTML5, la versione più recente del linguaggio HTML.
<html lang="it"> Inizia il documento HTML e specifica che la lingua principale è l'italiano.
<head> Qui inizia la sezione "head", dove ci sono informazioni sulla pagina che non sono visibili direttamente.
<meta charset="UTF-8"> Questa riga dice al browser di usare il formato di caratteri UTF-8, che include quasi tutti i caratteri delle lingue del mondo.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Questa riga aiuta a garantire che la pagina si adatti correttamente a diversi schermi, come quelli dei telefoni o dei computer.
<title>Prenotazione Panini</title> Qui si imposta il titolo della pagina, che appare nella scheda del browser. In questo caso, è "Prenotazione Panini".
<style> Inizia la sezione per i "stili", dove si definiscono come devono apparire gli elementi sulla pagina.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
} Qui si definisce lo stile del "corpo" della pagina. Usa il carattere Arial, un colore di sfondo grigio chiaro e un colore del testo scuro.
.container {
width: 50%;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} Questo stile crea un'area centrale (contenitore) che occupa il 50% della larghezza dello schermo. Ha uno sfondo bianco, un po' di spazio intorno (padding), angoli arrotondati e un'ombra leggera.
h1, h2 {
text-align: center;
} Questa riga centra il testo dei titoli principali (h1) e secondari (h2) nella pagina.
ul {
list-style-type: none;
padding: 0;
} Questo rimuove i punti (o numeri) dall'elenco (ul) e toglie il padding (spazio) intorno all'elenco.
</style>
</head> Qui finisce la sezione degli stili e la sezione "head".
<body> Inizia la parte visibile del documento dove gli utenti interagiranno.
<div class="container"> Questo crea un contenitore per gli elementi della pagina con lo stile definito in precedenza.
<h1>Prenotazione Panini</h1> Questo è un titolo principale che dice "Prenotazione Panini".
<input type="text" id="panino" placeholder="Nome panino" /> Crea un campo di testo dove l'utente può scrivere il nome del panino. "Nome panino" è un suggerimento che appare nel campo.
<button onclick="aggiungiOrdine()">Aggiungi Ordine</button> Questo crea un pulsante che, quando cliccato, esegue una funzione chiamata "aggiungiOrdine()", che aggiunge il panino all'elenco.
<h2>Ordini:</h2> Questo è un titolo secondario che indica che sotto ci saranno gli ordini.
<ul id="listaOrdini"></ul> Creiamo un elenco vuoto (ul) dove verranno mostrati gli ordini dei panini. Avrà un ID "listaOrdini" per poter essere utilizzato nel codice JavaScript.
<div> Inizia un nuovo blocco per altri elementi.
<input type="text" id="modificaIndice" placeholder="Indice da modificare" /> Un altro campo di testo dove l'utente può inserire l'indice (numero) dell'ordine che desidera modificare.
<input type="text" id="nuovoPanino" placeholder="Nuovo nome panino" /> Questo è un altro campo di testo dove l'utente può scrivere il nuovo nome del panino che sostituirà quello esistente.
<button onclick="modificaOrdine()">Modifica Ordine</button> Questo crea un pulsante che, quando cliccato, esegue la funzione chiamata "modificaOrdine()", che modifica l'ordine esistente in base all'indice fornito.
</div> Questo segna la fine del blocco dove abbiamo inserito i campi input e il pulsante per la modifica.
<div> Inizia un altro blocco per gli elementi successivi.
<input type="text" id="indiceDaCancellare" placeholder="Indice da cancellare" /> Qui c'è un campo di testo dove l'utente può inserire l'indice dell'ordine che desidera cancellare.
<button onclick="cancellaOrdine()">Cancella Ordine</button> Questo pulsante chiama la funzione "cancellaOrdine()" quando viene cliccato, per rimuovere l'ordine specificato.
</div> Segna la fine del secondo blocco con i campi per cancellare un ordine.
</div> Segna la fine del contenitore principale che raggruppa tutto il contenuto.
<script> Inizia la sezione per il codice JavaScript, che permette di rendere la pagina interattiva.
let ordini = []; Qui creiamo un array vuoto chiamato "ordini" che servirà per memorizzare i nomi dei panini ordinati.
function aggiungiOrdine() { Qui definiamo una nuova funzione chiamata "aggiungiOrdine". Questa funzione viene eseguita quando si fa clic sul pulsante "Aggiungi Ordine".
const panino = document.getElementById('panino').value; Recuperiamo il valore scritto nel campo di testo con l'ID "panino" e lo memorizziamo nella variabile "panino".
if (panino) { Controlliamo se la variabile "panino" non è vuota (cioè l'utente ha scritto qualcosa).
ordini.push(panino); Se il nome del panino non è vuoto, lo aggiungiamo all'array "ordini".
document.getElementById('panino').value = ''; Dopo aver aggiunto il panino, svuotiamo il campo di testo in modo che l'utente possa inserire un nuovo panino.
visualizzaOrdini(); Chiamiamo la funzione "visualizzaOrdini()" per mostrare gli ordini aggiornati nella lista.
} else {
alert("Inserisci il nome del panino!");
} Se la variabile "panino" è vuota, mostriamo un avviso (alert) che chiede di inserire il nome del panino.
} Questa riga segna la fine della funzione "aggiungiOrdine".
function visualizzaOrdini() { Qui definiamo la funzione "visualizzaOrdini", che mostra gli ordini nella lista.
const listaOrdini = document.getElementById('listaOrdini'); Recuperiamo l'elemento con l'ID "listaOrdini" e lo memorizziamo nella variabile "listaOrdini".
listaOrdini.innerHTML = ''; Svuotiamo l'elenco "listaOrdini" prima di aggiungere di nuovo gli ordini, in modo da non avere duplicati.
ordini.forEach((panino, indice) => { Per ogni elemento nell'array "ordini", facciamo qualcosa. "panino" è l'elemento corrente, e "indice" è la sua posizione nell'array.
listaOrdini.innerHTML += `<li>${indice}, ${panino} <button onclick = "cancellaOrdine(${indice})">Cancella</button></li>`; Con questa riga, aggiungiamo un nuovo elemento di lista (<li>) all'elenco "listaOrdini". Mostriamo l'indice del panino e il suo nome. All'interno di ogni elemento di lista, mettiamo anche un pulsante "Cancella". Quando l'utente clicca su questo pulsante, viene chiamata la funzione cancellaOrdine, passando l'indice del panino come argomento. Questo permette di cancellare specificamente quel panino.
}); Questa riga chiude il ciclo forEach, che ha iterato su tutti gli elementi dell'array "ordini".
} Qui si chiude la funzione "visualizzaOrdini".
function modificaOrdine() { Qui definiamo una nuova funzione chiamata "modificaOrdine", che sarà chiamata quando l'utente vuole modificare un ordine.
const indice = document.getElementById('modificaIndice').value; Recuperiamo il valore dal campo di testo con l'ID "modificaIndice", che contiene l'indice dell'ordine che l'utente desidera modificare. Salviamo questo valore nella variabile "indice".
const nuovoPanino = document.getElementById('nuovoPanino').value; Recuperiamo il valore dal campo di testo con l'ID "nuovoPanino", che contiene il nuovo nome del panino. Salviamo questo valore nella variabile "nuovoPanino".
if (indice && nuovoPanino) { Controlliamo se l'utente ha inserito sia un indice che un nuovo nome per il panino. Se entrambi sono presenti, allora procediamo a modificare l'ordine.
ordini[indice] = nuovoPanino; Modifichiamo l'array "ordini" sostituendo il panino esistente all'indice specificato con il nuovo nome del panino.
document.getElementById('modificaIndice').value = ''; Svuotiamo il campo di testo per l'indice di modifica in modo che l'utente possa inserirne uno nuovo.
document.getElementById('nuovoPanino').value = ''; Svuotiamo anche il campo di testo per il nuovo panino.
visualizzaOrdini(); Chiamiamo di nuovo la funzione visualizzaOrdini() per aggiornare e mostrare l'elenco degli ordini con il panino modificato.
} else {
alert("Compila entrambi i campi!"); Se l'utente non ha inserito entrambi i valori (indice e nuovo panino), mostriamo un avviso che chiede di compilare entrambi i campi.
}
} Questa riga chiude la funzione "modificaOrdine".
function cancellaOrdine(indice) { Qui definiamo una nuova funzione chiamata "cancellaOrdine", che accetta un parametro "indice". Questa funzione viene chiamata quando si vuole cancellare un ordine.
ordini.splice(indice, 1); Usando il metodo splice, rimuoviamo l'elemento dall'array "ordini" all'indice specificato. Questo elimina il panino che l'utente ha scelto di cancellare.
visualizzaOrdini(); Chiamiamo di nuovo la funzione visualizzaOrdini() per aggiornare l'elenco degli ordini dopo la cancellazione.
} Questa riga chiude la funzione "cancellaOrdine".
</script>
</body>
</html> Qui si chiude la sezione di script e, infine, la parte "body" e il documento HTML. Tutti gli elementi sono chiusi e il browser sa che la pagina è completa.
RIEPILOGO
Questo codice crea una pagina web semplice che consente agli utenti di prenotare panini. Gli utenti possono:
Aggiungere un nome di panino.
Visualizzare la lista degli ordini.
Modificare un ordine specificando un indice e un nuovo nome.
Cancellare un ordine specifico cliccando su un pulsante.
Utilizza le funzionalità di HTML per struttura, di CSS per lo stile e lo script javascript per il codice di programmazione
Funzionalità Principali dell'Applicazione
Interfaccia Utente: La pagina utilizza forme HTML per raccogliere input dall'utente e visualizzare gli ordini in un elenco. Ogni panino ordinato può essere visualizzato con il proprio indice e ha un pulsante per poterlo cancellare.
Aggiunta di Ordini: Gli utenti possono aggiungere un nuovo panino alla lista scrivendo il nome nel campo di testo e cliccando sul pulsante "Aggiungi Ordine".
Visualizzazione degli Ordini: Ogni volta che un panino è aggiunto, l'elenco viene aggiornato automaticamente per mostrare tutti gli ordini attuali.
Modifica degli Ordini: Gli utenti possono modificare il nome di un panino specifico inserendo l'indice dell'ordine e il nuovo nome per il panino e cliccando sul pulsante "Modifica Ordine".
Cancellazione degli Ordini: Gli utenti possono cancellare un ordine specifico cliccando sul pulsante "Cancella" che appare accanto a ciascun panino nell'elenco.
Interazione tra HTML, CSS e JavaScript
HTML: Utilizzato per strutturare la pagina, definendo il layout e i vari elementi (input, pulsanti, elenchi). Gli ID degli elementi HTML, come "panino" e "listaOrdini", permettono a JavaScript di riferirsi e manipolare questi elementi.
CSS: Utilizzato per stilizzare la pagina, rendendola visivamente gradevole e facile da usare. Permette di personalizzare colori, larghezze, margini e altro per migliorare l'esperienza dell'utente.
JavaScript: Aggiunge interattività alla pagina. Le funzioni JavaScript gestiscono gli eventi che accadono (come il clic di un pulsante), manipolano i dati (come aggiungere, modificare o cancellare panini) e aggiornano l'interfaccia utente (come visualizzare l'elenco degli ordini).
Commenti
Posta un commento