HTML ve CSS ile To-Do List (Yapılacaklar Listesi) Yapımı

Web geliştirmeye yeni başlayanlar için basit ve görsel olarak hoş bir Yapılacaklar Listesi (To-Do List) yapmak oldukça eğlencelidir. Bu yazıda, sadece HTML ve CSS kullanarak modern bir To-Do List tasarımını nasıl oluşturabileceğinizi göstereceğim.

HTML Yapısı

İlk olarak, yapılacaklar listemizin temel HTML yapısını oluşturalım. Bu yapı, bir başlık, tarih ve liste öğelerinden oluşmaktadır.

<div class="frame">
  <div class="center">
    <section class="todo-cmp">
      <header class="todo-cmp__header">
        <h2>Cuma</h2>
        <p>4 Mart 2016</p>
      </header>

      <ul class="todo-cmp__list">
        <li>
          <label for="todo-01">
            <input id="todo-01" type="checkbox">
            <span>Şablonu aç</span>
          </label>
        </li>
        <li>
          <label for="todo-02">
            <input id="todo-02" type="checkbox">
            <span>Yapılacaklar listesi oluştur</span>
          </label>
        </li>
        <li>
          <label for="todo-03">
            <input id="todo-03" type="checkbox">
            <span>Bir şeyler yaz</span>
          </label>
        </li>
        <li>
          <label for="todo-04">
            <input id="todo-04" type="checkbox">
            <span>Görevi tamamla</span>
          </label>
        </li>
      </ul>
    </section>
  </div>
</div>

Bu HTML yapısında dikkat edilmesi gereken noktalar:

• Her yapılacak görev bir <li> içinde yer alır.
• Görevlerin yanında bir checkbox bulunur, bu sayede tamamlandığında işaretlenebilir.
• label etiketi, checkbox ve görev metnini ilişkilendirir, kullanıcı deneyimini artırır.

CSS ile Tasarım

Şimdi listeye stil verelim ve modern bir görünüm kazandıralım.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px rgba(0,0,0,0.1);
  overflow: hidden;
  color: #333;
  font-family: 'Open Sans', Helvetica, sans-serif;
  background: linear-gradient(45deg, #fda231 0%, #fbb731 60%, #fdca31 100%);
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.todo-cmp {
  background: #ffffff;
  color: #497081;
  padding: 10px 30px;
  border-radius: 5px;
  box-shadow: 2px 2px 14px rgba(0,0,0,0.15);
  width: 180px;
}

.todo-cmp__header {
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

.todo-cmp__header h2 {
  font-weight: 600;
  font-size: 1.2rem;
  margin: 4px auto;
  padding: 0;
}

.todo-cmp__header p {
  font-size: 0.8rem;
  padding: 0 0 5px;
  margin: 4px auto;
}

.todo-cmp__list {
  list-style: none;
  padding: 0;
}

.todo-cmp__list li {
  padding: 10px 0 15px;
  text-align: left;
  width: 100%;
}

.todo-cmp__list label {
  cursor: pointer;
  font-size: 0.82rem;
  width: 100%;
  display: block;
}

.todo-cmp__list input {
  float: right;
  opacity: 0;
}

.todo-cmp__list span {
  position: relative;
  display: block;
  transition: all 550ms ease-in-out;
}

.todo-cmp__list input + span::after {
  content: "";
  display: block;
  border: 1px solid #497081;
  border-radius: 13px;
  height: 13px;
  width: 13px;
  position: absolute;
  right: 0;
  top: 1px;
}

.todo-cmp__list input + span::before {
  content: "✔";
  display: block;
  font-size: 22px;
  height: 13px;
  width: 13px;
  position: absolute;
  right: -2px;
  top: -8px;
  opacity: 0;
}

.todo-cmp__list input:checked + span {
  color: #ccc;
}

.todo-cmp__list input:checked + span::after {
  opacity: 0;
  height: 17px;
  width: 17px;
  top: -2px;
  right: -2px;
}

.todo-cmp__list input:checked + span::before {
  opacity: 1;
}

Canlı Demo

Açıklamalar:

1. .frame: Listemizi ortalayan ve gradient arkaplan sağlayan ana çerçeve.
2. .todo-cmp: Beyaz kutu, gölge ve köşe yuvarlama ile listeyi öne çıkarır.
3. input + span::before: Checkbox işaretini gösterir.
4. input:checked: Görev tamamlandığında renk değişimi ve işaret gösterimi.

Sonuç

Bu basit örnekle, sadece HTML ve CSS kullanarak şık bir Yapılacaklar Listesi tasarlayabilirsiniz. Daha sonra isterseniz JavaScript ekleyerek görev ekleme, silme veya tarih filtreleme gibi özellikler de ekleyebilirsiniz.