Jak stworzyć książkę kucharską za pomocą HTML, CSS i JavaScript

Ten projekt pomoże Ci doskonalić umiejętności front-endowe i nauczy Cię, jak zbudować interfejs przy użyciu podstawowych standardów sieciowych.

Projekty to świetny sposób na doskonalenie umiejętności posługiwania się HTML, CSS i JavaScript oraz utrwalanie ważnych pojęć i technik.

Jednym z projektów, od których możesz zacząć, jest książka kucharska, którą możesz uruchomić w przeglądarce, takiej jak Google Chrome lub Firefox.

W książce kucharskiej po lewej stronie strony znajduje się sekcja, w której użytkownik może dodawać nowe przepisy. Po prawej stronie użytkownik może przeglądać i przeszukiwać istniejące przepisy.

Jak poprosić użytkownika o dodanie nowego przepisu

Dodaj początkową zawartość do plików HTML, CSS i JavaScript. Jeśli nie jesteś zaznajomiony z koncepcjami tworzenia stron internetowych, jest wiele miejsc, w których możesz to zrobić uczyć się tworzenia stron internetowych online.

Możesz także zobaczyć pełny przykład książki kucharskiej w tym Repozytorium GitHub.

Dodaj podstawową strukturę HTML w nowym pliku HTML o nazwie index.html:

instagram viewer

HTML>
<HTML>
<głowa>
<tytuł>Aplikacja Przepistytuł>
głowa>
<ciało>
<nawigacja>
<h1>Aplikacja Przepish1>
nawigacja>
<dzklasa="pojemnik">
 Treść tutaj 
dz>
ciało>
HTML>

Wewnątrz klasy kontenera podziel stronę na lewą i prawą kolumnę:
```
<dzklasa="lewa kolumna">dz>
<dzklasa="prawa kolumna">dz>
```

W lewej kolumnie dodaj formularz, w którym użytkownik może dodać nowy przepis. Użytkownik może wprowadzić nazwę przepisu, listę składników i metodę:

<h3>Dodaj przepish3><formularz>
<etykietaDo=„nazwa-przepisu”>Nazwa:etykieta>
<wejścietyp="tekst"ID=„nazwa-przepisu”wymagany>
<br />
<etykietaDo=„składniki receptury”>Składniki:etykieta>
<pole tekstoweID=„składniki receptury”wydziwianie="5"wymagany>pole tekstowe>
<br />
<etykietaDo=„metoda przepisu”>Metoda:etykieta>
<pole tekstoweID=„metoda przepisu”wydziwianie="5"wymagany>pole tekstowe>
<br /><przycisktyp="składać">Dodaj przepisprzycisk>
formularz>

W tagu head pliku HTML dodaj link do nowego pliku CSS o nazwie styles.css. Utwórz plik w tym samym folderze co plik HTML:
```
<połączyćrel=„arkusz stylów”href="style.css">
```

W pliku CSS dodaj trochę stylu dla całej strony:

ciało {
rodzina czcionek: bezszeryfowe;
}nawigacja {
kolor tła: #333;
pozycja: naprawił;
szczyt: 0;
szerokość: 100%;
wyściółka: 20piks;
lewy: 0;
kolor: biały;
wyrównanie tekstu: Centrum;
}
.pojemnik {
wyświetlacz: przewód;
kierunek zginania: wiersz;
uzasadnij treść: przestrzeń pomiędzy;
margines: 150piks 5%;
}
.lewa kolumna {
szerokość: 25%;
}.prawa kolumna {
szerokość: 65%;
}

Dodaj trochę stylizacji do Dodaj przepisy formularz:

