Geliştiriciler yeni bir teknolojiyi öğrenirken genelde yapılacaklar listesi uygulaması yapmayı severler. Bunu tercih etmelerinde temel sebep olarak öğrenmek için birebir olmasına bağlıyorum. Çünkü herhangi bir dilin birçok özelliğini bir araya getirerek ortaya çıkarılabilecek güzel bir örnektir.  Bugün ben de ileride vereceğim temel web teknolojileri eğitimine hazırlık olması ve öğrencilerin geri dönüp bakabileceği bir materyal olması adına, sıradan bir web tarayıcısı üzerinden çalışacak bu basit ama öğretici uygulamanın yapımını anlatmak istiyorum.

Anlatıma başlamadan önce HTML, CSS ve JavaScript dillerini en azından temel seviyede bildiğinizi varsayıyorum.

Şimdi favori metin editörümüzü açalım ve uygulamanın iskeleti niteliğinde olacak HTML kodlarını yazmaya başlayalım.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Yapılacaklar Listesi</title>
  </head>
  <body>
    <h1>Yapılacaklar Listesi</h1>
  </body>
</html>

Hiç şüpheniz olmasın ki, şimdiye dek ziyaret ettiğiniz bütün web sayfaları bu iskelet üzerinden kurulmuştur. Bizim uygulamamızında bir web tarayıcısı üzerinden çalışacağını düşünerek böyle başlıyor olmamız çok doğal değil mi?

Eğer yukarıdaki kodları editörünüzde yazıp .html uzantısı olarak kaydedip çıktıktan sonra kaydettiğiniz dosya sembolüne çift tık yaparsanız, işletim sisteminiz büyük olasılıkla default olan web tarayıcınızla kodları çalıştıracak ve sizi sol üst köşede “Yapılacaklar Listesi” başlığı dışında hiçbir şey içermeyen boş bir web sayfasıyla selamlayacaktır. 🙂

HTML’in en işlevsel ve en çok kullanılan özelliklerinden biri olan bir girdi kutusu ekleyelim. Kodlar “Yapılacaklar Listesi” başlığının bulunduğu kod satırının hemen altına yazılacak.

<form>
  <label>
    Görev:
    <input type="text" placeholder="Ekmek alınacak">
  </label>
  <button type="button">
    Ekle
  </button>
</form>

Yukarıdaki kodlarıda editörümüzü kullanarak yapılacaklar listesi uygulamamızın dosyasına ekleyip kaydettikten sonra, çıkıp dosyayı yeniden tarayıcımızla açalım ve geri dönüş olarak nasıl bir sonuç verecek görelim.

Sonuç olarak basit bir girdi kutusu ve bir butonun projeye dahil olduğunu ama bir şeyler yazdığımızda ve butona bastığınızda hiçbir şey olmayacağını göreceğiz.

Biz uygulamamızı kullanırken girdi kutusuna yapılacak görevler ekleyip butona basıp kaydetmeyi ve hemen aşağıda da yapılacakları listelemek istiyoruz. Şimdi aşağıdaki kodları <form>  etiketinin bittiği satırın hemen ardındaki satıra ekleyelim ve ne demek istediğimi görelim.

<ul>
  <li>
    <label>
      <input type="checkbox">
      Sinemaya gidilecek
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">
      Kod yazılacak
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">
      Yemek yapılacak
    </label>
  </li>
</ul>

Yapılacaklar listesi uygulamamızın iskeletini oluşturduk. Şimdilik hoş bir görüntüden ve interaktiviteden uzak olmasına rağmen yine kendimizi tebrik edelim. Hiç yoktan ortaya bir şeyler koyduk ama değil mi? 🙂

Uygulamamızı dinamik bir hale getirmek için DOM teknolojisinden JavaScript yazarak faydalanacağız ama ondan önce kodlarımıza birkaç ekleme yaparsak bizim için iyi olacak.

<form>
  <label>
    Görev:
    <input id="yeni-gorev" type="text" placeholder="Ekmek alınacak">
  </label>
  <button type="button" id="gorev-ekle">
    Ekle
  </button>
  </form>
  <ul id="cevreleyici">
  <li>
    <label>
      <input type="checkbox">
      Sinemaya gidilecek
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">
      Kod yazılacak
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">
      Yemek yapılacak
    </label>
  </li>
