Come creare un libro di ricette utilizzando HTML, CSS e JavaScript

Questo progetto ti aiuterà ad affinare le tue capacità di front-end e ti insegnerà come costruire un'interfaccia utilizzando gli standard web di base.

I progetti sono un ottimo modo per migliorare le tue abilità HTML, CSS e JavaScript e rafforzare concetti e tecniche importanti.

Un progetto con cui puoi iniziare è un ricettario, che puoi eseguire in un browser come Google Chrome o Firefox.

Nel ricettario, la parte sinistra della pagina web include una sezione in cui l'utente può aggiungere nuove ricette. Sulla destra della pagina, l'utente può visualizzare e cercare tra le ricette esistenti.

Come chiedere all'utente di aggiungere una nuova ricetta

Aggiungi il contenuto iniziale ai file HTML, CSS e JavaScript. Se non hai familiarità con i concetti di sviluppo web, ci sono molti posti dove puoi farlo impara lo sviluppo web online.

Puoi anche visualizzare l'esempio completo del libro di ricette in questo Repository GitHub.

Aggiungi la struttura HTML di base in un nuovo file HTML chiamato index.html:

instagram viewer

html>
<html>
<Testa>
<titolo>App per ricettetitolo>
Testa>
<corpo>
<nav>
<h1>App per ricetteh1>
nav>
<divclasse="contenitore">
 Contenuto qui 
div>
corpo>
html>

All'interno della classe contenitore, separa la pagina in una colonna di sinistra e una colonna di destra:
```
<divclasse="colonna sinistra">div>
<divclasse="colonna di destra">div>
```

All'interno della colonna di sinistra, aggiungi un modulo per consentire all'utente di aggiungere una nuova ricetta. L'utente può inserire il nome della ricetta, l'elenco degli ingredienti e il metodo:

<h3>Aggiungi ricettah3><modulo>
<etichettaper="nome ricetta">Nome:etichetta>
<ingressotipo="testo"id="nome ricetta"necessario>
<fratello />
<etichettaper="ricetta-ingredienti">Ingredienti:etichetta>
<area di testoid="ricetta-ingredienti"righe="5"necessario>area di testo>
<fratello />
<etichettaper="metodo-ricetta">Metodo:etichetta>
<area di testoid="metodo-ricetta"righe="5"necessario>area di testo>
<fratello /><pulsantetipo="invia">Aggiungi ricettapulsante>
modulo>

Nel tag head del file HTML, aggiungi un link a un nuovo file CSS chiamato styles.css. Crea il file nella stessa cartella del tuo file HTML:
```
<collegamentorel="foglio di stile"href="stili.css">
```

All'interno del file CSS, aggiungi uno stile per l'intera pagina:

corpo {
famiglia di font: sans-serif;
}nav {
colore di sfondo: #333;
posizione: fisso;
superiore: 0;
larghezza: 100%;
imbottitura: 20px;
Sinistra: 0;
colore: bianco;
allineamento del testo: centro;
}
.contenitore {
Schermo: flettere;
direzione flessibile: riga;
giustificare il contenuto: spazio-tra;
margine: 150px 5%;
}
.colonna sinistra {
larghezza: 25%;
}.colonna-destra {
larghezza: 65%;
}

Aggiungi un po 'di stile per il Aggiungi ricette modulo:

modulo {
Schermo: flettere;
direzione flessibile: colonna;
}etichetta {
margine inferiore: 10px;
}
ingresso[tipo="testo"], area di testo {
imbottitura: 10px;
margine inferiore: 10px;
bordo-raggio: 5px;
confine: 1pxsolido#ccc;
larghezza: 100%;
dimensionamento della scatola: scatola di confine;
}pulsante[tipo="invia"] {
imbottitura: 10px;
colore di sfondo: #3338;
colore: #F F F;
confine: nessuno;
bordo-raggio: 5px;
cursore: puntatore;
}

Nella parte inferiore del tag body nel tuo file HTML, aggiungi un link a un file JavaScript chiamato script.js. Crea il file nella stessa cartella:
```
<corpo>
 Contenuto 
<copionesrc="script.js">copione>
corpo>
```
All'interno di script.js, usa il metodo querySelector per attraversare il DOM e ottieni l'elemento del modulo dalla pagina.
```
cost forma = documento.querySelector('modulo');
```
Crea un nuovo array per memorizzare le ricette che l'utente inserisce nel form:
```
permettere ricette = [];
```

In una nuova funzione, ottieni il nome, gli ingredienti e i campi del metodo inseriti tramite il modulo. Puoi anche implementare convalida del modulo lato client per evitare inserimenti non validi o per verificare se esiste già una ricetta.

