안녕하세요, 여러분! 이번 강의에서는 우리가 배운 JavaScript 지식을 바탕으로 간단한 To-Do 리스트 프로젝트를 만들어보겠습니다. 이번 실습을 통해 JavaScript의 다양한 기능을 활용하여 실제 프로젝트를 구현하는 방법을 배워볼 것입니다. 그럼 바로 시작해볼까요?
프로젝트 목표
· 사용자가 할 일을 입력하고, 리스트에 추가할 수 있도록 합니다.
· 각 할 일에 대해 완료 여부를 체크하고, 삭제할 수 있도록 합니다.
준비물
· HTML, CSS, JavaScript에 대한 기본적인 이해
· 텍스트 에디터(Visual Studio Code 추천)
· 웹 브라우저(Google Chrome 추천)
1. 프로젝트 구조 설정
먼저 프로젝트 폴더를 만들고, 필요한 파일들을 생성합니다.
폴더 구조는 다음과 같이 설정합니다.
project/
├── index.html
├── style.css
└── script.js
2. HTML 작성하기
index.html 파일을 열어 다음과 같이 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do 리스트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="todo-container">
<h1>To-Do 리스트</h1>
<input type="text" id="todo-input" placeholder="할 일을 입력하세요">
<button id="add-todo">추가</button>
<ul id="todo-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
해석
· meta 태그를 사용하여 문자 인코딩과 뷰포트를 설정합니다.
· link 태그를 통해 외부 CSS 파일을 연결합니다.
· script 태그를 통해 JavaScript 파일을 연결합니다.
3. CSS 작성하기
style.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: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
#todo-input {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-right: 10px;
}
#add-todo {
padding: 10px 20px;
border: none;
background-color: #28a745;
color: white;
border-radius: 5px;
cursor: pointer;
}
#add-todo:hover {
background-color: #218838;
}
#todo-list {
list-style: none;
padding: 0;
margin-top: 20px;
}
.todo-item {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.todo-item.completed {
text-decoration: line-through;
color: #aaa;
}
.todo-item button {
background: none;
border: none;
color: #dc3545;
cursor: pointer;
}
해석
· 기본적인 페이지 레이아웃과 스타일을 정의합니다.
· 각 할 일 항목(todo-item)에 대한 스타일을 설정합니다.
4. JavaScript 작성하기
script.js 파일을 열어 다음과 같이 작성합니다.
document.addEventListener('DOMContentLoaded', () => {
const todoInput = document.getElementById('todo-input');
const addTodoButton = document.getElementById('add-todo');
const todoList = document.getElementById('todo-list');
addTodoButton.addEventListener('click', addTodo);
todoInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addTodo();
}
});
function addTodo() {
const todoText = todoInput.value.trim();
if (todoText !== '') {
const todoItem = document.createElement('li');
todoItem.className = 'todo-item';
todoItem.innerHTML = `
<span>${todoText}</span>
<button class="delete-btn">삭제</button>
`;
todoList.appendChild(todoItem);
const deleteButton = todoItem.querySelector('.delete-btn');
deleteButton.addEventListener('click', () => {
todoList.removeChild(todoItem);
});
todoItem.addEventListener('click', () => {
todoItem.classList.toggle('completed');
});
todoInput.value = '';
}
}
});
해석
· DOMContentLoaded 이벤트를 사용하여 DOM이 완전히 로드된 후에 코드를 실행합니다.
· 사용자가 입력한 할 일을 추가하고, 각 할 일에 대해 삭제 및 완료 기능을 추가합니다.
이제 모든 코드를 작성했습니다. 웹 브라우저에서 index.html 파일을 열어 우리의 To-Do 리스트가 제대로 작동하는지 확인해봅시다. 이번 프로젝트를 통해 JavaScript를 활용한 기본적인 웹 애플리케이션 제작 과정을 경험해보았습니다. 여러분도 스스로 다양한 기능을 추가하며 더 발전시켜보세요!
'프로그래밍 > JAVA Script' 카테고리의 다른 글
| [JavaScript 수업] 9강 - 모듈화와 패키지 관리 (0) | 2024.06.06 |
|---|---|
| JAVA Script수업 8강 - AJAX와 비동기 처리: 실시간 데이터 처리의 핵심 기술 (0) | 2024.06.05 |
| [JavaScript 수업 7강] DOM 조작: HTML 요소를 다루는 방법 (0) | 2024.06.04 |
| [JavaScript 수업] 6강 - 배열과 객체, 이해와 활용 (1) | 2024.06.03 |
| [JavaScript 수업 5강] 함수와 이벤트 처리 (0) | 2024.05.31 |