JavaScript ile Basit Bir To-Do List Uygulaması Oluşturma

Merhaba arkadaşlar, bugün sizlere JavaScript kullanarak basit bir To-Do List uygulaması nasıl oluşturulacağını göstereceğim. Bu uygulama, kullanıcıların yapılacak görevleri eklemesine, işaretlemesine ve silebilmesine olanak tanır.

Kodun tamamını aşağıda bulabilirsiniz:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>batuhansahin.net.tr | To Do List</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 600px;
        }

        h1 {
            color: #333;
        }

        input[type="text"] {
            width: calc(100% - 24px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            background-color: #0056b3;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #004494;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            background-color: #f9f9f9;
            margin: 5px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        li.completed {
            background-color: #d4edda;
            color: #155724;
            text-decoration: none;
        }

        .deleteButton, .completeButton {
            background-color: red;
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            margin-left: 5px;
        }

        .completeButton {
            background-color: green;
        }

        .deleteButton:hover, .completeButton:hover {
            opacity: 0.8;
        }

        .buttonContainer {
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>To Do List</h1>
        <input type="text" id="taskInput" placeholder="Yeni görev ekle...">
        <button id="addTaskButton">Ekle</button>
        <ul id="taskList"></ul>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', loadTasks);

        document.getElementById('addTaskButton').addEventListener('click', function() {
            const taskInput = document.getElementById('taskInput');
            const taskText = taskInput.value.trim();

            if (taskText !== "") {
                addTask(taskText);
                taskInput.value = "";
            }
        });

        function addTask(taskText, isCompleted = false) {
            const taskList = document.getElementById('taskList');

            const listItem = document.createElement('li');
            if (isCompleted) {
                listItem.classList.add('completed');
            }
            listItem.textContent = taskText;

            const buttonContainer = document.createElement('div');
            buttonContainer.className = 'buttonContainer';

            const completeButton = document.createElement('button');
            completeButton.textContent = 'Yapıldı';
            completeButton.className = 'completeButton';
            completeButton.addEventListener('click', function() {
                listItem.classList.toggle('completed');
                saveTasks();
            });

            const deleteButton = document.createElement('button');
            deleteButton.textContent = 'Sil';
            deleteButton.className = 'deleteButton';
            deleteButton.addEventListener('click', function() {
                taskList.removeChild(listItem);
                saveTasks();
            });

            buttonContainer.appendChild(completeButton);
            buttonContainer.appendChild(deleteButton);

            listItem.appendChild(buttonContainer);
            taskList.appendChild(listItem);

            saveTasks();
        }

        function saveTasks() {
            const tasks = [];
            document.querySelectorAll('#taskList li').forEach(function(task) {
                tasks.push({
                    text: task.firstChild.textContent,
                    completed: task.classList.contains('completed')
                });
            });
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }

        function loadTasks() {
            const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
            tasks.forEach(function(task) {
                addTask(task.text, task.completed);
            });
        }
    </script>
</body>
</html>

Bu kod, HTML, CSS ve JavaScript’i bir araya getirir. HTML bölümünde, kullanıcı arayüzü öğelerini tanımlarız. CSS, sayfamızı stilize etmek için kullanılırken, JavaScript işlevselliği sağlar.

To-Do List uygulaması, tarayıcıda yerel depolama kullanarak görevleri kaydeder. Böylece, sayfayı yeniden yüklediğinizde veya tarayıcıyı kapattığınızda bile görevleriniz saklanır.

Umarım bu kod parçası size JavaScript ve basit uygulamaların nasıl oluşturulacağına dair bir fikir verir. Herhangi bir sorunuz varsa, lütfen yorumlarda belirtin!

Batuhan Şahin

Batuhan Şahin

Ülke:

Şehir:

Yaş:

İngilizce

Almanca

WordPress

HTML

CSS

Js

PHP

JavaScript ile Basit Bir To-Do List Uygulaması Oluşturma