자바스크립트로 만드는 Todo 리스트: 간단하지만 강력한 할 일 관리 시스템
안녕하세요, 프로그래밍과 블로그를 동시에 즐기는 여러분! 오늘은 자바스크립트를 활용하여 간단한 Todo 리스트를 만들어보겠습니다. 이 Todo 리스트는 사용자가 할 일을 추가하고 삭제할 수 있는 기본 기능에 초점을 두고 있으며, 코드를 이해하는 데 도움이 되는 설명을 함께 제공하겠습니다.
들어가며
프로그래밍으로 유용한 애플리케이션을 만드는 것은 늘 흥미진진한 일입니다. 여러분이 바쁜 일상 속에서 해야 할 일을 관리하기 위한 간단한 도구를 만들어보고 싶다면, 이 포스트가 큰 도움이 될 것입니다. 이 Todo 리스트 애플리케이션을 통해 기본적인 자바스크립트, HTML, CSS의 통합 사용법을 익혀보세요.
자, 그럼 시작해볼까요?
코드 작성하기
먼저 HTML 구조를 작성하고, 자바스크립트로 Todo 리스트 기능을 구현해보겠습니다. 아래는 기본적인 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo 리스트</title>
<style>
body {
font-family: Arial, sans-serif;
}
#todo-list {
margin-top: 20px;
}
.todo-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding: 5px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Todo 리스트</h1>
<input type="text" id="todo-input" placeholder="할 일을 입력하세요">
<button id="add-button">추가</button>
<div id="todo-list"></div>
<script src="script.js"></script>
</body>
</html>
코드 설명하기
- HTML 구조:
input요소는 사용자가 할 일을 입력하는 부분입니다.button요소는 입력 내용을 Todo 리스트에 추가하는 역할을 합니다.div요소는 추가된 Todo 항목들이 나열되는 컨테이너입니다.
- CSS 스타일링:
- 간단한 스타일링을 통해 각 Todo 항목을 보기 좋게 만들었습니다. 배경색과 테두리로 경계가 뚜렷하게 나타납니다.
- 자바스크립트 코드: 다음으로 자바스크립트 코드를 작성해 보겠습니다.
document.getElementById('add-button').addEventListener('click', function() {
const todoInput = document.getElementById('todo-input');
const todoText = todoInput.value;
if (todoText === '') {
alert('할 일을 입력하세요!');
return;
}
const todoList = document.getElementById('todo-list');
const todoItem = document.createElement('div');
todoItem.classList.add('todo-item');
todoItem.innerHTML = `
<span>${todoText}</span>
<button class="delete-button">삭제</button>
`;
todoList.appendChild(todoItem);
todoInput.value = '';
const deleteButton = todoItem.querySelector('.delete-button');
deleteButton.addEventListener('click', function() {
todoList.removeChild(todoItem);
});
});
코드 설명하기
- 이벤트 리스너 추가:
- "추가" 버튼 클릭 시 할 일이 추가됩니다.
- 사용자가 입력한 내용이 비어있지 않은 경우, 새로운 Todo 아이템이 생성됩니다.
- Todo 아이템 생성:
- 각각의 Todo 항목은
div요소로 생성되고,<span>태그를 통해 할 일이 표시됩니다. 삭제 버튼도 함께 추가됩니다.
- 각각의 Todo 항목은
- 삭제 기능:
- 각 Todo 아이템 옆에 있는 "삭제" 버튼을 클릭하면 해당 항목이 삭제됩니다.
예제 실행 결과
이 코드를 실행하면, 아래와 같은 결과를 얻을 수 있습니다. 사용자는 입력란에 할 일을 입력하고 "추가" 버튼을 클릭하여 목록에 추가하고, 필요할 때마다 삭제할 수 있습니다!
추가적으로
이 Todo 리스트를 확장할 수 있는 몇 가지 아이디어:
- 로컬 스토리지 활용: 사용자가 새로고침 후에도 Todo 목록을 유지할 수 있도록 로컬 스토리지에 저장하는 기능 추가하기.
- 완료 여부 표시: 완료된 할 일을 체크할 수 있는 체크박스 추가하기.
- 우선순위 지정: Todo 항목에 우선순위를 부여하고 정렬하는 기능 추가하기.
마무리하며
이번 포스트에서는 자바스크립트를 활용하여 간단한 Todo 리스트를 만드는 방법을 알아보았습니다. 실용적인 문제를 해결하는 데 도움이 되었기를 바랍니다. 여러분도 자신만의 Todo 리스트를 직접 만들어 보시고, 필요한 기능을 추가해보세요. 프로그래밍은 참으로 재미있는 경험이 될 수 있습니다. 질문이 있으시면 언제든지 댓글로 남겨주세요.
이 정보가 필요할 친구들에게 공유하는 것도 잊지 마시고요! 그럼 다음 포스트에서 만나요!
'개발' 카테고리의 다른 글
| 파이썬으로 시작하는 데이터 시각화 도구 만들기 (0) | 2024.11.12 |
|---|---|
| C++에서 constexpr로 런타임 성능 최적화하기 (0) | 2024.11.11 |
| 간단한 웹 크롤러를 만들기 위한 Python 가이드 (0) | 2024.11.11 |
| 효율적인 C++ 템플릿 특화로 데이터 구조 설계하기 (0) | 2024.11.11 |
| 파이썬으로 랜덤 사용자 생성기 만들기: 테스트 데이터 쉽게 생성하기 (0) | 2024.11.11 |