Javascript to-do list uygulaması gerçekleştireceğiz. Bu uygulamada alınan verileri tarayıcının kendi deposu olarak bilinen localStorage içerisinde saklayacağız. Böylece sayfanın yenilenmesi ve kapatılıp tekrar açılması gibi durumlarda, verilerin kaybolmamasını sağlayacaktır. Böylece harici bir veritabanı kullanmadan verileri saklamış olacağız. Tabi bu veriler, oluşturulan bilgisayarın, o an açılan tarayıcısı için geçerli olacaktır. Buda geçici bir çözümdür.
Bu işlemi sağlayabilmek için, HTML, CSS ve JS kodlarını kullanacağız. Bu işlemleri adım adım gerçekleştirelim.
HTML Kodlaması
Bu uygulama için ilk olarak HTML iskeletini oluşturuyoruz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List Uygulaması</title>
</head>
<body>
<h1>To-Do List</h1>
<div class="container">
<div class="form">
<input id="taskInput" type="text" placeholder="Yeni bilgi ekle">
<button id="addButton">Ekle</button>
</div>
<ul id="taskList"></ul>
</div>
</body>
</html>
Bu şekilde iskeleti oluşturduktan sonra, hazırlamış olduğumuz uygulamanın göze hitap edebilmesi için CSS kodlarını yazalım.
CSS Kodlaması
Burada uygulamanın güzel görünmesi ve daha kullanışlı olmasını sağlıyoruz.
body{font-family:Arial,sans-serif;background-color:#f2f2f2;color:#333}
h1{text-align:center;margin-top:100px}
.container{width:80%;margin:0 auto;background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.2)}
.form{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
input[type="text"]{flex:1;padding:10px;border:none;border-radius:3px;font-size:16px;box-shadow:0 0 5px rgba(0,0,0,0.2)}
button{padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:3px;font-size:16px;cursor:pointer}
ul{list-style:none;padding:0;margin:0}
li{display:flex;justify-content:space-between;align-items:center;padding:10px;margin-bottom:10px;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.2)}
li span{flex:1;margin-right:10px}
li button{padding:5px;background-color:#dc3545;color:#fff;border:none;border-radius:3px;cursor:pointer}
Böylece uygulamamızın iskeletini ve görünümünü hazırlamış oluyoruz. Sırada bu uygulamanın işlevselliğini kazanması geliyor.
JS Kodlaması
Javascript kodlamasında; bir kaç seçici, ekleme ve listeleme işlemleri için gerekli kodlamayı yapıyoruz.
const taskInput = document.getElementById("taskInput");
const addButton = document.getElementById("addButton");
const taskList = document.getElementById("taskList");
const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
// Sayfa çalıştırıldığında, ekli verileri listelendiriyoruz.
loadTasks();
// Yeni ekleme yapma için tetikleyici
addButton.addEventListener("click", addTask);
// Yeni veri ekleme fonksiyonu
function addTask(){
const task = taskInput.value.trim();
if (task === "") {
alert("Boş İçerik Giremezsiniz");
return;
}
tasks.push(task);
localStorage.setItem("tasks", JSON.stringify(tasks));
taskInput.value = "";
loadTasks();
}
// Verileri listeleme fonksiyonu
function loadTasks(){
taskList.innerHTML = "";
tasks.forEach(function (task, index){
const li = document.createElement("li");
const span = document.createElement("span");
const deleteButton = document.createElement("button");
span.innerText = task;
deleteButton.innerText = "Sil";
deleteButton.addEventListener("click", function (){
tasks.splice(index, 1);
localStorage.setItem("tasks", JSON.stringify(tasks));
loadTasks();
});
li.appendChild(span);
li.appendChild(deleteButton);
taskList.appendChild(li);
});
}
Böylece kullanışlı bir to-do list oluşturmuş oluyoruz. Veri girişi yaptığımızda, girilen bilgiler localStorage ile saklancaktır. Bu uygulamayı bir de tam haliyle paylaşalım. Bu şekilde daha kolay ulaşabilir ve test edebilirsiniz.
Uygulamanın Tam Hali
Uygulamayı yukarıdaki adımlarla hazırlamış olduk. HTML, CSS ve JS kodlarıyla birlikte bu uygulamayı hazırladık. Şimdi bu üç adımı birleştirerek sonuca geçelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List Uygulaması</title>
<style>
body{font-family:Arial,sans-serif;background-color:#f2f2f2;color:#333}
h1{text-align:center;margin-top:100px}
.container{width:80%;margin:0 auto;background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.2)}
.form{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
input[type="text"]{flex:1;padding:10px;border:none;border-radius:3px;font-size:16px;box-shadow:0 0 5px rgba(0,0,0,0.2)}
button{padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:3px;font-size:16px;cursor:pointer}
ul{list-style:none;padding:0;margin:0}
li{display:flex;justify-content:space-between;align-items:center;padding:10px;margin-bottom:10px;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.2)}
li span{flex:1;margin-right:10px}
li button{padding:5px;background-color:#dc3545;color:#fff;border:none;border-radius:3px;cursor:pointer}
</style>
</head>
<body>
<h1>To-Do List</h1>
<div class="container">
<div class="form">
<input id="taskInput" type="text" placeholder="Yeni bilgi ekle">
<button id="addButton">Ekle</button>
</div>
<ul id="taskList"></ul>
</div>
<script>
const taskInput = document.getElementById("taskInput");
const addButton = document.getElementById("addButton");
const taskList = document.getElementById("taskList");
const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
// Sayfa çalıştırışdığında, ekli verileri listelendiriyoruz.
loadTasks();
// Yeni ekleme yapma için tetikleyici
addButton.addEventListener("click", addTask);
// Yeni veri ekleme fonksiyonu
function addTask(){
const task = taskInput.value.trim();
if (task === "") {
alert("Boş İçerik Giremezsiniz");
return;
}
tasks.push(task);
localStorage.setItem("tasks", JSON.stringify(tasks));
taskInput.value = "";
loadTasks();
}
// Verileri listeleme fonksiyonu
function loadTasks(){
taskList.innerHTML = "";
tasks.forEach(function (task, index){
const li = document.createElement("li");
const span = document.createElement("span");
const deleteButton = document.createElement("button");
span.innerText = task;
deleteButton.innerText = "Sil";
deleteButton.addEventListener("click", function (){
tasks.splice(index, 1);
localStorage.setItem("tasks", JSON.stringify(tasks));
loadTasks();
});
li.appendChild(span);
li.appendChild(deleteButton);
taskList.appendChild(li);
});
}
</script>
</body>
</html>
Böylelikle uygulamamızı tamamlamış oluyoruz. Javascript to-do list uygulamasını hazırlamış oluyoruz. Yukarıda yer alan kodları dilediğiniz gibi değişiklik yaparak kullanabilirsiniz.