Αυτό το έργο θα σας βοηθήσει να βελτιώσετε τις δεξιότητές σας στο front-end και θα σας διδάξει πώς να δημιουργήσετε μια διεπαφή χρησιμοποιώντας βασικά πρότυπα ιστού.
Τα έργα είναι ένας πολύ καλός τρόπος για να βελτιώσετε τις δεξιότητές σας σε HTML, CSS και JavaScript και να ενισχύσετε σημαντικές έννοιες και τεχνικές.
Ένα έργο με το οποίο μπορείτε να ξεκινήσετε είναι ένα βιβλίο συνταγών, το οποίο μπορείτε να εκτελέσετε σε ένα πρόγραμμα περιήγησης όπως το Google Chrome ή το Firefox.
Στο βιβλίο συνταγών, η αριστερή πλευρά της ιστοσελίδας περιλαμβάνει μια ενότητα όπου ο χρήστης μπορεί να προσθέσει νέες συνταγές. Στα δεξιά της σελίδας, ο χρήστης μπορεί να δει και να αναζητήσει τις υπάρχουσες συνταγές.
Πώς να ζητήσετε από τον χρήστη να προσθέσει μια νέα συνταγή
Προσθέστε το αρχικό περιεχόμενο στα αρχεία HTML, CSS και JavaScript. Εάν δεν είστε εξοικειωμένοι με τις έννοιες ανάπτυξης ιστού, υπάρχουν πολλά μέρη όπου μπορείτε μάθετε την ανάπτυξη ιστοσελίδων στο διαδίκτυο.
Μπορείτε επίσης να δείτε το πλήρες παράδειγμα βιβλίου συνταγών σε αυτό Αποθετήριο GitHub.
- Προσθέστε τη βασική δομή HTML σε ένα νέο αρχείο HTML που ονομάζεται index.html:
html>
<html>
<κεφάλι>
<τίτλος>Εφαρμογή συνταγήςτίτλος>
κεφάλι>
<σώμα>
<nav>
<h1>Εφαρμογή συνταγήςh1>
nav>
<divτάξη="δοχείο">
Περιεχόμενο εδώ
div>
σώμα>
html> - Μέσα στην κλάση κοντέινερ, διαχωρίστε τη σελίδα σε μια αριστερή στήλη και μια δεξιά στήλη:
<divτάξη="αριστερή στήλη">div>
<divτάξη="δεξιά στήλη">div> - Μέσα στην αριστερή στήλη, προσθέστε μια φόρμα για να προσθέσει ο χρήστης μια νέα συνταγή. Ο χρήστης μπορεί να εισαγάγει το όνομα, τη λίστα συστατικών και τη μέθοδο της συνταγής:
<h3>Προσθήκη συνταγήςh3><μορφή>
<επιγραφήΓια="όνομα συνταγής">Ονομα:επιγραφή>
<εισαγωγήτύπος="κείμενο"ταυτότητα="όνομα συνταγής"απαιτείται>
<br /><επιγραφήΓια="ΥΛΙΚΑ ΣΥΝΤΑΓΗΣ">Συστατικά:επιγραφή>
<textareaταυτότητα="ΥΛΙΚΑ ΣΥΝΤΑΓΗΣ"σειρές="5"απαιτείται>textarea>
<br /><επιγραφήΓια="συνταγή-μέθοδος">Μέθοδος:επιγραφή>
<textareaταυτότητα="συνταγή-μέθοδος"σειρές="5"απαιτείται>textarea>
<br /><κουμπίτύπος="υποβάλλουν">Προσθήκη συνταγήςκουμπί>
μορφή> - Στην ετικέτα κεφαλιού του αρχείου HTML, προσθέστε έναν σύνδεσμο σε ένα νέο αρχείο CSS που ονομάζεται styles.css. Δημιουργήστε το αρχείο στον ίδιο φάκελο με το αρχείο HTML:
<Σύνδεσμοςσχετ="φύλλο στυλ"href="styles.css"> - Μέσα στο αρχείο CSS, προσθέστε κάποιο στυλ για τη συνολική σελίδα:
σώμα {
γραμματοσειρά-οικογένεια: Σανς σέριφ;
}nav {
χρώμα του φόντου: #333;
θέση: σταθερός;
μπλουζα: 0;
πλάτος: 100%;
υλικό παραγεμίσματος: 20px;
αριστερά: 0;
χρώμα: άσπρο;
στοίχιση κειμένου: κέντρο;
}.δοχείο {
απεικόνιση: καλώδιο;
flex-direction: σειρά;
δικαιολογώ-περιεχόμενο: διάστημα-μεταξύ;
περιθώριο: 150px 5%;
}.αριστερή στήλη {
πλάτος: 25%;
}.δεξιά-στήλη {
πλάτος: 65%;
} - Προσθέστε λίγο στυλ για το Προσθήκη συνταγών μορφή:
μορφή {
απεικόνιση: καλώδιο;
flex-direction: στήλη;
}επιγραφή {
περιθώριο-κάτω: 10px;
}εισαγωγή[τύπος="κείμενο"], textarea {
υλικό παραγεμίσματος: 10px;
περιθώριο-κάτω: 10px;
σύνορα-ακτίνα: 5px;
σύνορο: 1pxστερεός#cccc;
πλάτος: 100%;
μέγεθος κουτιού: περίγραμμα-κουτί;
}κουμπί[τύπος="υποβάλλουν"] {
υλικό παραγεμίσματος: 10px;
χρώμα του φόντου: #3338;
χρώμα: #fff;
σύνορο: κανένας;
σύνορα-ακτίνα: 5px;
δρομέας: δείκτης;
} - Στο κάτω μέρος της ετικέτας σώματος στο αρχείο HTML, προσθέστε έναν σύνδεσμο σε ένα αρχείο JavaScript που ονομάζεται script.js. Δημιουργήστε το αρχείο στον ίδιο φάκελο:
<σώμα>
Περιεχόμενο
<γραφήsrc="script.js">γραφή>
σώμα> - Μέσα στο script.js, χρησιμοποιήστε τη μέθοδο querySelector για να διασχίστε το DOM και λάβετε το στοιχείο φόρμας από τη σελίδα.
συνθ μορφή = έγγραφο.querySelector('μορφή'); - Δημιουργήστε έναν νέο πίνακα για την αποθήκευση συνταγών που ο χρήστης εισάγει στη φόρμα:
αφήνω συνταγές = []; - Σε μια νέα συνάρτηση, λάβετε τα πεδία ονόματος, συστατικών και μεθόδου που εισάγονται μέσω της φόρμας. Μπορείτε επίσης να εφαρμόσετε επικύρωση φόρμας από την πλευρά του πελάτη για να αποτρέψετε μη έγκυρες εισαγωγές ή για να ελέγξετε εάν υπάρχει ήδη συνταγή.
λειτουργίαhandleSubmit(Εκδήλωση) {
// Αποτροπή προεπιλεγμένης συμπεριφοράς υποβολής φόρμας
event.preventDefault();
// Λάβετε το όνομα της συνταγής, τα συστατικά και τις τιμές εισαγωγής μεθόδου
συνθ nameInput = έγγραφο.querySelector('#recipe-name');
συνθ ingrInput = έγγραφο.querySelector('#ΥΛΙΚΑ ΣΥΝΤΑΓΗΣ');
συνθ μέθοδοςΕίσοδος = έγγραφο.querySelector('#recipe-method');
συνθ name = nameInput.value.trim();
συνθ συστατικά = ingrInput.value.trim().split(',').χάρτης(Εγώ => i.trim());
συνθ μέθοδος = methodInput.value.trim();
} - Εάν οι είσοδοι είναι έγκυρες, προσθέστε τις στον πίνακα συνταγών:
αν (όνομα && συστατικά.μήκος > 0 && μέθοδος) {
συνθ newRecipe = { όνομα, συστατικά, μέθοδος };
recipes.push (newRecipe);
} - Διαγράψτε τις εισόδους στη φόρμα:
nameInput.value = '';
ingrInput.value = '';
methodInput.value = ''; - Μετά τη συνάρτηση handleSubmit(), προσθέστε ένας ακροατής εκδήλωσης για να καλέσετε τη συνάρτηση όταν ο χρήστης υποβάλλει τη φόρμα:
form.addEventListener('υποβάλλουν', handleSubmit); - Ανοίξτε το index.html σε ένα πρόγραμμα περιήγησης και προβάλετε τη φόρμα στα αριστερά:
Πώς να εμφανίσετε τις προστιθέμενες συνταγές
Μπορείτε να εμφανίσετε τις συνταγές που είναι αποθηκευμένες στον πίνακα συνταγών στη δεξιά πλευρά της σελίδας.
- Στο αρχείο HTML, προσθέστε ένα div για να εμφανίσετε τη λίστα συνταγών μέσα στη δεξιά στήλη. Προσθέστε ένα άλλο div για να εμφανίσετε ένα μήνυμα εάν δεν υπάρχουν συνταγές:
<divτάξη="δεξιά στήλη">
<divταυτότητα="λίστα συνταγών">div>
<divταυτότητα="χωρίς συνταγές">Δεν έχετε συνταγές.div>
div> - Προσθέστε κάποιο στυλ CSS για τη λίστα συνταγών:
#κατάλογος συνταγών {
απεικόνιση: πλέγμα;
πλέγμα-πρότυπο-στήλες: επαναλαμβάνω(αυτόματη προσαρμογή, ελάχιστη μέγ(300px, 1fr));
πλέγμα-κενό: 20px;
}#χωρίς συνταγές {
απεικόνιση: καλώδιο;
χρώμα του φόντου: #FFCCCC;
υλικό παραγεμίσματος: 20px;
σύνορα-ακτίνα: 8px;
περιθώριο-κορυφή: 44px;
} - Στο επάνω μέρος του αρχείου JavaScript, λάβετε τα στοιχεία HTML που χρησιμοποιούνται για την εμφάνιση της λίστας συνταγών και του μηνύματος σφάλματος:
συνθ συνταγήΛίστα = έγγραφο.querySelector('#recipe-list');
συνθ noRecipes = έγγραφο.getElementById("χωρίς συνταγές"); - Μέσα σε μια νέα συνάρτηση, περιηγηθείτε σε κάθε συνταγή στον πίνακα συνταγών. Για κάθε συνταγή, δημιουργήστε ένα νέο div για να εμφανίσετε αυτήν τη συνταγή:
λειτουργίαεμφάνιση Συνταγές() {
recipeList.innerHTML = '';
recipes.forEach((συνταγή, ευρετήριο) => {
συνθ συνταγήDiv = έγγραφο.createElement('div');
});
} - Προσθέστε κάποιο περιεχόμενο στο μεμονωμένο div συνταγών για να εμφανίσετε το όνομα, τα συστατικά και τη μέθοδο. Το div θα περιλαμβάνει επίσης ένα κουμπί διαγραφής. Θα προσθέσετε αυτήν τη λειτουργία στα επόμενα βήματα:
recipeDiv.innerHTML = `${recipe.name}</h3>
<ισχυρός>Συστατικά:ισχυρός></p>
- ${ingr} `).Συμμετοχή('')}
${recipe.ingredients.map(ingr =>`
</ul><ισχυρός>Μέθοδος:ισχυρός></p>
${recipe.method}</p>
- Προσθέστε μια τάξη για το στυλ του div:
recipeDiv.classList.add('συνταγή'); - Προσθέστε το νέο div στο στοιχείο HTML recipeList:
recipeList.appendChild (recipeDiv); - Προσθέστε το στυλ για την τάξη στο αρχείο CSS:
.συνταγή {
σύνορο: 1pxστερεός#cccc;
υλικό παραγεμίσματος: 10px;
σύνορα-ακτίνα: 5px;
κουτί-σκιά: 0 2px 4pxrgba(0,0,0,.2);
}.συνταγήh3 {
περιθώριο-κορυφή: 0;
περιθώριο-κάτω: 10px;
}.συνταγήul {
περιθώριο: 0;
υλικό παραγεμίσματος: 0;
στιλ λίστας: κανένας;
}.συνταγήulli {
περιθώριο-κάτω: 5px;
} - Ελέγξτε αν υπάρχουν περισσότερες από μία συνταγές. Εάν ναι, αποκρύψτε το μήνυμα σφάλματος:
noRecipes.style.display = recipes.length > 0? 'κανένα': 'flex';
- Καλέστε τη νέα συνάρτηση μέσα στη συνάρτηση handleSubmit(), αφού προσθέσετε τη νέα συνταγή στον πίνακα συνταγών:
displayRecipes(); - Ανοίξτε το index.html σε ένα πρόγραμμα περιήγησης:
- Προσθέστε συνταγές στη λίστα και δείτε τις να εμφανίζονται στη δεξιά πλευρά:
Πώς να διαγράψετε συνταγές
Μπορείτε να διαγράψετε συνταγές κάνοντας κλικ στο Διαγράφω κουμπί κάτω από τις οδηγίες μιας συνταγής.
- Προσθέστε κάποιο στυλ CSS για το κουμπί διαγραφής:
.διαγραφή-κουμπί {
χρώμα του φόντου: #dc3545;
χρώμα: #fff;
σύνορο: κανένας;
σύνορα-ακτίνα: 5px;
υλικό παραγεμίσματος: 5px 10px;
δρομέας: δείκτης;
}.διαγραφή-κουμπί:φτερουγίζω {
χρώμα του φόντου: #c82333;
} - Στο αρχείο JavaScript, προσθέστε μια νέα συνάρτηση για να διαγράψετε μια συνταγή:
λειτουργίαhandleΔιαγραφή(Εκδήλωση) {} - Χρησιμοποιώντας το συμβάν JavaScript, βρείτε το ευρετήριο της συνταγής στο οποίο ο χρήστης έκανε κλικ:
αν (event.target.classList.contains('κουμπί διαγραφής')) {
συνθ index = event.target.dataset.index;
} - Χρησιμοποιήστε το ευρετήριο για να διαγράψετε την επιλεγμένη συνταγή από τον πίνακα συνταγών:
recipes.splice (ευρετήριο, 1); - Ανανεώστε τη λίστα με τις συνταγές που εμφανίζεται στη σελίδα:
displayRecipes(); - Προσθέστε ένα πρόγραμμα ακρόασης συμβάντων για να καλέσετε τη συνάρτηση handleDelete() όταν ο χρήστης κάνει κλικ στο κουμπί διαγραφής:
recipeList.addEventListener('Κάντε κλικ', handleDelete); - Ανοίξτε το index.html σε ένα πρόγραμμα περιήγησης. Προσθέστε μια συνταγή για να δείτε το κουμπί διαγραφής:
Πώς να αναζητήσετε συνταγές
Μπορείτε να αναζητήσετε συνταγές χρησιμοποιώντας τη γραμμή αναζήτησης για να ελέγξετε αν υπάρχει μια συγκεκριμένη συνταγή.
- Μέσα στη δεξιά στήλη, προσθέστε μια γραμμή αναζήτησης πριν από τη λίστα συνταγών:
<divταυτότητα="αναζήτηση-ενότητα">
<h3>Λίστα συνταγώνh3>
<επιγραφήΓια="κουτί αναζήτησης">Αναζήτηση:επιγραφή>
<εισαγωγήτύπος="κείμενο"ταυτότητα="κουτί αναζήτησης">
div> - Προσθήκη στυλ CSS για την ετικέτα της γραμμής αναζήτησης:
επιγραφή[για="κουτί αναζήτησης"] {
απεικόνιση: ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ;
περιθώριο-κάτω: 10px;
} - Στο script.js, λάβετε το στοιχείο HTML του πλαισίου αναζήτησης:
συνθ SearchBox = έγγραφο.getElementById('κουτί αναζήτησης'); - Μέσα σε μια νέα συνάρτηση, δημιουργήστε έναν νέο πίνακα που περιέχει συνταγές των οποίων το όνομα ταιριάζει με την είσοδο αναζήτησης:
λειτουργίαΑναζήτηση(ερώτηση) {
συνθ filteredRecipes = recipes.filter(συνταγή => {
ΕΠΙΣΤΡΟΦΗ recipe.name.toLowerCase().περιλαμβάνει (query.toLowerCase());
});
} - Διαγράψτε τη λίστα των συνταγών που εμφανίζονται αυτήν τη στιγμή στην οθόνη:
recipeList.innerHTML = ''; - Περιηγηθείτε σε κάθε φιλτραρισμένη συνταγή που ταιριάζει με το αποτέλεσμα αναζήτησης και δημιουργήστε ένα νέο στοιχείο div:
filteredRecipes.forEach(συνταγή => {
συνθ συνταγήΕλ = έγγραφο.createElement('div');
}); - Προσθέστε το περιεχόμενο HTML για τη φιλτραρισμένη συνταγή στο div:
συνταγήEl.innerHTML = `${recipe.name}</h3>
<ισχυρός>Συστατικά:ισχυρός></p>
- ${ingr} `).Συμμετοχή('')}
${recipe.ingredients.map(ingr =>`
</ul><ισχυρός>Μέθοδος:ισχυρός></p>
${recipe.method}</p>
- Προσθέστε την ίδια κατηγορία συνταγών για σταθερό στυλ. Προσθέστε το νέο div στη λίστα που εμφανίζεται στη σελίδα:
recipeEl.classList.add('συνταγή');
recipeList.appendChild (recipeEl); - Προσθέστε ένα πρόγραμμα ακρόασης συμβάντων για να καλέσετε τη συνάρτηση αναζήτησης () όταν ο χρήστης πληκτρολογεί στη γραμμή αναζήτησης:
searchBox.addEventListener('εισαγωγή', συμβάν => αναζήτηση (event.target.value)); - Μέσα στη συνάρτηση handleDelete(), διαγράψτε το πλαίσιο αναζήτησης εάν ο χρήστης διαγράψει ένα στοιχείο, για να ανανεώσετε τη λίστα:
searchBox.value = ''; - Ανοίξτε το index.html σε ένα πρόγραμμα περιήγησης ιστού για να δείτε τη νέα γραμμή αναζήτησης και προσθέστε μερικές συνταγές:
- Προσθέστε ένα όνομα συνταγής στη γραμμή αναζήτησης για να φιλτράρετε τη λίστα συνταγών:
Δημιουργία έργων με HTML, CSS και JavaScript
Αυτό το έργο δείχνει πώς να δημιουργήσετε μια διεπαφή front-end για ένα απλό βιβλίο συνταγών. Σημειώστε ότι δεν υπάρχει διακομιστής υποστήριξης και η εφαρμογή δεν διατηρεί δεδομένα. αν ανανεώσετε τη σελίδα, θα χάσετε τις αλλαγές σας. Μια πιθανή επέκταση στην οποία θα μπορούσατε να εργαστείτε είναι ένας μηχανισμός αποθήκευσης και φόρτωσης δεδομένων χρησιμοποιώντας το localStorage.
Για να βελτιώσετε τις δεξιότητές σας στην ανάπτυξη ιστού, συνεχίστε να εξερευνάτε άλλα διασκεδαστικά έργα που μπορείτε να δημιουργήσετε στον υπολογιστή σας.