JavaScript Study 03

Yeonhee Choiยท2021๋…„ 8์›” 20์ผ
0

JavaScript Project

๋ชฉ๋ก ๋ณด๊ธฐ
3/3
post-thumbnail

Week3 Mission

3์ฃผ์ฐจ ๋ฏธ์…˜ ๐Ÿค

  • TO DO LIST ์™„์„ฑ์‹œํ‚ค๊ธฐ โ•โ•

โœ” TO DO LIST ๊ตฌํ˜„ ์กฐ๊ฑด

  • todo ์ƒ์„ฑ์‹œ ์ƒ์„ฑ ์‹œ๊ฐ„ ํ‘œ์‹œ
  • ์—”ํ„ฐ๋ฅผ ๋ˆ„๋ฅด๋ฉด ์ƒ์„ฑ
  • input ์ด ๋นˆ ๊ฐ’์ด๋ฉด ์—”ํ„ฐ๋ฅผ ์ณ๋„ ์ƒ์„ฑ์ด ์•ˆ ๋˜๋„๋ก
  • ์‚ญ์ œ ๋ฒ„ํŠผ ๋ˆ„๋ฅด๋ฉด ํ•ด๋‹น todo ์‚ญ์ œ
  • ์Šคํฌ๋กค๋ฐ” ํ•ญ์ƒ ์•„๋ž˜ ๊ณ ์ •

์‚ฌ์‹ค ์ €๋ฒˆ์ฃผ์— ๊ตฌํ˜„ํ•œ TO DO LIST๋Š” ์กฐ๊ฑด์„ ๋‹ค ๋งŒ์กฑ์‹œํ‚ค์ง€ ๋ชปํ•œ ๋ฏธ์™„์„ฑ TO DO LIST์˜€๋‹ค๐Ÿ˜ข
๊ทธ!๋ž˜!์„œ! ์ด๋ฒˆ์ฃผ์—๋Š” ์กฐ๊ฑด์„ ๋‹ค ๋งŒ์กฑํ•˜๋Š” TO DO LIST๋ฅผ ์™„์„ฑํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.

๊ตฌํ˜„ํ•˜์ง€ ๋ชป ํ–ˆ๋˜ ๊ธฐ๋Šฅ

  • todo ์ƒ์„ฑ์‹œ ์ƒ์„ฑ ์‹œ๊ฐ„ ํ‘œ์‹œ
  • ์Šคํฌ๋กค๋ฐ” ํ•ญ์ƒ ์•„๋ž˜ ๊ณ ์ •

์ž‘์„ฑ ์ฝ”๋“œ ๐Ÿ’ป

- HTML Code

<!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>

- JS Code

โœ” TODO ์ƒ์„ฑ ์‹œ ์ƒ์„ฑ ์‹œ๊ฐ„ ํ‘œ์‹œํ•˜๊ธฐ


//์‹œ๊ฐ„ ์ถœ๋ ฅ
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 ์ƒ์„ฑ์ž๋ช…();

innerHTML๊ณผ innerText์˜ ์ฐจ์ด

.innerText : ์š”์†Œ์•ˆ์˜ text ๊ฐ’๋“ค๋งŒ์„ ๊ฐ€์ ธ์˜จ๋‹ค.
.innerHTML : innerText์™€๋Š” ๋‹ฌ๋ฆฌ ์š”์†Œ์•ˆ์˜ HTML์ด๋‚˜ XML์„ ๊ฐ€์ ธ์˜จ๋‹ค.

์‹คํ–‰ ํ™”๋ฉด

ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…

  • TODO ์ƒ์„ฑ ์‹œ ์ƒ์„ฑ ์‹œ๊ฐ„ ํ‘œ์‹œํ•˜๊ธฐ ๊ตฌํ˜„ํ•  ๋•Œ์— ๋ฐœ์ƒ
  1. ์‹œ๊ฐ„์„ ํ™”๋ฉด์— ํ‘œ์‹œ๊นŒ์ง€ ํ–ˆ์ง€๋งŒ, ์‚ฌ์šฉ์ž๊ฐ€ ํ•  ์ผ์„ ๋‹ค ํ–ˆ๋‹ค๊ณ  ์™„๋ฃŒ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ๋‚˜ ์‚ญ์ œ๋ฅผ ํ–ˆ์„ ๊ฒฝ์šฐ 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์•ˆ์— ๋„ฃ์–ด์คŒ์œผ๋กœ์จ ์‚ฌ์šฉ์ž๊ฐ€ ์™„๋ฃŒ๋ฅผ ๋ˆŒ๋ €๊ฑฐ๋‚˜ ์‚ญ์ œ๋ฅผ ํ–ˆ์„ ๋•Œ, ์‹œ๊ฐ„๋„ ํ•จ๊ป˜ ์‚ฌ๋ผ์ง€๋„๋ก ๊ตฌํ˜„ ์™„๋ฃŒํ•˜์˜€๋‹ค!

  1. ์‹œ๊ฐ„์€ 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๋ฌธ๋ฒ•์ด ์ž๋ฆฌ์žกํžŒ ๊ฒƒ ๊ฐ™๋‹ค.
(์—ญ์‹œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ณ„์† ํ•ด๋ด์•ผ ์‹ค๋ ฅ์ด ๋А๋Š”..^_^)
์ธํ”„๋Ÿฐ, ๋…ธ๋งˆ๋“œ์ฝ”๋” ์‚ฌ์ดํŠธ์— ์ข‹์€ ๊ฐ•์˜ ๋งŽ๋˜๋ฐ ํ•˜๋‚˜์”ฉ ๋”ฐ๋ผํ•ด๋ณด๋ฉด์„œ ๋” ๋งŽ์€ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•ด๋ด์•ผ๊ฒ ๋‹ค !!!โœŠโœŠ

0๊ฐœ์˜ ๋Œ“๊ธ€