formularz {
wyświetlacz: przewód;
kierunek zginania: kolumna;
}etykieta {
margines-dolny: 10piks;
}
wejście[typ="tekst"], pole tekstowe {
wyściółka: 10piks;
margines-dolny: 10piks;
promień granicy: 5piks;
granica: 1pikssolidny#ccc;
szerokość: 100%;
rozmiar pudełka: ramka;
}przycisk[typ="składać"] {
wyściółka: 10piks;
kolor tła: #3338;
kolor: #ffff;
granica: nic;
promień granicy: 5piks;
kursor: wskaźnik;
}

U dołu tagu body w pliku HTML dodaj link do pliku JavaScript o nazwie script.js. Utwórz plik w tym samym folderze:
```
<ciało>
 Treść 
<scenariuszźródło=„skrypt.js”>scenariusz>
ciało>
```
W pliku script.js użyj metody querySelector, aby przejść przez DOM i pobierz element formularza ze strony.
```
konst formularz = dokument.querySelector('formularz');
```
Utwórz nową tablicę do przechowywania przepisów, które użytkownik wprowadza w formularzu:
```
pozwalać przepisy = [];
```

W nowej funkcji uzyskaj pola nazwy, składników i metody wprowadzone za pośrednictwem formularza. Możesz też wdrożyć walidacja formularza po stronie klienta aby zapobiec wprowadzaniu nieprawidłowych danych wejściowych lub sprawdzić, czy receptura już istnieje.

funkcjonowaćuchwytPrześlij(wydarzenie) {
// Zapobieganie domyślnemu zachowaniu przesyłania formularza
 zdarzenie.preventDefault();

// Pobierz nazwę receptury, składniki i wartości wejściowe metody
konst nazwaWejście = dokument.querySelector('#nazwa-przepisu');
konst wejścieIngr = dokument.querySelector(„#składniki-przepisu”);
konst metodaInput = dokument.querySelector('#metoda-przepisu');
konst nazwa = nazwaInput.value.trim();
konst składniki = składnikInput.value.trim().split(',').mapa(I => i.przytnij());
konst metoda = metodaInput.value.trim();
}

Jeśli dane wejściowe są prawidłowe, dodaj je do tablicy receptur:

Jeśli (nazwa && składniki.długość > 0 && metoda) {
konst nowy przepis = { nazwa, składniki, metoda };
 przepisy.push (nowy przepis);
}

Wyczyść dane wejściowe w formularzu:

nazwaWejście.wartość = '';
ingrInput.value = '';
metodaInput.wartość = '';

Po funkcji handleSubmit() dodaj słuchacz zdarzeń wywołać funkcję, gdy użytkownik przesyła formularz:
```
form.addEventListener('składać', uchwytWyślij);
```
Otwórz plik index.html w przeglądarce i przejrzyj formularz po lewej stronie:

Jak wyświetlić dodane przepisy

Możesz wyświetlić przepisy zapisane w tablicy receptur po prawej stronie strony.

W pliku HTML dodaj element div, aby wyświetlić listę przepisów w prawej kolumnie. Dodaj kolejny div, aby wyświetlić komunikat, jeśli nie ma przepisów:
```
<dzklasa="prawa kolumna">
<dzID=„lista przepisów”>dz>
<dzID=„bez przepisów”>Nie masz żadnych przepisów.dz>
dz>
```

Dodaj styl CSS do listy przepisów:

#lista-przepisów {
wyświetlacz: siatka;
kolumny szablonu siatki: powtarzać(automatyczne dopasowanie, minimum maksimum(300piks, 1fr));
przerwa w siatce: 20piks;
}#bez-przepisów {
wyświetlacz: przewód;
kolor tła: #FFCCCC;
wyściółka: 20piks;
promień granicy: 8piks;
górny margines: 44piks;
}

U góry pliku JavaScript pobierz elementy HTML używane do wyświetlania listy przepisów i komunikatu o błędzie:

konst lista przepisów = dokument.querySelector('#lista-przepisów');
konst brakPrzepisy = dokument.getElementById(„bez przepisów”);

