index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>모듈 시스템- 할일 목록 관리</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app">
<h1>할 일 목록</h1>
<form id="new-todo-form">
<!--
required 속성(bool 속성): required="true"와 동일
cf) 작성하지 않으면 required="false"와 동일(기본값)
-->
<input type="text" id="new-todo" placeholder="새로운 할 일 추가" required="true"/>
<button type="submit">추가</button>
</form>
<ul id="todo-list"></ul>
</div>
<script type="module" src="./app.js"></script>
</body>
</html>
style.css
body{
background-color: #f7f7f7;
margin: 0;
padding: 20px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#app{
width: 100%;
max-width: 350px;
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 8px;
}
h1{
color: #333;
text-align: center;
}
form{
display: flex;
margin-bottom: 20px;
}
#new-todo{
flex: 1;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
margin-right: 5px;
/* imput 요소 활성화 시 표시되는 border라인 */
outline: none;
transition: border-color 0.3s;
}
#new-todo:hover, #new-todo:focus{
border-color:orange;
}
button{
background-color: orange;
border: none;
color: white;
padding: 10px 15px;
cursor:pointer;
transition: background-color 0.3s;
}
button:hover{
background-color: darkorange;
}
ul{
list-style-type: none;
margin: 0;padding: 0;
}
li{
background-color: #f9f9f9;
margin-top: 8px;
padding: 10px;
border-radius: 4px;
cursor: pointer;
display:flex;
justify-content: space-between;
align-items: center;
}
li:hover{
background-color: #efefef;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
li.completed{
text-decoration: line-through;
color: #888;
}
.delete-button{
margin-left: 10px;
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.delete-button:hover{
background-color: darkred;
}
app.js
import { TodoManager } from "./TodoManager.js";
/*
app.js
# 1. 프로젝트 기능 정의
- TodoManager 모듈의 기능을 사용하여 할 일 앱을 구현
- 이벤트 등록, 할 일 목록 없데이트등 로직을 담당
? TodoManager의 인스턴스를 생성
*/
const todoManager= new TodoManager();
// ? HTML 요소 가져오기
const form= document.querySelector('#new-todo-form');
const input= document.querySelector('#new-todo');
const todoList= document.querySelector('#todo-list');
form.addEventListener('submit',(e)=>{
e.preventDefault() // 기본 제출 이벤트 방지
//form 내부에서 데이터를 할 일 목록에 추가
const text= input.value.trim();
if(text !=''){
todoManager.addTodo(text);
input.value= '';
updateTodoList();
}
});
// 할 일 목록을 업데이트 하는 함수
function updateTodoList(){
// 모든 할 일 가져오기
const todos= todoManager.getTodos();
// ul 태그 내부의 데이터(내용)을 삭제
// HTML요소.innerHTML: 요소 내부의 전체 HTML 코드를 문자열로 가져오기
todoList.innerHTML= '';
todos.forEach(todo=>{
//태그에 사용될 텍스트 그대로를 전달
const li=document.createElement('li');
li.textContent= todo.text;
if(todo.completed){ //순회되는 요소의 완료 여부가 true라면
li.classList.add('completed');
}
else{
li.classList.remove('completed');
}
li.addEventListener('click', ()=>{
todoManager.toggleCompleted(todo.id);
updateTodoList();
});
//삭제 버튼 생성
const deleteButton= document.createElement('button');
deleteButton.textContent= 'Delete';
deleteButton.classList.add('delete-button');
deleteButton.addEventListener('click',(e)=>{
todoManager.removeTodo(todo.id);
updateTodoList();
});
li.appendChild(deleteButton);
todoList.appendChild(li);
});
}
updateTodoList();
TodoManager.js
/*
TodoManager.js
#모듈 기능 정의
: 재사용 될 클래스 정의
1) 속성
: 전체 할 목록 (todos 배열)
2) 메소드
- 새로운 할 일 추가
- 할 일 항목의 완료 상태를 토글(수정)
- 특정 할 일 항목을 제거(삭제)
- 저장된 모든 할 일 목록을 반환(출력)
# 할 일 객체 정의
- id: 각 할 일의 고유값
- text: 할 일 내용
- completed: 할 일 완료 여부 (default: false)
*/
export class TodoManager{
//TodoManager 생성자
constructor(){
//TodoManager 호출 시 해당 클래스의 인스턴스에 todos 속성이 생성 & 초기화
this.todos=[];
}
addTodo(text){
const newTodo={
id: Date.now(),
text,
completed: false
};
this.todos.push(newTodo);
}
// 2) 특정 할 일 항목의 완료 상태를 토글
toggleCompleted(id){
const todo= this.todos.find(todo=> todo.id===id);
if(todo){
todo.completed= !todo.completed;
};
};
// 3) 특정 할 일 항목을 제거
removeTodo(id){
this.todos= this.todos.filter(todo=> todo.id !==id);
}
// 4) 모든 할 일 항목을 반환
getTodos(){
return this.todos;
}
}
'프로그래밍 예제' 카테고리의 다른 글
| java 프로그래밍 예제(간단한 도서 관리 프로그램) (0) | 2024.09.20 |
|---|---|
| 간단한 활용 예제(포토 앨범) (0) | 2024.08.22 |
| HTML, CSS, JS 활용 예제(간단한 todo list) (0) | 2024.08.08 |