funzionehandleSubmit(evento) {
// Impedisce il comportamento predefinito di invio del modulo
 evento.preventDefault();

// Ottieni il nome della ricetta, gli ingredienti e i valori di input del metodo
cost nomeInput = documento.querySelector('#nome-ricetta');
cost ingrInput = documento.querySelector('#ricetta-ingredienti');
cost metodoInput = documento.querySelector('#ricetta-metodo');
cost nome = nomeInput.value.trim();
cost ingredienti = ingrInput.value.trim().split(',').carta geografica(io => io.trim());
cost metodo = metodoInput.value.trim();
}

Se gli input sono validi, aggiungili all'array ricette:

Se (nome && ingredienti.lunghezza > 0 && metodo) {
cost newRecipe = { nome, ingredienti, metodo };
 ricette.push (nuova ricetta);
}

Cancella gli input nel modulo:

nomeInput.valore = '';
ingrInput.value = '';
metodoInput.value = '';

Dopo la funzione handleSubmit(), aggiungi un ascoltatore di eventi per chiamare la funzione quando l'utente invia il modulo:
```
form.addEventListener('invia', handleSubmit);
```
Apri index.html in un browser e visualizza il modulo a sinistra:

Come visualizzare le ricette aggiunte

È possibile visualizzare le ricette memorizzate nell'array delle ricette sul lato destro della pagina.

Nel file HTML, aggiungi un div per visualizzare l'elenco delle ricette nella colonna di destra. Aggiungi un altro div per visualizzare un messaggio se non ci sono ricette:
```
<divclasse="colonna di destra">
<divid="lista di ricette">div>
<divid="senza ricette">Non hai ricette.div>
div>
```

Aggiungi alcuni stili CSS per l'elenco delle ricette:

#lista-ricette {
Schermo: griglia;
colonne-modello-griglia: ripetere(auto-fit, minimo Massimo(300px, 1fr));
gap di griglia: 20px;
}#senza-ricette {
Schermo: flettere;
colore di sfondo: #FFCCCC;
imbottitura: 20px;
bordo-raggio: 8px;
margine superiore: 44px;
}

Nella parte superiore del file JavaScript, ottieni gli elementi HTML utilizzati per visualizzare l'elenco delle ricette e il messaggio di errore:
```
cost listaricette = documento.querySelector('#elenco-ricette');
cost noRicette = documento.getElementById('nessuna ricetta');
```

All'interno di una nuova funzione, scorrere ogni ricetta nell'array di ricette. Per ogni ricetta, crea un nuovo div per visualizzare quella ricetta:

funzionedisplayRicette() {
 ricettaLista.innerHTML = '';
 ricette.perOgni((ricetta, indice) => {
cost ricettaDiv = documento.createElement('div');
 });
}

Aggiungi del contenuto al singolo div della ricetta per visualizzare il nome, gli ingredienti e il metodo. Il div includerà anche un pulsante Elimina. Aggiungerai questa funzionalità nei passaggi successivi:

ricettaDiv.innerHTML = `
${nome.ricetta}</h3>


<forte>Ingredienti:forte></p>



 ${ricetta.ingredienti.mappa(ingr =>`${ingr}