Wewnątrz nowej funkcji przejrzyj każdą recepturę w tablicy receptur. Dla każdego przepisu utwórz nowy div, aby wyświetlić ten przepis:

funkcjonowaćpokażPrzepisy() {
 lista przepisów.innerHTML = '';
 przepisy.forEach((przepis, indeks) => {
konst PrzepisDiv = dokument.utwórzElement(„dział”);
 });
}

Dodaj trochę treści do div indywidualnego przepisu, aby wyświetlić nazwę, składniki i metodę. Div będzie również zawierał przycisk usuwania. Dodasz tę funkcję w późniejszych krokach:

PrzepisDiv.innerHTML = `
${nazwa.przepisu}</h3>


<mocny>Składniki:mocny></p>



 ${przepis.składniki.map(ingr =>`${ingr}
`).dołączyć('')}
 </ul>
<mocny>Metoda:mocny></p>

${przepis.metoda}</p>

Dodaj klasę, aby stylizować div:
```
przepisDiv.classList.add('przepis');
```
Dołącz nowy element div do elementu HTML „recipeList”:
```
lista_przepisów.appendDziecko (przepisDiv);
```

Dodaj stylizację dla klasy w pliku CSS:

.przepis {
granica: 1pikssolidny#ccc;
wyściółka: 10piks;
promień granicy: 5piks;
pudełko-cień: 0 2piks 4piksrgba(0,0,0,.2);
}.przepish3 {
górny margines: 0;
margines-dolny: 10piks;
}
.przepisul {
margines: 0;
wyściółka: 0;
styl listy: nic;
}.przepisulli {
margines-dolny: 5piks;
}

Sprawdź, czy jest więcej niż jeden przepis. Jeśli tak, ukryj komunikat o błędzie:
```
noRecipes.style.display = przepisy.długość > 0? „brak”: „elastyczny”;
```
Wywołaj nową funkcję wewnątrz funkcji handleSubmit(), po dodaniu nowej receptury do tablicy receptur:
```
wyświetlPrzepisy();
```
Otwórz plik index.html w przeglądarce:
Dodaj przepisy do listy i obserwuj, jak pojawiają się po prawej stronie:

Jak usunąć przepisy

Przepisy można usuwać, klikając przycisk Usuwać przycisk pod instrukcjami przepisu.

Dodaj styl CSS dla przycisku usuwania:

przycisk-usuń {
kolor tła: #dc3545;
kolor: #ffff;
granica: nic;
promień granicy: 5piks;
wyściółka: 5piks 10piks;
kursor: wskaźnik;
}przycisk-usuń:unosić się {
kolor tła: #c82333;
}

W pliku JavaScript dodaj nową funkcję, aby usunąć przepis:
```
funkcjonowaćuchwytUsuń(wydarzenie) {}
```

Korzystając ze zdarzenia JavaScript, znajdź indeks przepisu, który kliknął użytkownik:

Jeśli (event.target.classList.contains(przycisk „usuń”)) {
konst indeks = zdarzenie.cel.zestaw danych.indeks;
}

Użyj indeksu, aby usunąć wybraną recepturę z tablicy receptur:
```
przepisy.splice (indeks, 1);
```
Odśwież listę przepisów wyświetlaną na stronie:
```
wyświetlPrzepisy();
```
Dodaj detektor zdarzeń, aby wywoływał funkcję handleDelete(), gdy użytkownik kliknie przycisk usuwania:
```
listaprzepisów.addEventListener('Kliknij', uchwytUsuń);
```
Otwórz plik index.html w przeglądarce. Dodaj przepis, aby wyświetlić przycisk usuwania:

Jak wyszukiwać przepisy

Możesz wyszukiwać przepisy za pomocą paska wyszukiwania, aby sprawdzić, czy dany przepis istnieje.

W prawej kolumnie dodaj pasek wyszukiwania przed listą przepisów:

<dzID="sekcja wyszukiwania">
<h3>Lista przepisówh3>
<etykietaDo="pole wyszukiwania">Szukaj:etykieta>
<wejścietyp="tekst"ID="pole wyszukiwania">
dz>

Dodaj styl CSS dla etykiety paska wyszukiwania:

etykieta[za="pole wyszukiwania"] {
wyświetlacz: blok;
margines-dolny: 10piks;
}

W script.js pobierz element HTML pola wyszukiwania:

konst pole wyszukiwania = dokument.getElementById(„pole wyszukiwania”);

Wewnątrz nowej funkcji utwórz nową tablicę zawierającą przepisy, których nazwa pasuje do danych wejściowych wyszukiwania:

funkcjonowaćszukaj(zapytanie) {
konst filteredRecipes = przepisy.filter(przepis => {
powrót przepis.nazwa.toLowerCase().zawiera (zapytanie.toLowerCase());
 });
}

Wyczyść listę przepisów aktualnie wyświetlanych na ekranie:
```
lista przepisów.innerHTML = '';
```
Przejrzyj w pętli każdy przefiltrowany przepis pasujący do wyniku wyszukiwania i utwórz nowy element div:
```
filteredRecipes.forEach(przepis => {
konst przepis El = dokument.utwórzElement(„dział”); 
});
```

Dodaj zawartość HTML filtrowanej receptury do elementu div:

przepisEl.innerHTML = `
${nazwa.przepisu}</h3>


