Dieses Projekt wird Ihnen dabei helfen, Ihre Front-End-Fähigkeiten zu verbessern, und Ihnen beibringen, wie Sie eine Schnittstelle unter Verwendung grundlegender Webstandards erstellen.
Projekte sind eine großartige Möglichkeit, Ihre HTML-, CSS- und JavaScript-Kenntnisse zu verbessern und wichtige Konzepte und Techniken zu vertiefen.
Ein Projekt, mit dem Sie beginnen können, ist ein Rezeptbuch, das Sie in einem Browser wie Google Chrome oder Firefox ausführen können.
Im Rezeptbuch enthält die linke Seite der Webseite einen Abschnitt, in dem der Benutzer neue Rezepte hinzufügen kann. Auf der rechten Seite kann der Benutzer vorhandene Rezepte anzeigen und durchsuchen.
So bitten Sie den Benutzer, ein neues Rezept hinzuzufügen
Fügen Sie den ursprünglichen Inhalt zu den HTML-, CSS- und JavaScript-Dateien hinzu. Wenn Sie mit Webentwicklungskonzepten nicht vertraut sind, gibt es viele Orte, an denen Sie dies tun können Webentwicklung online lernen.
Sie können hier auch das vollständige Rezeptbuchbeispiel anzeigen GitHub-Repository.
- Fügen Sie die grundlegende HTML-Struktur in einer neuen HTML-Datei namens index.html hinzu:
html>
<html>
<Kopf>
<Titel>Rezept-AppTitel>
Kopf>
<Körper>
<Navi>
<h1>Rezept-Apph1>
Navi>
<divKlasse="Container">
Inhalt hier
div>
Körper>
html> - Trennen Sie die Seite innerhalb der Containerklasse in eine linke und eine rechte Spalte:
<divKlasse="linke Spalte">div>
<divKlasse="rechte Spalte">div> - Fügen Sie in der linken Spalte ein Formular hinzu, mit dem der Benutzer ein neues Rezept hinzufügen kann. Der Benutzer kann den Namen des Rezepts, die Zutatenliste und die Methode eingeben:
<h3>Rezept hinzufügenh3><form>
<Etikettfür="Rezeptname">Name:Etikett>
<EingangTyp="Text"Ausweis="Rezeptname"erforderlich>
<Br /><Etikettfür="Rezept-Zutaten">Zutaten:Etikett>
<TextbereichAusweis="Rezept-Zutaten"Reihen="5"erforderlich>Textbereich>
<Br /><Etikettfür="Rezept-Methode">Methode:Etikett>
<TextbereichAusweis="Rezept-Methode"Reihen="5"erforderlich>Textbereich>
<Br /><TasteTyp="einreichen">Rezept hinzufügenTaste>
form> - Fügen Sie im Head-Tag der HTML-Datei einen Link zu einer neuen CSS-Datei namens styles.css hinzu. Erstellen Sie die Datei im selben Ordner wie Ihre HTML-Datei:
<Verknüpfungrel="Stilvorlage"href="stile.css"> - Fügen Sie in der CSS-Datei ein Styling für die gesamte Seite hinzu:
Körper {
Schriftfamilie: serifenlos;
}Navi {
Hintergrundfarbe: #333;
Position: Fest;
Spitze: 0;
Breite: 100%;
Polsterung: 20px;
links: 0;
Farbe: Weiss;
Textausrichtung: Center;
}.Container {
Anzeige: biegen;
Flex-Richtung: Reihe;
rechtfertigen-Inhalt: Zwischenraum;
Rand: 150px 5%;
}.linke Spalte {
Breite: 25%;
}.rechte Spalte {
Breite: 65%;
} - Fügen Sie etwas Styling für die hinzu Rezepte hinzufügen form:
form {
Anzeige: biegen;
Flex-Richtung: Spalte;
}Etikett {
Rand unten: 10px;
}Eingang[typ="Text"], Textbereich {
Polsterung: 10px;
Rand unten: 10px;
Grenzradius: 5px;
Grenze: 1pxsolide#ccc;
Breite: 100%;
Box-Größe: Border-Box;
}Taste[typ="einreichen"] {
Polsterung: 10px;
Hintergrundfarbe: #3338;
Farbe: #F f f;
Grenze: keiner;
Grenzradius: 5px;
Mauszeiger: Zeiger;
} - Fügen Sie am Ende des body-Tags in Ihrer HTML-Datei einen Link zu einer JavaScript-Datei namens script.js hinzu. Erstellen Sie die Datei im selben Ordner:
<Körper>
Inhalt
<SkriptQuelle="script.js">Skript>
Körper> - Verwenden Sie in script.js die Methode querySelector, um dies zu tun den DOM durchqueren und holen Sie sich das Formularelement von der Seite.
konst Formular = dokumentieren.querySelector('form'); - Erstellen Sie ein neues Array zum Speichern von Rezepten, die der Benutzer in das Formular eingibt:
lassen Rezepte = []; - Lassen Sie sich in einer neuen Funktion die Felder Name, Zutaten und Methode über das Formular eingeben. Kannst du auch umsetzen clientseitige Formularvalidierung um ungültige Eingaben zu verhindern oder um zu prüfen, ob ein Rezept bereits existiert.
FunktionhandleSubmit(Fall) {
// Standardverhalten beim Senden von Formularen verhindern
event.preventDefault();
// Rezeptname, Zutaten und Methodeneingabewerte abrufen
konst nameEingabe = dokumentieren.querySelector('#Rezeptname');
konst ingrInput = dokumentieren.querySelector('#rezept-zutaten');
konst methodInput = dokumentieren.querySelector('#Rezept-Methode');
konst name = nameInput.value.trim();
konst Zutaten = ingrInput.value.trim().split(',').Karte(ich => i.trim());
konst method = methodInput.value.trim();
} - Wenn die Eingaben gültig sind, fügen Sie sie dem Rezeptarray hinzu:
Wenn (Name && Zutaten.Länge > 0 && Methode) {
konst neuesRezept = { Name, Zutaten, Methode };
Rezepte.push (neues Rezept);
} - Löschen Sie die Eingaben im Formular:
nameInput.value = '';
ingrInput.value = '';
methodInput.value = ''; - Fügen Sie nach der Funktion handleSubmit() hinzu ein Ereignis-Listener So rufen Sie die Funktion auf, wenn der Benutzer das Formular absendet:
form.addEventListener('einreichen', handleSubmit); - Öffnen Sie index.html in einem Browser und sehen Sie sich das Formular auf der linken Seite an:
So zeigen Sie hinzugefügte Rezepte an
Sie können die im Rezeptarray gespeicherten Rezepte auf der rechten Seite der Seite anzeigen.
- Fügen Sie in der HTML-Datei ein div hinzu, um die Rezeptliste in der rechten Spalte anzuzeigen. Fügen Sie ein weiteres div hinzu, um eine Nachricht anzuzeigen, wenn keine Rezepte vorhanden sind:
<divKlasse="rechte Spalte">
<divAusweis="Rezeptliste">div>
<divAusweis="keine Rezepte">Sie haben keine Rezepte.div>
div> - Fügen Sie etwas CSS-Styling für die Rezeptliste hinzu:
#Rezeptliste {
Anzeige: Netz;
Grid-Template-Spalten: wiederholen(automatisch anpassen, Minimal Maximal(300px, 1fr));
Gitterlücke: 20px;
}#Keine-Rezepte {
Anzeige: biegen;
Hintergrundfarbe: #FFCCCC;
Polsterung: 20px;
Grenzradius: 8px;
Rand-oben: 44px;
} - Rufen Sie oben in der JavaScript-Datei die HTML-Elemente ab, die zum Anzeigen der Rezeptliste und der Fehlermeldung verwendet werden:
konst Rezeptliste = dokumentieren.querySelector('#Rezeptliste');
konst keineRezepte = dokumentieren.getElementById('keine Rezepte'); - Durchlaufen Sie in einer neuen Funktion jedes Rezept im Rezeptarray. Erstellen Sie für jedes Rezept ein neues div, um dieses Rezept anzuzeigen:
FunktionRezepte anzeigen() {
RecipeList.innerHTML = '';
Rezepte.fürEach((Rezept, Inhaltsverzeichnis) => {
konst RezeptDiv = dokumentieren.createElement('div');
});
} - Fügen Sie dem einzelnen Rezept-Div etwas Inhalt hinzu, um den Namen, die Zutaten und die Methode anzuzeigen. Das div enthält auch eine Schaltfläche zum Löschen. Sie werden diese Funktionalität in späteren Schritten hinzufügen:
RezeptDiv.innerHTML = `${Rezept.Name}</h3>
<stark>Zutaten:stark></p>
- ${ingr} `).verbinden('')}
${Rezept.Zutaten.Karte(ingr =>`
</ul><stark>Methode:stark></p>
${Rezept.Methode}</p>
- Fügen Sie eine Klasse hinzu, um das div zu gestalten:
RecipeDiv.classList.add('Rezept'); - Hängen Sie das neue div an das HTML-Element RecipeList an:
RecipeList.appendChild (RezeptDiv); - Fügen Sie das Styling für die Klasse in der CSS-Datei hinzu:
.Rezept {
Grenze: 1pxsolide#ccc;
Polsterung: 10px;
Grenzradius: 5px;
Box Schatten: 0 2px 4pxRGB(0,0,0,.2);
}.Rezepth3 {
Rand-oben: 0;
Rand unten: 10px;
}.RezeptUl {
Rand: 0;
Polsterung: 0;
Listenstil: keiner;
}.RezeptUlli {
Rand unten: 5px;
} - Überprüfen Sie, ob es mehr als ein Rezept gibt. Wenn ja, blenden Sie die Fehlermeldung aus:
noRecipes.style.display = Rezepte.Länge > 0? 'keine': 'flex';
- Rufen Sie die neue Funktion innerhalb der Funktion handleSubmit() auf, nachdem Sie das neue Rezept zum Array Recipes hinzugefügt haben:
AnzeigeRezepte(); - Öffnen Sie index.html in einem Browser:
- Fügen Sie Rezepte zur Liste hinzu und beobachten Sie, wie sie auf der rechten Seite erscheinen:
So löschen Sie Rezepte
Sie können Rezepte löschen, indem Sie auf klicken Löschen Schaltfläche unter den Anweisungen eines Rezepts.
- Fügen Sie ein CSS-Styling für die Schaltfläche „Löschen“ hinzu:
.delete-Schaltfläche {
Hintergrundfarbe: #dc3545;
Farbe: #F f f;
Grenze: keiner;
Grenzradius: 5px;
Polsterung: 5px 10px;
Mauszeiger: Zeiger;
}.delete-Schaltfläche:schweben {
Hintergrundfarbe: #c82333;
} - Fügen Sie in der JavaScript-Datei eine neue Funktion hinzu, um ein Rezept zu löschen:
FunktionhandleLöschen(Fall) {} - Finden Sie mithilfe des JavaScript-Ereignisses den Index des Rezepts, auf das der Benutzer geklickt hat:
Wenn (event.target.classList.contains('Löschen-Button')) {
konst index = event.target.dataset.index;
} - Verwenden Sie den Index, um das ausgewählte Rezept aus dem Rezepte-Array zu löschen:
Rezepte.Splice (Index, 1); - Aktualisieren Sie die Liste der auf der Seite angezeigten Rezepte:
AnzeigeRezepte(); - Fügen Sie einen Ereignis-Listener hinzu, um die Funktion handleDelete() aufzurufen, wenn der Benutzer auf die Schaltfläche „Löschen“ klickt:
RecipeList.addEventListener('klicken', handleLöschen); - Öffnen Sie index.html in einem Browser. Fügen Sie ein Rezept hinzu, um die Schaltfläche „Löschen“ anzuzeigen:
So suchen Sie nach Rezepten
Sie können mit der Suchleiste nach Rezepten suchen, um zu prüfen, ob ein bestimmtes Rezept existiert.
- Fügen Sie in der rechten Spalte eine Suchleiste vor der Liste der Rezepte hinzu:
<divAusweis="Suchbereich">
<h3>Rezeptlisteh3>
<Etikettfür="Suchbox">Suchen:Etikett>
<EingangTyp="Text"Ausweis="Suchbox">
div> - CSS-Stil für die Bezeichnung der Suchleiste hinzufügen:
Etikett[für="Suchbox"] {
Anzeige: Block;
Rand unten: 10px;
} - Rufen Sie in script.js das HTML-Element des Suchfelds ab:
konst Suchfeld = dokumentieren.getElementById('Suchbox'); - Erstellen Sie in einer neuen Funktion ein neues Array, das Rezepte enthält, deren Name mit der Sucheingabe übereinstimmt:
Funktionsuchen(Anfrage) {
konst gefiltertRezepte = Rezepte.filter (Rezept => {
zurückkehren rezept.name.toLowerCase().includes (query.toLowerCase());
});
} - Löschen Sie die derzeit auf dem Bildschirm angezeigte Rezeptliste:
RecipeList.innerHTML = ''; - Durchlaufen Sie jedes gefilterte Rezept, das mit dem Suchergebnis übereinstimmt, und erstellen Sie ein neues div-Element:
gefiltertRezepte.fürEach(Rezept => {
konst RezeptEl = dokumentieren.createElement('div');
}); - Fügen Sie den HTML-Inhalt für das gefilterte Rezept zum div hinzu:
RezeptEl.innerHTML = `${Rezept.Name}</h3>
<stark>Zutaten:stark></p>
- ${ingr} `).verbinden('')}
${Rezept.Zutaten.Karte(ingr =>`
</ul><stark>Methode:stark></p>
${Rezept.Methode}</p>
- Fügen Sie die gleiche Rezeptklasse für konsistentes Styling hinzu. Fügen Sie das neue div zur Liste hinzu, die auf der Seite angezeigt wird:
RecipeEl.classList.add('Rezept');
RecipeList.appendChild (RezeptEl); - Fügen Sie einen Ereignis-Listener hinzu, um die Funktion search() aufzurufen, wenn der Benutzer etwas in die Suchleiste eingibt:
searchBox.addEventListener('Eingang', Ereignis => Suche (Ereignis.Zielwert)); - Löschen Sie innerhalb der Funktion handleDelete() das Suchfeld, wenn der Benutzer ein Element löscht, um die Liste zu aktualisieren:
searchBox.value = ''; - Öffnen Sie index.html in einem Webbrowser, um die neue Suchleiste anzuzeigen, und fügen Sie einige Rezepte hinzu:
- Fügen Sie einen Rezeptnamen in die Suchleiste ein, um die Rezeptliste zu filtern:
Erstellen von Projekten mit HTML, CSS und JavaScript
Dieses Projekt demonstriert, wie man eine Front-End-Schnittstelle für ein einfaches Rezeptbuch erstellt. Beachten Sie, dass es keinen Backend-Server gibt und die App keine Daten speichert; Wenn Sie die Seite aktualisieren, gehen Ihre Änderungen verloren. Eine mögliche Erweiterung, an der Sie arbeiten könnten, ist ein Mechanismus zum Speichern und Laden von Daten mit localStorage.
Erkunden Sie weitere unterhaltsame Projekte, die Sie auf Ihrem eigenen Computer erstellen können, um Ihre Webentwicklungsfähigkeiten zu verbessern.