1. 기본 세팅
구글폰트, 폰트어썸, JS, CSS연결과 같은 기본적인 세팅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Todo List</title>
</head>
<body>
<header>
<h1>Todo List</h1>
</header>
<form>
<input type="text" class="todo-input" />
<button class="todo-button" type="submit">
<i class="fas fa-plus-square"></i>
</button>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="./app.js"></script>
</body>
</html>결과
ul내부에 li태그는 JavaScript로 구현을 할 것이기 때문에 비워둔다.
2. 기본적인 스타일링
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(90deg, #3b97ad, #182491);
color: white;
font-family: 'Nanum Pen Script', cursive;
min-height: 100vh;
}
header {
font-size: 2rem;
}
header,
form {
min-height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
form input,
form button {
padding: 0.5rem;
font-size: 2rem;
border: none;
background: white;
}
form button {
color: #182491;
background: white;
cursor: pointer;
transition: all 0.3s ease;
}
form button:hover {
background: #182491;
color: white;
}결과
3. Todo 만들기
app.js로 옮겨가서 Selectors, Event Listeners, Functions로 나누어 코드를 작성한다.
//Selectors
const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-button');
const todoList = document.querySelector('.todo-list');
//Event Listeners
todoButton.addEventListener('click', addTodo);
//Functions
function addTodo(event) {
event.preventDefault();
}
button 클릭시 browser가 새로고침 되는 것을 방지하기위해 addTodo()함수에 'event.preventDefault();'를 넣어준다.
이제 ul 태그 안에 li 태그를 만들 차례이다.
새 노드를 만드는 것은 createElement 메서드를 이용한다.
결과적으로 위와 같은 모양이 되야 한다.
//Selectors
const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-button');
const todoList = document.querySelector('.todo-list');
//Event Listeners
todoButton.addEventListener('click', addTodo);
//Functions
function addTodo(event) {
event.preventDefault();
//Todo Div
const todoDiv = document.createElement('div');
todoDiv.classList.add('todo');
//Create LI
const newTodo = document.createElement('li');
newTodo.innerText = 'hey';
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);
//Check Button
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add('complete-btn');
todoDiv.appendChild(completedButton);
//Trash Button
const trashButton = document.createElement('button');
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.classList.add('complete-btn');
todoDiv.appendChild(trashButton);
//Append to List
todoList.appendChild(todoDiv);
}functions를 살펴보자면, addTodo, 즉 버튼 클릭 시 아래 이벤트들이 발생하게 되는 것이다.
//Todo Div
const todoDiv = document.createElement('div');
: div 태그를 생성한다.
todoDiv.classList.add('todo');
:생성한 todoDiv에 'todo'라는 클래스를 붙인다.
//Create LI
const newTodo = document.createElement('li');
: li 태그를 생성하고 이 상수의 이름은 newTodo라고 명명한다.
newTodo.innerText = 'hey';
: 함수가 실행되었을 때 테스트를 위해 작성한 것이다.
newTodo.classList.add('todo-item');
: newTodo에 'todo-item'이라는 클래스를 생성한다.
todoDiv.appendChild(newTodo);
: newTodo는 todoDive의 자식요소이다.
//Check Button
const completedButton = document.createElement('button');
: HTML에 button 태그를 생성하고 이를 completedButton이라고 명명한다.
completedButton.innerHtml = '';
: completedButton 자식요소에 아이콘을 삽입한다. fas fa-check는 font awesome의 class이다.
completedButton.classList.add('complete-btn');
: 버튼에 completed-btn이라는 클래스를 추가한다.
todoDiv.appendChild(completedButton);
: completedButton 즉 button요소는 todoDiv 즉 div요소의 자식요소이다.
//Trash Button
Check Button과 동일하다.
//Append to List
todoList.appendChild(todoDiv);
: todoDiv 즉 div 요소는 todoList 즉 ul요소의 자식요소이다.
여기까지 하고나면 클릭했을때 아래와 같이 나타난다.
(좌측에 hey와 아이콘 버튼 2개가 생성된 것을 볼 수 있다.)