<mocny>Składniki:mocny></p>



 ${przepis.składniki.map(ingr =>`${ingr}
`).dołączyć('')}
 </ul>
<mocny>Metoda:mocny></p>

${przepis.metoda}</p>

Dodaj tę samą klasę przepisu, aby uzyskać spójną stylizację. Dodaj nowy div do listy wyświetlanej na stronie:
```
przepisEl.klasaLista.add('przepis');
lista_przepisów.appendDziecko (przepisEl);
```
Dodaj detektor zdarzeń, aby wywoływał funkcję search(), gdy użytkownik wpisze w pasku wyszukiwania:
```
searchBox.addEventListener('wejście', zdarzenie => wyszukaj (event.target.value));
```
Wewnątrz funkcji handleDelete() wyczyść pole wyszukiwania, jeśli użytkownik usunie element, aby odświeżyć listę:
```
searchBox.wartość = '';
```
Otwórz plik index.html w przeglądarce internetowej, aby wyświetlić nowy pasek wyszukiwania i dodaj kilka przepisów:
Dodaj nazwę przepisu do paska wyszukiwania, aby przefiltrować listę przepisów:

Tworzenie projektów za pomocą HTML, CSS i JavaScript

Ten projekt pokazuje, jak zbudować interfejs front-end dla prostej książki kucharskiej. Pamiętaj, że nie ma serwera zaplecza, a aplikacja nie przechowuje danych; jeśli odświeżysz stronę, utracisz wprowadzone zmiany. Jednym z możliwych rozszerzeń, nad którym możesz popracować, jest mechanizm zapisywania i ładowania danych przy użyciu localStorage.

Aby poprawić swoje umiejętności tworzenia stron internetowych, kontynuuj poznawanie innych zabawnych projektów, które możesz tworzyć na własnym komputerze.

About Technology - denizatm.com

Jak stworzyć książkę kucharską za pomocą HTML, CSS i JavaScript

Jak poprosić użytkownika o dodanie nowego przepisu

Jak wyświetlić dodane przepisy

${nazwa.przepisu}</h3>

Jak usunąć przepisy

Jak wyszukiwać przepisy

${nazwa.przepisu}</h3>

Tworzenie projektów za pomocą HTML, CSS i JavaScript

Kategorie

Recent Post

5 zautomatyzowanych technologii bezpieczeństwa pojazdów, które ratują życie

Jaka jest różnica między reflektorami halogenowymi i ksenonowymi?

Jak przekonwertować STL na G-Code: najłatwiejszy sposób