HTML, CSS ve JavaScript Kullanarak Tarif Kitabı Nasıl Oluşturulur

Bu proje, ön uç becerilerinizi geliştirmenize yardımcı olacak ve temel web standartlarını kullanarak bir arayüzü nasıl oluşturacağınızı öğretecektir.

Projeler, HTML, CSS ve JavaScript becerilerinizi geliştirmenin ve önemli kavram ve teknikleri pekiştirmenin harika bir yoludur.

Başlayabileceğiniz bir proje, Google Chrome veya Firefox gibi bir tarayıcıda çalıştırabileceğiniz bir tarif kitabıdır.

Tarif defterinde, web sayfasının sol tarafında, kullanıcının yeni tarifler ekleyebileceği bir bölüm bulunmaktadır. Sayfanın sağ tarafında, kullanıcı mevcut tarifleri görüntüleyebilir ve arayabilir.

Kullanıcıdan Yeni Tarif Eklemesini İsteme

İlk içeriği HTML, CSS ve JavaScript dosyalarına ekleyin. Web geliştirme kavramlarına aşina değilseniz, yapabileceğiniz birçok yer var. web geliştirmeyi çevrimiçi öğrenin.

Tam tarif kitabı örneğini burada da görüntüleyebilirsiniz. GitHub deposu.

Temel HTML yapısını index.html adlı yeni bir HTML dosyasına ekleyin:

html>
<html>
<KAFA>
<başlık>Tarif Uygulamasıbaşlık>
KAFA>
<vücut>
<gezinme>
<h1>Tarif Uygulamasıh1>
gezinme>
<divsınıf="konteyner">
 içerik burada 
div>
vücut>
html>

instagram viewer

Konteyner sınıfının içinde, sayfayı bir sol sütuna ve bir sağ sütuna ayırın:
```
<divsınıf="sol sütun">div>
<divsınıf="Sağ sütun">div>
```

Sol sütunun içine, kullanıcının yeni bir tarif eklemesi için bir form ekleyin. Kullanıcı tarifin adını, içerik listesini ve yöntemini girebilir:

<h3>Tarif Ekleh3><biçim>
<etiketiçin="tarif adı">İsim:etiket>
<giriştip="metin"İD="tarif adı"gerekli>
<br />
<etiketiçin="tarif-malzemeler">İçindekiler:etiket>
<metin alanıİD="tarif-malzemeler"satırlar="5"gerekli>metin alanı>
<br />
<etiketiçin="tarif yöntemi">Yöntem:etiket>
<metin alanıİD="tarif yöntemi"satırlar="5"gerekli>metin alanı>
<br /><düğmetip="göndermek">Tarif Ekledüğme>
biçim>

HTML dosyasının head etiketinde, styles.css adlı yeni bir CSS dosyasına bağlantı ekleyin. Dosyayı HTML dosyanızla aynı klasörde oluşturun:
```
<bağlantırel="stil sayfası"href="stil.css">
```

CSS dosyasının içine, genel sayfa için biraz stil ekleyin:

vücut {
font ailesi: sans Serif;
}gezinme {
arka plan rengi: #333;
konum: sabit;
tepe: 0;
Genişlik: 100%;
dolgu malzemesi: 20piksel;
sol: 0;
renk: beyaz;
Metin hizalama: merkez;
}
.konteyner {
görüntülemek: esnek;
esnek yön: sıra;
haklı içerik: arasındaki boşluk;
marj: 150piksel 5%;
}
.sol sütun {
Genişlik: 25%;
}.Sağ sütun {
Genişlik: 65%;
}

için biraz stil ekleyin Tarif Ekle biçim:

