Tailwind CSS ve JavaScript ile Temel Kanban Tahtası Oluşturma

Tailwind CSS ve JavaScript ile Temel Kanban Tahtası Oluşturma

Merhaba! Ben Fatih Soysal ve bugün sizlerle birlikte Tailwind CSS ve JavaScript kullanarak basit ve işlevsel bir Kanban tahtası oluşturmayı öğreneceğiz. Bu rehber, proje yönetiminde oldukça popüler olan Kanban yöntemini uygulamak için harika bir başlangıç noktası olacaktır. Öncelikle, temel HTML yapısını oluşturarak başlayacağız. Daha sonra, Tailwind CSS’in gücüyle arayüzü şekillendireceğiz ve son olarak, JavaScript ile sürükle bırak işlevselliğini ekleyerek tahtanın dinamik olmasını sağlayacağız. Hazırsanız başlayalım!

HTML Yapısı

İlk olarak, Kanban tahtasının temel HTML yapısını oluşturalım. Bu yapıda, her bir sütunu temsil eden üç div elemanı ve bunların içine yerleştirilecek görev kartlarını temsil eden div elemanları bulunur. Ayrıca, daha sonra JavaScript ile etkileşim kuracağımız id özniteliklerini de ekleyeceğiz.

<div id="kanban-board">
  <div class="column" id="todo">
    <h2>Yapılacaklar</h2>
    <div class="card" draggable="true">Görev 1</div>
    <div class="card" draggable="true">Görev 2</div>
  </div>
  <div class="column" id="progress">
    <h2>Devam Edenler</h2>
  </div>
  <div class="column" id="done">
    <h2>Tamamlananlar</h2>
  </div>
</div>

Tailwind CSS ile Stil Uygulama

Şimdi ise, Tailwind CSS ile oluşturduğumuz HTML yapısına stil uygulayalım. Tailwind’in hazır sınıflarını kullanarak, hızlı ve kolay bir şekilde şık bir arayüz oluşturabiliriz. Aşağıdaki kod bloğu, sütunların ve kartların stilini düzenlemek için kullanılabilecek bir örnektir. Daha detaylı stilleme için Tailwind CSS dökümantasyonuna göz atabilirsiniz.

/* Tailwind CSS sınıfları ile stil uygulama */
#kanban-board {
  display: flex;
}

.column {
  width: 30%;
  padding: 1rem;
  border: 1px solid #ccc;
  margin: 0 1rem;
}

.card {
  background-color: #f0f0f0;
  padding: 1rem;
  margin-bottom: 0.5rem;
  cursor: move;
}

JavaScript ile Sürükle Bırak İşlevselliği

Son olarak, JavaScript kullanarak sürükle bırak işlevselliğini ekleyeceğiz. Bu kısım, biraz daha karmaşık olsa da, addEventListener ve DataTransfer nesnelerini kullanarak kolayca gerçekleştirilebilir. Aşağıdaki kod bloğu, sürükle bırak işlemini yönetmek için temel bir JavaScript örneği sunmaktadır. Daha gelişmiş özellikler için, MDN Drag and Drop API dökümantasyonuna bakabilirsiniz.

// JavaScript ile sürükle bırak işlevselliği
const kanbanBoard = document.getElementById('kanban-board');
kanbanBoard.addEventListener('dragover', (e) => {
  e.preventDefault();
});

// ... (Diğer JavaScript kodları)

Bu örnek, sürükle bırak işleminin temelini oluşturmaktadır. Gerçek bir Kanban tahtası için, görevlerin veritabanında tutulması, silme ve düzenleme işlemlerinin eklenmesi ve daha gelişmiş sürükle bırak özellikleri gerekecektir. Bu noktada, daha gelişmiş özellikler için bir JavaScript framework’ü (React, Vue veya Angular gibi) kullanmayı düşünebilirsiniz.

Umarım bu makale, Tailwind CSS ve JavaScript kullanarak basit bir Kanban tahtası oluşturmanıza yardımcı olmuştur. Daha fazla bilgi ve kaynak için web sitemi ziyaret edebilirsiniz. Sorularınız ve önerileriniz için yorum bırakmaktan çekinmeyin!

#Etiketler: Kanban, Tailwind CSS, JavaScript, proje yönetimi, agile, todo list, kartlar, sütunlar, sürükle bırak, web geliştirme