`).giuntura('')}
 </ul>
<forte>Metodo:forte></p>

${ricetta.metodo}</p>

Aggiungi una classe per dare uno stile al div:
```
ricettaDiv.classList.add('ricetta');
```
Aggiungi il nuovo div all'elemento HTML RecipeList:
```
ricettaLista.appendChild (ricettaDiv);
```

Aggiungi lo stile per la classe nel file CSS:

.ricetta {
confine: 1pxsolido#ccc;
imbottitura: 10px;
bordo-raggio: 5px;
scatola-ombra: 0 2px 4pxrgb(0,0,0,.2);
}.ricettah3 {
margine superiore: 0;
margine inferiore: 10px;
}
.ricettaUl {
margine: 0;
imbottitura: 0;
in stile elenco: nessuno;
}.ricettaUlli {
margine inferiore: 5px;
}

Controlla se c'è più di una ricetta. In tal caso, nascondi il messaggio di errore:
```
noRecipes.style.display = ricette.lunghezza > 0? 'nessuno': 'flex';
```
Chiama la nuova funzione all'interno della funzione handleSubmit(), dopo aver aggiunto la nuova ricetta nell'array ricette:
```
displayRicette();
```
Apri index.html in un browser:
Aggiungi ricette all'elenco e guardale apparire sul lato destro:

Come eliminare le ricette

È possibile eliminare le ricette facendo clic su Eliminare pulsante sotto le istruzioni di una ricetta.

Aggiungi alcuni stili CSS per il pulsante Elimina:

.cancella-pulsante {
colore di sfondo: #dc3545;
colore: #F F F;
confine: nessuno;
bordo-raggio: 5px;
imbottitura: 5px 10px;
cursore: puntatore;
}.cancella-pulsante: al passaggio del mouse {
colore di sfondo: #c82333;
}

Nel file JavaScript, aggiungi una nuova funzione per eliminare una ricetta:
```
funzionehandleDelete(evento) {}
```

Utilizzando l'evento JavaScript, trova l'indice della ricetta su cui l'utente ha fatto clic:

Se (event.target.classList.contains('cancella-pulsante')) {
cost index = evento.target.dataset.index;
}

Utilizzare l'indice per eliminare la ricetta selezionata dall'array ricette:
```
ricette.splice (indice, 1);
```
Aggiorna l'elenco delle ricette visualizzate nella pagina:
```
displayRicette();
```
Aggiungi un listener di eventi per chiamare la funzione handleDelete() quando l'utente fa clic sul pulsante Elimina:
```
listaricette.addEventListener('clic', handleDelete);
```
Apri index.html in un browser. Aggiungi una ricetta per visualizzare il pulsante Elimina:

Come cercare le ricette

Puoi cercare ricette utilizzando la barra di ricerca per verificare se esiste una determinata ricetta.

All'interno della colonna di destra, aggiungi una barra di ricerca prima dell'elenco delle ricette:

<divid="sezione di ricerca">
<h3>Elenco ricetteh3>
<etichettaper="casella di ricerca">Ricerca:etichetta>
<ingressotipo="testo"id="casella di ricerca">
div>

Aggiungi lo stile CSS per l'etichetta della barra di ricerca:

etichetta[per="casella di ricerca"] {
Schermo: bloccare;
margine inferiore: 10px;
}

In script.js, ottieni l'elemento HTML della casella di ricerca:

cost casella di ricerca = documento.getElementById('casella di ricerca');

All'interno di una nuova funzione, crea un nuovo array che contenga le ricette il cui nome corrisponde all'input di ricerca:

funzionericerca(domanda) {
cost filteredRicette = ricette.filtro(ricetta => {
ritorno ricetta.nome.toLowerCase().includes (query.toLowerCase());
 });
}

Cancella l'elenco delle ricette attualmente visualizzate sullo schermo:
```
ricettaLista.innerHTML = '';
```
Passa attraverso ogni ricetta filtrata che corrisponde al risultato della ricerca e crea un nuovo elemento div:
```
filteredRicette.perOgni(ricetta => {
cost ricettaEl = documento.createElement('div'); 
});
```

Aggiungi il contenuto HTML per la ricetta filtrata al div:

ricettaEl.innerHTML = `
${nome.ricetta}</h3>


<forte>Ingredienti:forte></p>



 ${ricetta.ingredienti.mappa(ingr =>`${ingr}
`).giuntura('')}
 </ul>
<forte>Metodo:forte></p>

${ricetta.metodo}</p>

Aggiungi la stessa classe di ricette per uno stile coerente. Aggiungi il nuovo div all'elenco visualizzato nella pagina:
```
ricettaEl.classList.add('ricetta');
RecipeList.appendChild (recipeEl);
```
Aggiungi un listener di eventi per chiamare la funzione search() quando l'utente digita nella barra di ricerca:
```
searchBox.addEventListener('ingresso', evento => ricerca (event.target.value));
```
All'interno della funzione handleDelete(), cancella la casella di ricerca se l'utente elimina un elemento, per aggiornare l'elenco:
```
searchBox.valore = '';
```
Apri index.html in un browser Web per visualizzare la nuova barra di ricerca e aggiungi alcune ricette:
Aggiungi il nome di una ricetta nella barra di ricerca per filtrare l'elenco delle ricette:

Realizzazione di progetti con HTML, CSS e JavaScript

Questo progetto mostra come costruire un'interfaccia front-end per un semplice libro di ricette. Tieni presente che non esiste un server back-end e l'app non conserva i dati; se aggiorni la pagina, perderai le modifiche. Una possibile estensione su cui potresti lavorare è un meccanismo per salvare e caricare i dati utilizzando localStorage.

Per migliorare le tue capacità di sviluppo web, continua a esplorare altri progetti divertenti che puoi creare sul tuo computer.

About Technology - denizatm.com

Come creare un libro di ricette utilizzando HTML, CSS e JavaScript

Come chiedere all'utente di aggiungere una nuova ricetta

Come visualizzare le ricette aggiunte

${nome.ricetta}</h3>

Come eliminare le ricette

Come cercare le ricette

${nome.ricetta}</h3>

Realizzazione di progetti con HTML, CSS e JavaScript

Categorie

Recent Post

Lineare vs. Tattile vs. Interruttori cliccabili: qual è la differenza e cosa dovresti scegliere?

Come utilizzare il tuo teleobiettivo in modo efficace: 8 suggerimenti

Come ridurre lo stress scolastico e di studio con la tecnologia