biçim {
görüntülemek: esnek;
esnek yön: kolon;
}etiket {
kenar boşluğu: 10piksel;
}
giriş[tür="metin"], metin alanı {
dolgu malzemesi: 10piksel;
kenar boşluğu: 10piksel;
sınır yarıçapı: 5piksel;
sınır: 1pikselsağlam#ccc;
Genişlik: 100%;
kutu boyutlandırma: sınır kutusu;
}düğme[tür="göndermek"] {
dolgu malzemesi: 10piksel;
arka plan rengi: #3338;
renk: #ffff;
sınır: hiçbiri;
sınır yarıçapı: 5piksel;
imleç: Işaretçi;
}

HTML dosyanızdaki gövde etiketinin alt kısmına, script.js adlı bir JavaScript dosyasına bağlantı ekleyin. Dosyayı aynı klasörde oluşturun:
```
<vücut>
 İçerik 
<senaryokaynak="script.js">senaryo>
vücut>
```
script.js içinde, querySelector yöntemini kullanarak DOM'u geçmek ve form öğesini sayfadan alın.
```
sabit biçim = belge.querySelector('biçim');
```
Kullanıcının forma girdiği tarifleri saklamak için yeni bir dizi oluşturun:
```
izin vermek tarifler = [];
```

Yeni bir işlevde, form aracılığıyla girilen ad, içerikler ve yöntem alanlarını alın. Ayrıca uygulayabilirsiniz istemci tarafı form doğrulama geçersiz girişleri önlemek veya zaten bir tarifin var olup olmadığını kontrol etmek için.

işlevişlemeGönder(etkinlik) {
// Varsayılan form gönderme davranışını engelle
 event.preventDefault();

// Reçete adını, malzemeleri ve yöntem giriş değerlerini alın
sabit isim Girişi = belge.querySelector("#tarif-adı");
sabit giriş Girdisi = belge.querySelector("#tarif malzemeleri");
sabit yöntemGirişi = belge.querySelector("#tarif yöntemi");
sabit ad = adInput.value.trim();
sabit malzemeler = ingrInput.value.trim().split(',').harita(Ben => i.trim());
sabit yöntem = methodInput.value.trim();
}

Girişler geçerliyse, bunları tarifler dizisine ekleyin:

eğer (isim && malzemeler.uzunluk > 0 && yöntem) {
sabit newRecipe = { ad, içerikler, yöntem };
 tarifler.push (yeniTarif);
}

Formdaki girişleri temizleyin:

nameInput.value = '';
ingrInput.value = '';
yöntemGirdi.değer = '';

handleSubmit() işlevinden sonra şunu ekleyin: olay dinleyicisi kullanıcı formu gönderdiğinde işlevi çağırmak için:
```
form.addEventListener('göndermek', işlemeGönder);
```
index.html dosyasını bir tarayıcıda açın ve soldaki formu görüntüleyin:

Eklenen Tarifler Nasıl Görüntülenir?

Tarif dizisinde saklanan tarifleri sayfanın sağ tarafında görüntüleyebilirsiniz.

HTML dosyasında, tarif listesini sağ sütunda görüntülemek için bir div ekleyin. Tarif yoksa bir mesaj görüntülemek için başka bir div ekleyin:
```
<divsınıf="Sağ sütun">
<divİD="tarif listesi">div>
<divİD="tarif yok">Tarifiniz yok.div>
div>
```

Tarif listesi için biraz CSS stili ekleyin:

#tarif listesi {
görüntülemek: Kafes;
ızgara-şablon-sütunları: tekrarlamak(otomatik sığdırma, en az en çok(300piksel, 1fr));
ızgara boşluğu: 20piksel;
}#tarifsiz {
görüntülemek: esnek;
arka plan rengi: #FFCCCC;
dolgu malzemesi: 20piksel;
sınır yarıçapı: 8piksel;
kenar boşluğu: 44piksel;
}

JavaScript dosyasının en üstünde, tarif listesini ve hata mesajını görüntülemek için kullanılan HTML öğelerini alın:
```
sabit tarifListesi = belge.querySelector("#tarif listesi");
sabit tarif yok = belge.getElementById("tarif yok");
```
Yeni bir işlevin içinde, tarifler dizisindeki her tarif arasında geçiş yapın. Her tarif için, o tarifi görüntülemek üzere yeni bir div oluşturun:
```
işlevtarifler göster() {
 tarifList.innerHTML = '';
 tarifler.her biri için((tarif, indeks) => {
sabit tarifDiv = belge.createElement('div');
 });
}
```

