본문 바로가기
Frontend/Javascript

[Javascript] Javascript 예제(심화)

by cogito21_js 2024. 6. 8.
반응형

JavaScript의 고급 기능을 사용하여 할 일 목록(To-Do List) 애플리케이션을 구현해 보겠습니다. 이 예제에서는 할 일 추가, 삭제, 편집, 필터 기능을 포함하며, LocalStorage를 사용하여 데이터를 저장합니다.

프로젝트: 고급 To-Do List 애플리케이션

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="todo-container">
        <h1>Advanced To-Do List</h1>
        <input type="text" id="todo-input" placeholder="Enter a new task">
        <button id="add-todo">Add</button>
        <select id="filter-todos">
            <option value="all">All</option>
            <option value="completed">Completed</option>
            <option value="uncompleted">Uncompleted</option>
        </select>
        <ul id="todo-list"></ul>
        <button id="clear-all">Clear All</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 코드

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

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

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

button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

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

li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li.completed {
    text-decoration: line-through;
}

li button {
    background-color: #f44336;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
}

li button.edit {
    background-color: #2196F3;
}

select {
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

JavaScript 코드

// script.js
document.addEventListener('DOMContentLoaded', loadTasks);

document.getElementById('add-todo').addEventListener('click', function() {
    let input = document.getElementById('todo-input');
    let newTask = input.value;

    if (newTask !== '') {
        addTask(newTask);
        input.value = '';
    }
});

document.getElementById('todo-input').addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        document.getElementById('add-todo').click();
    }
});

document.getElementById('clear-all').addEventListener('click', clearAllTasks);

document.getElementById('filter-todos').addEventListener('change', filterTasks);

function addTask(task) {
    let li = document.createElement('li');
    li.textContent = task;

    let editButton = document.createElement('button');
    editButton.textContent = 'Edit';
    editButton.classList.add('edit');
    editButton.addEventListener('click', function() {
        let newTask = prompt('Edit task:', li.textContent);
        if (newTask !== null && newTask !== '') {
            li.firstChild.textContent = newTask;
            saveTasks();
        }
    });

    let deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.addEventListener('click', function() {
        li.remove();
        saveTasks();
    });

    let completeButton = document.createElement('button');
    completeButton.textContent = 'Complete';
    completeButton.addEventListener('click', function() {
        li.classList.toggle('completed');
        saveTasks();
    });

    li.appendChild(editButton);
    li.appendChild(completeButton);
    li.appendChild(deleteButton);
    document.getElementById('todo-list').appendChild(li);
    saveTasks();
}

function saveTasks() {
    let tasks = [];
    document.querySelectorAll('#todo-list li').forEach(li => {
        tasks.push({
            text: li.firstChild.textContent,
            completed: li.classList.contains('completed')
        });
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(task => addTask(task.text, task.completed));
}

function clearAllTasks() {
    document.getElementById('todo-list').innerHTML = '';
    localStorage.removeItem('tasks');
}

function addTask(text, completed = false) {
    let li = document.createElement('li');
    li.textContent = text;

    if (completed) {
        li.classList.add('completed');
    }

    let editButton = document.createElement('button');
    editButton.textContent = 'Edit';
    editButton.classList.add('edit');
    editButton.addEventListener('click', function() {
        let newTask = prompt('Edit task:', li.textContent);
        if (newTask !== null && newTask !== '') {
            li.firstChild.textContent = newTask;
            saveTasks();
        }
    });

    let deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.addEventListener('click', function() {
        li.remove();
        saveTasks();
    });

    let completeButton = document.createElement('button');
    completeButton.textContent = 'Complete';
    completeButton.addEventListener('click', function() {
        li.classList.toggle('completed');
        saveTasks();
    });

    li.appendChild(editButton);
    li.appendChild(completeButton);
    li.appendChild(deleteButton);
    document.getElementById('todo-list').appendChild(li);
}

function filterTasks() {
    let filter = document.getElementById('filter-todos').value;
    document.querySelectorAll('#todo-list li').forEach(li => {
        switch (filter) {
            case 'all':
                li.style.display = 'flex';
                break;
            case 'completed':
                if (li.classList.contains('completed')) {
                    li.style.display = 'flex';
                } else {
                    li.style.display = 'none';
                }
                break;
            case 'uncompleted':
                if (!li.classList.contains('completed')) {
                    li.style.display = 'flex';
                } else {
                    li.style.display = 'none';
                }
                break;
        }
    });
}

설명

  1. HTML 코드: 기본적인 To-Do List UI를 작성했습니다. 텍스트 입력 필드, 추가 버튼, 필터 선택 메뉴, 할 일 목록, 모두 삭제 버튼을 포함합니다.
  2. CSS 코드: To-Do List의 스타일을 지정했습니다. 입력 필드와 버튼, 목록 항목의 스타일을 설정합니다.
  3. JavaScript 코드:
    • 할 일 추가 기능: 'Add' 버튼을 클릭하거나 Enter 키를 누르면 입력 필드의 값을 읽어 새로운 할 일 항목을 생성합니다.
    • 할 일 삭제 기능: 각 항목의 'Delete' 버튼을 클릭하면 해당 항목이 목록에서 제거됩니다.
    • 할 일 편집 기능: 각 항목의 'Edit' 버튼을 클릭하면 할 일을 편집할 수 있습니다.
    • 할 일 완료 기능: 각 항목의 'Complete' 버튼을 클릭하면 해당 항목이 완료 상태로 표시됩니다.
    • 데이터 저장 및 불러오기: 할 일 목록은 LocalStorage에 저장되고, 페이지가 로드될 때 LocalStorage에서 불러옵니다.
    • 모두 삭제 기능: 'Clear All' 버튼을 클릭하면 모든 할 일 항목을 삭제하고 LocalStorage를 초기화합니다.
    • 필터 기능: 필터 선택 메뉴를 사용하여 완료된 할 일과 미완료된 할 일을 필터링할 수 있습니다.
반응형
저작자표시

'Frontend > Javascript' 카테고리의 다른 글

[Javascript] Javascript 규칙  (0) 2024.06.08
[Javascript] Javascript 예제(심화) - 수정  (0) 2024.06.08
[Javascript] Javascript 심화  (0) 2024.06.08
[Javascript] Javascript 실습  (0) 2024.06.08
[Javascript] Javascript 기본  (0) 2024.06.08

관련글

티스토리툴바