Wanna be Brilliant Full-Stack Developer

2/18 바닐라 JS 크롬앱 만들기 TO DO LIST 본문

Front-End

2/18 바닐라 JS 크롬앱 만들기 TO DO LIST

Flashpacker 2022. 2. 19. 00:29

목표 To Do List를 만들어보자!

첫번쨰로 우리가 필요한것은 form 이 필요하다 왜냐하면 사용자가 todo를 입력해야만 하고 list도 필요하다.사용자가 todo를 나열할 수 있어야 하기떄문이다! 

<!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="stylesheet" href="css/style.css" />
    <title>Momentum</title>
  </head>
  <body>
    <form class="hidden" id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <button>Log In</button>
    </form>
    <h2 id="clock">00:00:00</h2>
    <h1 class="hidden" id="greeting"></h1>
    <form id="todo-form">
      <input type="text" placeholder="Write a To Do and Press Enter" />
    </form>
    <ul id="todo-list"></ul>
    <div id="quote">
      <span></span>
      <span></span>
    </div>

    <script src="js/greetings.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/bacground.js"></script>
    <script src="js/todo.js"></script>
  </body>
</html>

이제는 form 과 ul을 JS로 가져가보자! 

form은 submit이벤트를(새로고침)  가지고 fucnction을 만들어 이 기본동작을 막아보려고한다

const toDoForm = document.getElementById("todo-form");
const toDoList = document.getElementById("todo-list");

function handleToDoSubmit(event) {
    event.preventDefault();

}


toDoForm.addEventListener("submit", handleToDoSubmit);

 

이렇게 handleToDoSubmit의 괄호안에 event를 넣으면 자바스크립트가 방금 발생한 event를 handleToDoSubmit 함수의 첫번쨰 인자로 준다는 것을 알고있다. 

 

다음으로는 우리는 여기 있는 input의 value을 얻고싶다! 

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

function handleToDoSubmit(event) {
    event.preventDefault();
    console.log(toDoInput.value);
}


toDoForm.addEventListener("submit", handleToDoSubmit);

다음으로 하고싶은건 input을 비우는건데 , enter를 누를떄마다 입력한것은 비우고싶다.

여기서 7번 라인에서 하는건 , input의 현재 value를 새로운 변수에 복사하는 것이다. 

그다음에 우리가 무엇을 하든 newToDo변수와는 아무 상관이 없다.

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
}


toDoForm.addEventListener("submit", handleToDoSubmit);

우리는 새로운 function paintToDo를 만들것이다. 이 function은 그리는것을 담당하는데 

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

function paintToDo(newToDo) {
    console.log("i will pain", newToDo);
}

function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newToDo);
}


toDoForm.addEventListener("submit", handleToDoSubmit);

우리는 input에서 value를 얻어서 paintToDo라는 새로운 function에 그값을 보내는것이다. 

우리는 paintToDo를 통해 li(list item)을 만들것이다. 

그 li를 ul(list)에 추가할것이다 .

li를 만들고 그 내부에 span도 만들고싶다.

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

function paintToDo(newToDo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);
    span.innerText = newToDo;
    console.log(li);
}

function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newToDo);
}


toDoForm.addEventListener("submit", handleToDoSubmit);

li.appendChild(span);이렇게 하면 li는 span이라는 자식을 가지게된다.

Span을 li내부에 집어넣었다는 것이다.

그 다음에는 텍스트를 span 내부에 넣었다

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

function paintToDo(newToDo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);
    span.innerText = newToDo;
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newToDo);
}


toDoForm.addEventListener("submit", handleToDoSubmit);

toDoList(ul)안에 li를 자식으로 넣으니 

근데 우리는 이 toDO를 지울 수 가 없다.. 새로고침하면 ToDo가 사라진다. 

 

결론:  우리는 submit event를 받았고, 기본 동작을 막고 ,input에서 value를 얻어냈고 

paintToDo라는 함수를 만들어서 element li를 생성하고 element span을 생성하고 

appendChild로 자식으로 넣어주기도하고 이전에 한것처럼 text를 바꿔주고 있다! 

'Front-End' 카테고리의 다른 글

2/17 바닐라 JS Quotes & Background  (0) 2022.02.17
2/16 JAVASCRIPT CLOCK #Intervals #timeout #padStart  (0) 2022.02.16
2/15 바닐라 JS 크롬앱 만들기 Loading Username  (0) 2022.02.15
2/15 바닐라 JS 크롬앱 만들기 Getting & Saving Username  (0) 2022.02.15
2/15 바닐라JS 크롬앱 만들기 Events #1 & #2  (0) 2022.02.15
'Front-End' Related Articles more