Adı, malzemeleri ve yöntemi görüntülemek için ayrı tarif div'ine biraz içerik ekleyin. Div ayrıca bir silme düğmesi içerecektir. Bu işlevi daha sonraki adımlarda ekleyeceksiniz:

tarifDiv.innerHTML = `
${tarif.adı}/h3>


<güçlü>İçindekiler:güçlü></p>



 ${tarif.malzemeler.map(ingr =>`${ingr}
`).katılmak('')}
 </ul>
<güçlü>Yöntem:güçlü></p>

${tarif.yöntem}/p>

Divi biçimlendirmek için bir sınıf ekleyin:
```
tarifDiv.classList.add('yemek tarifi');
```
Yeni div'ireciceptList HTML öğesine ekleyin:
```
tarifList.appendChild (tarifDiv);
```

Sınıfın stilini CSS dosyasına ekleyin:

.yemek tarifi {
sınır: 1pikselsağlam#ccc;
dolgu malzemesi: 10piksel;
sınır yarıçapı: 5piksel;
kutu gölgesi: 0 2piksel 4pikselrgba(0,0,0,.2);
}.yemek tarifih3 {
kenar boşluğu: 0;
kenar boşluğu: 10piksel;
}
.yemek tarifiUl {
marj: 0;
dolgu malzemesi: 0;
liste biçimi: hiçbiri;
}.yemek tarifiUlli {
kenar boşluğu: 5piksel;
}

Birden fazla tarif olup olmadığını kontrol edin. Öyleyse, hata mesajını gizleyin:
```
noRecipes.style.display = yemek tarifleri.uzunluk > 0? 'yok': 'esnek';
```
Yeni tarifi tarifler dizisine ekledikten sonra, handleSubmit() fonksiyonu içindeki yeni fonksiyonu çağırın:
```
displayRecipes();
```
index.html'yi bir tarayıcıda açın:
Tarifleri listeye ekleyin ve sağ tarafta görünmelerini izleyin:

Tarifler Nasıl Silinir?

üzerine tıklayarak tarifleri silebilirsiniz. Silmek tarifin talimatlarının altındaki düğme.

Sil düğmesi için biraz CSS stili ekleyin:

.sil düğmesi {
arka plan rengi: #dc3545;
renk: #ffff;
sınır: hiçbiri;
sınır yarıçapı: 5piksel;
dolgu malzemesi: 5piksel 10piksel;
imleç: Işaretçi;
}.sil düğmesi:vurgulu {
arka plan rengi: #c82333;
}

Bir tarifi silmek için JavaScript dosyasına yeni bir işlev ekleyin:
```
işlevkoluSil(etkinlik) {}
```

JavaScript olayını kullanarak, kullanıcının tıkladığı tarifin dizinini bulun:

eğer (event.target.classList.contains('sil düğmesi')) {
sabit dizin = event.target.dataset.index;
}

Seçilen tarifi tarifler dizisinden silmek için dizini kullanın:
```
tarifler.splice (dizin, 1);
```
Sayfada görüntülenen tarif listesini yenileyin:
```
displayRecipes();
```
Kullanıcı silme düğmesine tıkladığında handleDelete() işlevini çağırmak için bir olay dinleyicisi ekleyin:
```
tarifList.addEventListener('tıklamak', koluSil);
```
index.html'yi bir tarayıcıda açın. Sil düğmesini görüntülemek için bir tarif ekleyin:

Tarifler Nasıl Aranır?

Belirli bir tarifin olup olmadığını kontrol etmek için arama çubuğunu kullanarak tarifleri arayabilirsiniz.

Sağ sütunda, yemek tarifleri listesinin önüne bir arama çubuğu ekleyin:

<divİD="arama bölümü">
<h3>Tarif Listesih3>
<etiketiçin="arama kutusu">Aramak:etiket>
<giriştip="metin"İD="arama kutusu">
div>

Arama çubuğu etiketi için CSS stili ekleyin:

etiket[için="arama kutusu"] {
görüntülemek: engellemek;
kenar boşluğu: 10piksel;
}

script.js'de, arama kutusunun HTML öğesini alın:

sabit arama Kutusu = belge.getElementById('arama kutusu');

Yeni bir işlevin içinde, adı arama girdisiyle eşleşen tarifleri içeren yeni bir dizi oluşturun:

işlevaramak(sorgu) {
sabit filteredRecipes = tarifler.filter(yemek tarifi => {
geri dönmek yemek tarifi.adı.toLowerCase().includes (query.toLowerCase());
 });
}

Şu anda ekranda görüntülenen tarifler listesini temizleyin:
```
tarifList.innerHTML = '';
```
Arama sonucuyla eşleşen her filtrelenmiş tarifte dolaşın ve yeni bir div öğesi oluşturun:
```
filteredRecipes.forEach(yemek tarifi => {
sabit tarifEl = belge.createElement('div'); 
});
```

Filtrelenmiş tarif için HTML içeriğini div'e ekleyin:

tarifEl.innerHTML = `
${tarif.adı}/h3>