</ul>

HTML kodlarımız içerisine id’lerimizi eklediğimize göre şimdi sıra geldi JavaScript yazmaya. Bunun için önce <script>  etiketlerini </body>  etiketlerinden hemen önce ekleyelim. Daha sonra <script> etiketleri arasında JavaScript kullanarak DOM manipülasyonumuzu yapalım.

var gorevEkleButonu = document.querySelector("#gorev-ekle");
var yeniGorevKutusu = document.querySelector("#yeni-gorev");
var cevreleyici = document.querySelector("#cevreleyici");

gorevEkleButonu.addEventListener("click", function(event) {
  var gorevAdi = yeniGorevKutusu.value;
  yeniGorevKutusu.value = "";
  cevreleyici.insertAdjacentHTML("afterbegin", gorevAdi);
});

Eğer yukarıdaki işlemi de başarıyla gerçekleştirdiyseniz girdi kutusuna yazdığınız görevleri, ekle butonunu tıkladıktan sonra sayfada yan yana belirdiklerini görüyor olmalısınız.

Ama biz görevlerin yan yana değil, liste halinde sıralanmasını istiyoruz. Ayrıca yanında da kontrol kutusu olmasını istiyoruz ki tamamladığımız görevleri işaretleyebilelim.

Şimdi daha önce eklediğimiz <script> etiketinden hemen önce bir başkasını ekleyelim ama bu seferki type özelliği olarak “text/template” id özelliği olarak “liste-icerik” değerini alsın.

<li>
  <label>
    <input type="checkbox">
    <!-- Görev_ismi -->
  </label>
</li>

Yukarıdaki kodlar yeni <script> kodlarıyla birlikte yapılacaklar listesi uygulaması için şablon görevi görecek. Şimdi son eklemeleri de yapalım ve uygulama tamamen çalışır hale gelsin olur mu?

var gorevEkleButonu = document.querySelector("#gorev-ekle");
var yeniGorevKutusu = document.querySelector("#yeni-gorev");
var cevreleyici = document.querySelector("#cevreleyici");
var sablonElemani = document.querySelector("#liste-icerik-sablonu");
var sablon = sablonElemani.innerHTML;

gorevEkleButonu.addEventListener('click', function(event) {
  var gorevAdi = yeniGorevKutusu.value;
  yeniGorevKutusu.value = "";

  var gorevHTML = sablon.replace("<!-- Görev_ismi -->", gorevAdi);
  cevreleyici.insertAdjacentHTML("afterbegin", gorevHTML);
});

Eğer buraya kadar geldiysek görünüm olarak hoş olmasa da girdi kutusuna yazdığımız görevleri, ekle butonunu tıkladıktan sonra liste halinde sıralayabilen bir uygulamaya sahibiz.

Şimdi kendinizi tebrik edip ufak bir ara verebilirsiniz. Ne bileyim bir çay felan içmek için oturduğunuz yerden kalkın ve sonra geri gelin bence 🙂

Biliyorsunuz ki HTML ile bir web sayfasının iskeletini oluşturuyoruz, JavaScript ile de o iskeleti adeta canlandırıyoruz.  Sıra geldi daha modern ve kullanıcı dostu bir görünüm için CSS dilini kullanarak yapılacaklar listesi uygulamamızı güzelleştirmeye.

Buraya kadar bütün kodlarımızı .html uzantılı bir dosyaya yazıyorduk. Görünen o ki kod kalabalıklığı arttıkça içinden çıkılmaz bir karmaşaya doğru gideceğiz bu yüzden profesyonel web geliştiricilerinin de tercih ettiği gibi HTML, CSS ve JavaScript kodlarını ayrı ayrı dosyalara yazarak devam edeceğiz. Şimdi yapmanız gereken yeni bir klasör açıp .html uzantılı dosyamızı içine göndermek. Daha sonra editörümüzde yeni iki tane belge oluşturup birini .css diğerini de .js uzantılı olarak kaydedelim.

