반응형
1. 간단한 To-Do 리스트 애플리케이션 만들기
프로젝트 개요
이번 프로젝트에서는 JavaScript를 사용하여 간단한 To-Do 리스트 애플리케이션을 만들어보겠습니다. 이 애플리케이션은 사용자가 할 일을 추가하고, 완료한 할 일을 체크하며, 목록에서 제거할 수 있는 기능을 포함합니다.
준비물
- HTML
- CSS
- JavaScript
단계 1: 기본 HTML 구조 만들기
먼저, To-Do 리스트 애플리케이션의 기본 HTML 구조를 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<form id="todo-form">
<input type="text" id="todo-input" placeholder="Enter a new task">
<button type="submit">Add</button>
</form>
<ul id="todo-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>단계 2: 기본 CSS 스타일링
다음으로, 애플리케이션의 기본 스타일을 정의합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
form {
display: flex;
justify-content: space-between;
}
input[type="text"] {
width: 80%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
border: none;
background-color: #28a745;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
li.completed {
text-decoration: line-through;
color: #888;
}
button.delete {
background-color: #dc3545;
margin-left: 10px;
}
button.delete:hover {
background-color: #c82333;
}단계 3: JavaScript로 기능 구현하기
이제 JavaScript를 사용하여 To-Do 리스트의 기능을 구현합니다.
// script.js
document.addEventListener('DOMContentLoaded', function() {
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');
todoForm.addEventListener('submit', function(event) {
event.preventDefault();
addTodo();
});
function addTodo() {
const todoText = todoInput.value.trim();
if (todoText !== '') {
const li = document.createElement('li');
li.textContent = todoText;
const completeButton = document.createElement('button');
completeButton.textContent = 'Complete';
completeButton.addEventListener('click', function() {
li.classList.toggle('completed');
});
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.classList.add('delete');
deleteButton.addEventListener('click', function() {
todoList.removeChild(li);
});
li.appendChild(completeButton);
li.appendChild(deleteButton);
todoList.appendChild(li);
todoInput.value = '';
}
}
});결론
이로써 간단한 To-Do 리스트 애플리케이션을 완성했습니다. 사용자는 새로운 할 일을 추가하고, 완료한 할 일을 체크하며, 필요 없는 할 일을 삭제할 수 있습니다. 이 프로젝트를 통해 JavaScript로 동적인 웹 애플리케이션을 만드는 기초를 다질 수 있습니다.
다음 글에서는 날씨 API를 이용한 날씨 앱 만들기에 대해 알아보겠습니다.
다음 글에서 만나요!
반응형
'JavaScript 프로젝트 시리즈' 카테고리의 다른 글
| [JavaScript 프로젝트 시리즈] 6일차: JavaScript로 RESTful API 연동하기 (0) | 2024.08.06 |
|---|---|
| [JavaScript 프로젝트 시리즈] 5일차: JavaScript로 간단한 채팅 애플리케이션 만들기 (0) | 2024.08.05 |
| [JavaScript 프로젝트 시리즈]4일차: JavaScript로 로컬 스토리지를 이용한 메모 앱 만들기 (0) | 2024.08.04 |
| [JavaScript 프로젝트 시리즈] 3일차: JavaScript로 간단한 틱택토 게임 만들기 (0) | 2024.08.03 |
| [JavaScript 프로젝트 시리즈] 2일차: JavaScript로 날씨 API를 이용한 날씨 앱 만들기 (0) | 2024.08.02 |