<güçlü>İçindekiler:güçlü></p>



 ${tarif.malzemeler.map(ingr =>`${ingr}
`).katılmak('')}
 </ul>
<güçlü>Yöntem:güçlü></p>

${tarif.yöntem}/p>

Tutarlı stil için aynı tarif sınıfını ekleyin. Yeni div'i sayfada görüntülenen listeye ekleyin:
```
yemek tarifiEl.sınıfList.add('yemek tarifi');
tarifList.appendChild (tarifEl);
```
Kullanıcı arama çubuğuna yazdığında search() işlevini çağırmak için bir olay dinleyicisi ekleyin:
```
searchBox.addEventListener('giriş', olay => arama (event.target.value));
```
Kullanıcı bir öğeyi silerse, listeyi yenilemek için handleDelete() işlevinin içinde arama kutusunu temizleyin:
```
searchBox.value = '';
```
Yeni arama çubuğunu görüntülemek için index.html dosyasını bir web tarayıcısında açın ve bazı tarifler ekleyin:
Tarif listesini filtrelemek için arama çubuğuna bir tarif adı ekleyin:

HTML, CSS ve JavaScript ile Projeler Hazırlamak

Bu proje, basit bir tarif kitabı için bir ön uç arayüzün nasıl oluşturulacağını gösterir. Arka uç sunucusu olmadığını ve uygulamanın verileri saklamadığını unutmayın; sayfayı yenilerseniz değişikliklerinizi kaybedersiniz. Üzerinde çalışabileceğiniz olası bir uzantı, localStorage kullanarak verileri kaydetme ve yükleme mekanizmasıdır.

Web geliştirme becerilerinizi geliştirmek için kendi bilgisayarınızda oluşturabileceğiniz diğer eğlenceli projeleri keşfetmeye devam edin.

About Technology - denizatm.com

HTML, CSS ve JavaScript Kullanarak Tarif Kitabı Nasıl Oluşturulur

Kullanıcıdan Yeni Tarif Eklemesini İsteme

Eklenen Tarifler Nasıl Görüntülenir?

${tarif.adı}/h3>

Tarifler Nasıl Silinir?

Tarifler Nasıl Aranır?

${tarif.adı}/h3>

HTML, CSS ve JavaScript ile Projeler Hazırlamak

Kategoriler

Recent Post

Bir iPhone 5 için en iyi Jawbone veya diğer kablosuz başlık nedir?

665MHz RAM ve 1600MHz RAM arasında gözle görülür bir fark var mı?

Facebook hesabı kullanıcı adımı nasıl değiştirebilirim?