Proyek ini akan membantu Anda mengasah keterampilan front-end dan mengajari Anda cara membuat antarmuka menggunakan standar web inti.

Proyek adalah cara yang bagus untuk meningkatkan keterampilan HTML, CSS, dan JavaScript Anda, serta memperkuat konsep dan teknik penting.

Satu proyek yang dapat Anda mulai adalah buku resep, yang dapat Anda jalankan di browser seperti Google Chrome atau Firefox.

Di buku resep, sisi kiri halaman web menyertakan bagian tempat pengguna dapat menambahkan resep baru. Di sebelah kanan halaman, pengguna dapat melihat dan mencari melalui resep yang ada.

Cara Meminta Pengguna untuk Menambahkan Resep Baru

Tambahkan konten awal ke file HTML, CSS, dan JavaScript. Jika Anda tidak terbiasa dengan konsep pengembangan web, ada banyak tempat di mana Anda bisa melakukannya belajar pengembangan web online.

Anda juga dapat melihat contoh buku resep lengkap di sini repo GitHub.

  1. Tambahkan struktur HTML dasar dalam file HTML baru bernama index.html:
    html>
    <html>
    <kepala>
    <judul>Aplikasi Resep
    




instagram viewer

    
judul>
    kepala>
    <tubuh>
    <nav>
    <h1>Aplikasi Reseph1>
    nav>
    <divkelas="wadah">
     Konten di sini 
    div>
    tubuh>
    html>
  2. Di dalam kelas container, pisahkan halaman menjadi kolom kiri dan kolom kanan:
    <divkelas="kolom kiri">
    div>
    <divkelas="kolom kanan">
    div>
  3. Di dalam kolom kiri, tambahkan formulir bagi pengguna untuk menambahkan resep baru. Pengguna dapat memasukkan nama resep, daftar bahan, dan metode:
    <h3>Tambahkan Reseph3>
    <membentuk>
    <labeluntuk="nama resep">Nama:label>
    <memasukkanjenis="teks"pengenal="nama resep"diperlukan>
    <br />
    

    <labeluntuk="resep-bahan">Bahan-bahan:label>
    <textareapengenal="resep-bahan"baris="5"diperlukan>textarea>
    <br />
    

    <labeluntuk="resep-metode">Metode:label>
    <textareapengenal="resep-metode"baris="5"diperlukan>textarea>
    <br />
    <tomboljenis="kirim">Tambahkan Reseptombol>
    membentuk>
  4. Di tag kepala file HTML, tambahkan tautan ke file CSS baru bernama styles.css. Buat file di folder yang sama dengan file HTML Anda:
    <tautanrel="lembar gaya"href="styles.css">
  5. Di dalam file CSS, tambahkan beberapa gaya untuk keseluruhan halaman:
    tubuh {
    font-family: Sans Serif;
    }
    nav {
    warna latar belakang: #333;
    posisi: tetap;
    atas: 0;
    lebar: 100%;
    lapisan: 20px;
    kiri: 0;
    warna: putih;
    perataan teks: tengah;
    }
    

    .wadah {
    menampilkan: melenturkan;
    flex-direction: baris;
    membenarkan-konten: ruang-antara;
    batas: 150px 5%;
    }
    

    .kolom kiri {
    lebar: 25%;
    }
    .kanan-kolom {
    lebar: 65%;
    }
  6. Tambahkan beberapa gaya untuk Tambahkan Resep membentuk:
    membentuk {
    menampilkan: melenturkan;
    flex-direction: kolom;
    }
    label {
    margin-bawah: 10px;
    }
    

    memasukkan[jenis="teks"], textarea {
    lapisan: 10px;
    margin-bawah: 10px;
    radius perbatasan: 5px;
    berbatasan: 1pxpadat#ccc;
    lebar: 100%;
    ukuran kotak: kotak perbatasan;
    }
    tombol[jenis="kirim"] {
    lapisan: 10px;
    warna latar belakang: #3338;
    warna: #fff;
    berbatasan: tidak ada;
    radius perbatasan: 5px;
    kursor: penunjuk;
    }
  7. Di bagian bawah tag body di file HTML Anda, tambahkan tautan ke file JavaScript bernama script.js. Buat file di folder yang sama:
    <tubuh>
     Isi 
    <naskahsrc="skrip.js">naskah>
    tubuh>
  8. Di dalam script.js, gunakan metode querySelector untuk melintasi DOM dan dapatkan elemen formulir dari halaman.
    const bentuk = dokumen.querySelector('membentuk');
  9. Buat larik baru untuk menyimpan resep yang dimasukkan pengguna ke dalam formulir:
    membiarkan resep = [];
  10. Dalam fungsi baru, dapatkan bidang nama, bahan, dan metode yang dimasukkan melalui formulir. Anda juga bisa menerapkan validasi formulir sisi klien untuk mencegah input yang tidak valid, atau untuk memeriksa apakah resep sudah ada.
    fungsihandleSubmit(peristiwa) {
    // Mencegah perilaku pengiriman formulir default
     event.preventDefault();

    // Dapatkan nilai input nama resep, bahan, dan metode
    const namaMasukan = dokumen.querySelector('#nama-resep');
    const ingrInput = dokumen.querySelector('#resep-bahan');
    const masukan metode = dokumen.querySelector('#resep-metode');
    const nama = namaInput.nilai.trim();
    const bahan = ingrInput.nilai.trim().split(',').peta(Saya => i.trim());
    const metode = metodeInput.nilai.trim();
    }
  11. Jika inputnya valid, tambahkan ke larik resep:
    jika (nama && bahan.panjang > 0 && metode) {
    const newRecipe = { nama, bahan, cara };
     resep.push (Resep baru);
    }
  12. Hapus input pada formulir:
    namaMasukan.nilai = '';
    ingrInput.nilai = '';
    methodInput.nilai = '';
  13. Setelah fungsi handleSubmit(), tambahkan pendengar acara untuk memanggil fungsi saat pengguna mengirimkan formulir:
    form.addEventListener('kirim', handleKirimkan);
  14. Buka index.html di browser dan lihat formulir di sebelah kiri:

Cara Menampilkan Resep Tambahan

Anda dapat menampilkan resep yang disimpan dalam larik resep di sisi kanan halaman.

  1. Di file HTML, tambahkan div untuk menampilkan daftar resep di kolom kanan. Tambahkan div lain untuk menampilkan pesan jika tidak ada resep:
    <divkelas="kolom kanan">
    <divpengenal="daftar resep">div>
    <divpengenal="tanpa resep">Anda tidak punya resep.div>
    div>
  2. Tambahkan beberapa gaya CSS untuk daftar resep:
    #resep-daftar {
    menampilkan: kisi;
    grid-template-columns: mengulang(pas otomatis, minmax(300px, 1fr));
    celah jaringan: 20px;
    }
    #tanpa resep {
    menampilkan: melenturkan;
    warna latar belakang: #FFCCCC;
    lapisan: 20px;
    radius perbatasan: 8px;
    margin-atas: 44px;
    }
  3. Di bagian atas file JavaScript, dapatkan elemen HTML yang digunakan untuk menampilkan daftar resep dan pesan kesalahan:
    const daftar resep = dokumen.querySelector('#resep-daftar');
    const tidak ada Resep = dokumen.getElementById('tanpa resep');
  4. Di dalam fungsi baru, lewati setiap resep dalam larik resep. Untuk setiap resep, buat div baru untuk menampilkan resep tersebut:
    fungsidisplayRecipes() {
     resepList.innerHTML = '';
     resep.untukMasing-masing((resep, indeks) => {
    const resepDiv = dokumen.createElement('div');
     });
    }
  5. Tambahkan beberapa konten ke masing-masing div resep untuk menampilkan nama, bahan, dan metode. Div juga akan menyertakan tombol hapus. Anda akan menambahkan fungsi ini di langkah selanjutnya:
    resepDiv.innerHTML = `
    ${resep.nama}</h3>
    

    

    <kuat>Bahan-bahan:kuat></p>
    

      

       ${resep.bahan.peta(ingr =>`
    • ${ingr}
      • `      ).bergabung('')}
       </ul>
      <kuat>Metode:kuat></p>
      

      ${resep.metode}</p>
  6. Tambahkan kelas untuk menata div:
    resepDiv.classList.add('resep');
  7. Tambahkan div baru ke elemen HTML recipeList:
    resepList.appendChild (resepDiv);
  8. Tambahkan gaya untuk kelas di file CSS:
    .resep {
    berbatasan: 1pxpadat#ccc;
    lapisan: 10px;
    radius perbatasan: 5px;
    bayangan kotak: 0 2px 4pxrgba(0,0,0,.2);
    }
    .reseph3 {
    margin-atas: 0;
    margin-bawah: 10px;
    }
    

    .resepul {
    batas: 0;
    lapisan: 0;
    daftar-gaya: tidak ada;
    }
    .resepulli {
    margin-bawah: 5px;
    }
  9. Periksa apakah ada lebih dari satu resep. Jika demikian, sembunyikan pesan kesalahan: 
    noRecipes.style.display = resep.panjang > 0? 'tidak ada': 'fleksibel';
  10. Panggil fungsi baru di dalam fungsi handleSubmit(), setelah menambahkan resep baru ke dalam larik resep:
    displayRecipes();
  11. Buka index.html di browser:
  12. Tambahkan resep ke daftar dan lihat resep muncul di sisi kanan:

Cara Menghapus Resep

Anda dapat menghapus resep dengan mengklik Menghapus tombol di bawah petunjuk resep.

  1. Tambahkan beberapa gaya CSS untuk tombol hapus:
    .hapus-tombol {
    warna latar belakang: #dc3545;
    warna: #fff;
    berbatasan: tidak ada;
    radius perbatasan: 5px;
    lapisan: 5px 10px;
    kursor: penunjuk;
    }
    .hapus-tombol:arahkan {
    warna latar belakang: #c82333;
    }
  2. Di file JavaScript, tambahkan fungsi baru untuk menghapus resep:
    fungsihandleDelete(peristiwa) {
    }
  3. Menggunakan acara JavaScript, temukan indeks resep yang diklik pengguna:
    jika (event.target.classList.contains('tombol hapus')) {
    const index = event.target.dataset.index;
    }
  4. Gunakan indeks untuk menghapus resep yang dipilih dari larik resep:
    resep.splice (indeks, 1);
  5. Refresh daftar resep yang ditampilkan di halaman:
    displayRecipes();
  6. Tambahkan pendengar acara untuk memanggil fungsi handleDelete() saat pengguna mengklik tombol hapus:
    resepList.addEventListener('klik', peganganHapus);
  7. Buka index.html di browser. Tambahkan resep untuk melihat tombol hapus:

Cara Mencari Resep

Anda dapat mencari resep menggunakan bilah pencarian untuk memeriksa apakah ada resep tertentu.

  1. Di dalam kolom kanan, tambahkan bilah pencarian sebelum daftar resep:
    <divpengenal="bagian pencarian">
    <h3>Daftar Reseph3>
    <labeluntuk="kotak pencarian">Mencari:label>
    <memasukkanjenis="teks"pengenal="kotak pencarian">
    div>
  2. Tambahkan gaya CSS untuk label bilah pencarian:
    label[untuk="kotak pencarian"] {
    menampilkan: memblokir;
    margin-bawah: 10px;
    }
  3. Di script.js, dapatkan elemen HTML dari kotak pencarian:
    const Kotak pencarian = dokumen.getElementById('kotak pencarian');
  4. Di dalam fungsi baru, buat larik baru yang berisi resep yang namanya cocok dengan input pencarian:
    fungsimencari(pertanyaan) {
    const filteredRecipes = resep.filter(resep => {
    kembali resep.nama.toLowerCase().includes (query.toLowerCase());
     });
    }
  5. Hapus daftar resep yang saat ini ditampilkan di layar:
    resepList.innerHTML = '';
  6. Ulangi setiap resep yang difilter yang cocok dengan hasil pencarian, dan buat elemen div baru:
    filteredRecipes.forEach(resep => {
    const resep El = dokumen.createElement('div'); 
    });
  7. Tambahkan konten HTML untuk resep yang difilter ke div:
    resepEl.innerHTML = `
    ${resep.nama}</h3>
    

    

    <kuat>Bahan-bahan:kuat></p>
    

      

       ${resep.bahan.peta(ingr =>`
    • ${ingr}
      • `      ).bergabung('')}
       </ul>
      <kuat>Metode:kuat></p>
      

      ${resep.metode}</p>
  8. Tambahkan kelas resep yang sama untuk gaya yang konsisten. Tambahkan div baru ke daftar yang ditampilkan di halaman:
    resepEl.classList.add('resep');
    resepList.appendChild (resepEl);
  9. Tambahkan pendengar acara untuk memanggil fungsi search() saat pengguna mengetik di bilah pencarian:
    searchBox.addEventListener('memasukkan', acara => pencarian (event.target.nilai));
  10. Di dalam fungsi handleDelete(), kosongkan kotak telusur jika pengguna menghapus item, untuk menyegarkan daftar:
    searchBox.nilai = '';
  11. Buka index.html di browser web untuk melihat bilah pencarian baru, dan tambahkan beberapa resep:
  12. Tambahkan nama resep ke dalam bilah pencarian untuk memfilter daftar resep:

Membuat Proyek Dengan HTML, CSS, dan JavaScript

Proyek ini mendemonstrasikan cara membuat antarmuka front-end untuk buku resep sederhana. Perhatikan bahwa tidak ada server backend dan aplikasi tidak menyimpan data; jika Anda menyegarkan halaman, perubahan Anda akan hilang. Satu kemungkinan ekstensi yang dapat Anda kerjakan adalah mekanisme untuk menyimpan dan memuat data menggunakan penyimpanan lokal.

Untuk meningkatkan keterampilan pengembangan web Anda, lanjutkan menjelajahi proyek menyenangkan lainnya yang dapat Anda buat di komputer Anda sendiri.