İlk önce yazdığımız <script> etiketlerinin arasındaki JavaScript kodlarını oradan alıp .js uzantılı dosyamıza yazalım. Daha sonra <script> etiketimizi <script src=”dosyaismi.js”> olarak güncelleyelim. Bu şekilde ayrı bir dosya içerisine aldığımız JavaScript kodlarını ana belgemize dahil etmiş olduk.

Şimdi de çok benzer bir işlemi CSS dosyamız için yapalım. <link rel=”stylesheet” href=”dosyaismi.css”> etiketini HTML dosyamızdaki <head> etiketleri arasına yazalım.

Bunları başarılı bir şekilde yaptıysak eğer .html uzantılı dosyamızı web tarayıcımızla açtığımızda işlevselliği bozulmamış halde bıraktığımız gibi durduğunu görüyor olacağız.

Bizim amacımız yapılacaklar listesi uygulamamızı daha hoş bir görünüme kavuşturmak olduğu için .css uzantılı dosyamızı açalım ve aşağıdaki kodları oraya yazalım.

body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4em;
  width: 600px;
  margin: 96px auto;
}

#cevreleyici {
  padding: 0;
  margin-top: 64px;
}

#yeni-gorev {
  width: 360px;
  font-size: 16px;
  line-height: 1.4em;
}

Yukarıdaki CSS kodlarıyla sola dayalı ve daha küçük görünümlü olan uygulamamızı web tarayıcısıyla açtığımızda ortalanmış olarak ayarladık. Bildiğiniz üzere CSS seçiciler, özellikler ve değerler yardımıyla HTML kodlarımızı renk, boyut, konum olarak etkiler ve genellikle göze hoş gelir hale getirir. Temel seviyede CSS bildiğinizi varsaydığım için kodları satır satır açıklayarak zaman kaybetmek istemiyorum o yüzden devam edelim.

HTML dosyamız içinde bulunan uygulamanın şablonunu oluşturan <script> etiketi içerisindeki kodları aşağıdaki gibi güncelleyelim.

<li class="gorev">
  <label>
    <input type="checkbox">
    <!-- Görev_ismi -->
  </label>
</li>

Yukarıda eklediğimiz class’ı kullanarak CSS yazalım. Aşağıdaki kodları CSS dosyamızın içerisine yazalım. Daha sonra ne yaptığımızı konuşalım.

.gorev {
  list-style: none;
  font-size: 22px;
  line-height: 1.8em;
  margin-bottom: 3px;
  background-color: rgb(201, 201, 201);
  border-radius: 10px;
  color: white;
  width: 500px;
}

HTML dosyamızı web tarayıcımız yardımıyla açıp görüntülediğimizde bir değişiklik yokmuş gibi olacak ama yeni görev eklemeyi deneyince, yapılacaklar listemizdeki yeni eklenen görevlerin farklı bir şekilde lsitelendiğini görebiliriz. Hadi daha gözle görünür değişiklikler yapalım!

button {
  font-size: 20px;
  line-height: 1.4em;
  border: none;
  border-radius: 5px;
  color: white;
  background: #47b3ff;
}

Yukarıdaki kodları da ilave ettikten sonra yapılacaklar listesi uygulamamızı açıp baktığımızda değişiklikleri fark ediyor olacağız. Son olarak yazdığımız HTML kodlarından gereksiz olanları silmenizi istiyorum. Mesela h1 etiketleri arasındaki yazıyı kaldırabilir ve ayrıca #cevreleyici id’sine sahip etiketlerin içindeki liste elemanlarını silebilirsiniz.

Uygulamamızda şimdiye kadar epey yol kat ettik. Aslında hala bazı eklemeler yapabiliriz ama burdan sonrasını sizlerin yaratıcılığına bırakıyorum.

Bu yazıdaki amacım HTML, CSS ve JavaScript’i yeni öğrenmiş birine nasıl parçaları bir araya getirerek bir şeyler üretilebileceğini göstermekti. Ayrıca hiç bilmeyenlerin bile en azından bu teknolojilerin ne işe yaradıklarını ve neler yapılabileceğini öğrendiklerini düşünüyorum.