3์ฃผ์ฐจ ๋ฏธ์ ๐ค
- TO DO LIST ์์ฑ์ํค๊ธฐ โโ
โ TO DO LIST ๊ตฌํ ์กฐ๊ฑด
์ฌ์ค ์ ๋ฒ์ฃผ์ ๊ตฌํํ TO DO LIST๋ ์กฐ๊ฑด์ ๋ค ๋ง์กฑ์ํค์ง ๋ชปํ ๋ฏธ์์ฑ TO DO LIST์๋ค๐ข
๊ทธ!๋!์! ์ด๋ฒ์ฃผ์๋ ์กฐ๊ฑด์ ๋ค ๋ง์กฑํ๋ TO DO LIST๋ฅผ ์์ฑํ๊ธฐ๋ก ํ๋ค.
๊ตฌํํ์ง ๋ชป ํ๋ ๊ธฐ๋ฅ
- todo ์์ฑ์ ์์ฑ ์๊ฐ ํ์
- ์คํฌ๋กค๋ฐ ํญ์ ์๋ ๊ณ ์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="mission 02.css">
</head>
<body>
<h1>TO DO LIST</h1>
<div class="main">
<form class="" action="mission 02.html" method="post">
<input type="text" placeholder="ํ ์ผ์ ์ ์ด๋ด
์๋ค!" name="todo">
<button type="submit"><b>ADD</b></button>
</form>
<div class="todolist">
<ul>
</ul>
<a id="delete">DELETE ALL</a>
</div>
</div>
<script type="text/JavaScript" src="mission 02.js"></script>
</body>
</html>
//์๊ฐ ์ถ๋ ฅ
const dgt = (base) => {
//ํ ์๋ฆฌ์์ธ ๊ฒฝ์ฐ, 0๋ ํจ๊ป ์ถ๋ ฅ
return (base > 9 ? base : `0${base}`)
};
dgtํจ์๋ ์๊ฐ์์ ํ ์๋ฆฌ์์ ๊ฒฝ์ฐ, ์์ '0'์ ๋ถ์ฌ์ฃผ๊ธฐ ์ํด ์์ฑํ ํจ์์ด๋ค.
const addToDoList = (value) => {
let ul = document.querySelector('ul');
let li = document.createElement('li');
//Date ๊ฐ์ฒด ์ฌ์ฉ
const date = new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
//checkbox, value, delete
li.innerHTML = `<span class="delete">DEL</span><input type="checkbox"><label>${value}
<span class="time">${dgt(hours)}:${dgt(minutes)}:${dgt(seconds)}</span></label>`;
ul.appendChild(li);
document.querySelector('.todolist').style.display = 'block';
};
ํ์ฌ ๋ ์ง์ ์๊ฐ์ ๊ฐ์ ธ์ค๋ Date()๊ฐ์ฒด๋ฅผ ์ด์ฉํด์ ๊ตฌํํ์๋ค.
Date๊ฐ์ฒด๋ '์์ฑ์ ํจ์'๋ก ์ฌ์ฉํ ์ ์๋ค. const date = new Date();
Date๊ฐ์ฒด๋ฅผ date๋ณ์์ ๋ด๊ณ , Date๊ฐ์ฒด๊ฐ ์ ๊ณตํ๋ ์, ๋ถ, ์ด์ ๋ํ์ฌ ๊ฐ๊ฐ ๋ณ์๋ฅผ ์ ์ธํ์๋ค.
const todoList = document.getElementsByClassName('todolist');
//์์ฑ ๊ธฐ๋ฅ
const addToDo = (e) => {
e.preventDefault();
//์ฌ์ฉ์๊ฐ ์
๋ ฅํ๋ todoValue
let toDoValue = document.querySelector('input');
if(toDoValue.value !== '') {
//LIST์ ๋ฃ์ด์ฃผ๊ธฐ
addToDoList(toDoValue.value);
//SCROLL ๊ณ ์
todoList.scrollTop = todoList.scrollHeight;
toDoValue.value = '';
}
};
todoList๋ผ๋ ๋ณ์๋ฅผ ์ ์ธํ์๊ณ ์ด๋ todolist์ list๋ฉ์ธ์ ์๋ฏธํ๋ค. ์ด ๋ฆฌ์คํธ์ ์คํฌ๋กค์ ๊ณ ์ ํด์ฃผ๊ธฐ ์ํด todoList.scrollTop = todoList.scrollHeight;
๋ฅผ ์์ฑํด์ฃผ์๋ค.
โ์์ฑ์ ํจ์โ
- ๊ฐ์ฒด ์์ฑ ๋ฐฉ์ ์ค ํ๋๋ก ๊ฐ์ฒด๋ฅผ ์์ฑํ ๋ ์ฌ์ฉํ๋ ํจ์์ด๋ค.
- const ์์ฑ์ = new ์์ฑ์๋ช ();
.innerText : ์์์์ text ๊ฐ๋ค๋ง์ ๊ฐ์ ธ์จ๋ค.
.innerHTML : innerText์๋ ๋ฌ๋ฆฌ ์์์์ HTML์ด๋ XML์ ๊ฐ์ ธ์จ๋ค.
- ์๊ฐ์ ํ๋ฉด์ ํ์๊น์ง ํ์ง๋ง, ์ฌ์ฉ์๊ฐ ํ ์ผ์ ๋ค ํ๋ค๊ณ ์๋ฃ๋ฒํผ์ ๋๋ ์ ๋๋ ์ญ์ ๋ฅผ ํ์ ๊ฒฝ์ฐ LIST๋ง ์ญ์ ๋๊ณ ์๊ฐ์ ์ญ์ ๊ฐ ์๋์๋ค.
const addToDoList = (value) => {
let ul = document.querySelector('ul');
let li = document.createElement('li');
//Date ๊ฐ์ฒด ์ฌ์ฉ
const date = new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
LIST๋ฅผ ์์ฑํ๋ ํจ์ ์์ ์๊ฐ์ ๊ตฌํํด์ฃผ์๋ค.
๊ทธ๋ฆฌ๊ณ ์๊ฐ์ LIST๋ฅผ ๊ฐ์ธ๊ณ ์๋ ul์์ ๋ฃ์ด์ค์ผ๋ก์จ ์ฌ์ฉ์๊ฐ ์๋ฃ๋ฅผ ๋๋ ๊ฑฐ๋ ์ญ์ ๋ฅผ ํ์ ๋, ์๊ฐ๋ ํจ๊ป ์ฌ๋ผ์ง๋๋ก ๊ตฌํ ์๋ฃํ์๋ค!
- ์๊ฐ์ Date()๊ฐ์ฒด๋ฅผ ์ด์ฉํ์ฌ ์ ๋ํ๋์ง๋ง,
์์ง ๋ฌธ๋ฒ์ด ์ํด๋ฌ์ ์ด๋ฅผ ํ๋ฉด์ ํ์ํ๋ ๊ณผ์ ์์ ์ข ํค๋งธ๋ค.
//checkbox, value, delete
li.innerHTML = `<span class="delete">DEL</span><input type="checkbox"><label>${value}
<span class="time">${dgt(hours)}:${dgt(minutes)}:${dgt(seconds)}</span></label>`;
ul.appendChild(li);
document.querySelector('.todolist').style.display = 'block';
};
์ด๋ ๊ฒ innerHTML์ ์ด์ฉํ์ฌ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ TO DO LIST ์์ ์, ๋ถ, ์ด๋ฅผ ๋ฃ์ด์ฃผ์๋ค. ๋ฐ๋ผ์ ํ๋ฉด์ LIST์ ์๊ฐ์ด ์ ํ์๋๋๋ก ํ์๋ค.
์ฌ์ค ์ฒ์์ TO DO LIST๋ฅผ ๊ตฌํํด์ผ ํ ๋, ์ด๋ป๊ฒ ๊ตฌํ์ ํด์ผํ ์ง ๋ง๋งํ๋ค.๐ญ
๊ทธ๋์ ๋ง์ด ์ฐพ์๋ณด๊ณ ๋ฌธ๋ฒ ๊ณต๋ถ๋ ๊ณ์ ํ ๊ฒ ๊ฐ๋ค!!
ํ๋ก์ ํธ๋ฅผ ์์ฑ์ ํ๋, ์ด์ ์์ผ ์ข JS๋ฌธ๋ฒ์ด ์๋ฆฌ์กํ ๊ฒ ๊ฐ๋ค.
(์ญ์ ํ๋ก์ ํธ๋ฅผ ๊ณ์ ํด๋ด์ผ ์ค๋ ฅ์ด ๋๋..^_^)
์ธํ๋ฐ, ๋
ธ๋ง๋์ฝ๋ ์ฌ์ดํธ์ ์ข์ ๊ฐ์ ๋ง๋๋ฐ ํ๋์ฉ ๋ฐ๋ผํด๋ณด๋ฉด์ ๋ ๋ง์ ํ๋ก์ ํธ๋ฅผ ํด๋ด์ผ๊ฒ ๋ค !!!โโ