JavaScript 간단한 todolist만들기

1000명진·2024년 1월 11일

HTML

<div id="todayDate"></div>
<h1 class="title">Todo-List</h1>
<div class="inputContainer">
<input type="text" class="inputBox" id="taskInput" placeholder="할 일을 입력하세요" />
<button class="addTask" onclick="addTask()">+</button>
</div>
<ul id="taskList"></ul>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.title {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 20px;
    color: black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.inputContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.inputBox {
    width: 300px;
    height: 40px;
    border: 2px solid wheat;
    border-radius: 5px;
    font-size: 1.5rem;
    padding: 5px;
    margin-right: 10px;
}
.addTask {
    background-color: green;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
}
.addTask:hover {
    background-color: #45a049;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    width: 70%;
    font-size: 1.8rem;
    background-color: #fff;
    padding: 8px;
    border: 2px solid black;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: auto;
    white-space: nowrap;
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 10px;
}
li button {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 20%;
    cursor: pointer;
}
li button:hover {
    background-color: #e53935;
}
li span {
    flex-grow: 1;
}

#todayDate {
    text-align: center;
    font-weight: bold;
    font-size: 1.3rem;
    margin-top: 100px;
}

JavaScript

로컬스토리지에 저장

saveTask() , loadTasks()

function saveTasks() {
	var taskList = document.getElementById('taskList').innerHTML;
    localStorage.setItem('tasks', taskList);
    }
function loadTasks() {
	var savedTasks = localStorage.getItem('tasks');
    if (savedTasks) {
    	document.getElementById('taskList').innerHTML = savedTasks;
    }

saveTask()

이 함수는 현재 작업 상태를 로컬 스토리지에 저장하는 역할을 합니다
taskList 엘리먼트의 innerHTML을 가져와서 로컬 스토리지에 저장합니다

loadTask()

이 함수는 DOM 콘텐츠가 완전히 로드될 때 호출됩니다
LocalStorage.getItem('tasks') 를 사용하여 로컬 스토리지에 저장되어있는 작업을 가져옵니다
저장된 작업이 있으면 taskList 엘리먼트의 innerHTML을 저장된 작업으로 설정합니다

할 일 추가

addTask()

function addTask() {
	var taskInput = document.getElementById('taskInput');
    var taskList = document.getElementById('taskList');
    var newTask = document.createElement('li');
    newTask.innerHTML = taskInput.value + ' <button>x</button>';
    taskList.appendChild(newTask);
    saveTasks();
    taskInput.value = '';
    }

이 함수는 사용자가 할 일을 추가할 때 호출됩니다
taskInput , taskList 엘리먼트를 사용하여 새로운 할 일 항목을 만듭니다
생성된 할 일 항목을 taskList에 추가하고, 작업을 저장하기 위해 saveTasks() 함수를 호출합니다
추가 버튼을 누르면 taskInput의 값을 비워(taskInput.value = '';) 사용자가 다음 할 일을 쉽게 입력할 수 있도록 합니다

할 일 삭제

deleteTask()

function deleteTask(task) {
	task.parentNode.remove();
    saveTasks();
}

이 함수는 사용자가 할 일을 삭제할 때 호출됩니다.
클릭된 삭제 버튼이 속한 할 일 항목을 찾아 제거하고, 작업을 저장하기 위해 saveTasks() 함수를 호출합니다.

오늘 날짜 표시

document.addEventListener('DOMContentLoaded', function () {
	var today = new Date();
    var formattedDate =
    	today.getFullYear() + '년 ' + (today.getMonth() + 1) + '월 ' + today.getDate() + '일';

    document.getElementById('todayDate').textContent = formattedDate;
});