이것저것

크롬 Momentum 클론코딩(ToDo List) 본문

JavaScript

크롬 Momentum 클론코딩(ToDo List)

곰태태 2021. 9. 3. 12:07
반응형
SMALL

todo list를 작성하기 위해 todo.js 파일을 새로 생성해준다.

<!DOCTYPE html>
<html>
    <head>
        <title>Somethings</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div class="js-clock">
            <h1>00:00</h1>
        </div>
        <form class="js-form form">
            <input type="text" placeholder="What is your name?" />
        </form>
        <h4 class="js-gretting gretting"></h4>
        <!--ToDo List 추가-->
        <form class="js-toDoForm">
            <input type="text" placeholder="Write a to do" />
        </form>
        <ul class="js-toDoList">
        </ul>
        <script src="clock.js"></script>
        <script src="gretting.js"></script>
    </body>
</html>

index.html 파일에 todo list의 form을 생성해준다.

class의 이름은 js-toDoForm와 같이 무슨 작업을 하는지 알기 쉽게 만들어준다.

form 밑부분에는 추가한 리스트가 들어가야하므로 ul태그를 추가해준다.

/*const form = document.querySelector(".js-toDoForm"),
    input = form.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");*/
    
const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");

todo.js 파일로 넘어가서 form과 input 객체를 생성하였는데 gretting.js에 들어가보면 같은 객체가 있는 것을 볼 수 있다.

이럴 경우에 충돌이 일어나기때문에 처음에 gretting.js의 form과 input을 작성할때 이름을 겹치지 않게 지어줬어야한다.

gretting은 이미 작성을 완료했기에 todo에 있는 form과 input의 이름을 수정해줄것이다.

//다른 사람과 같이 작업을 같이 하는 경우였다면 충돌이 일어나지 않게 gretting도 객체명을 수정해 주는것이 좋을 것같다.

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = 'toDos';

function loadToDos(){
    const toDos = loacalStorage.getItem(TODOS_LS);
    if(toDos !== null){
    }
}

function init(){
    loadToDos();
}

init();

todo list를 불러오기 위한 작업을 하기위해서 loadToDos라는 함수를 생성하였다.

todo list는 localStorage에 저장할것이기 때문에 localStorage.getItem을 통해서 불러온다.

TODOS_LS 객체는 todo localStorage를 약자로 작성했다.

loadToDos의 if문은 toDos가 null값이 아닐때 todo list가 출력되도록 할것이다.

toDos가 null이면 아무것도 출력하지 않으므로 else문은 작성할 필요가 없다.

하지만 if문에 들어갈것은 아직 작성하지 않았으므로 잠시 비워두고 작업한다.

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = 'toDos';

function paintToDo(text){
    console.log(text);
}

function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value = "";
}

function loadToDos(){
    const toDos = localStorage.getItem(TODOS_LS);
    if(toDos !== null){
    }
}
function init(){
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit);
}

init();

toDoForm에서 submit할때의 이벤트를 작성할 것이다.

handleSubmit에 preventDefault는 전에도 적었지만 submit 됨과 동시에 새로고침이 되는 것을 막기 위한 것이다.

(preventDefault가 없으면 submit이 되면 결과가 나오고 바로 새로고침되며 결과가 사라진다.)

toDoForm에서 받은 submit이 toDoInput으로 받을수 있으므로 currenValue라는 객체에 submit 값을 저장해준다.

그리고 paintToDo라는 함수를 만들어서 currentValue를 받을 것이다.

paintToDo에 제대로 들어오는지 확인하기 위해 log를 찍어줬다.

화면에 input 창에 입력값이 그대로 남아있는 것을 없애주기위해 toDoInput.value = "";를 작성해줬다.

정상적으로 작동하는 것을 확인할 수 있었다.

이제 paintToDo에 리스트를 작성하면 생성되도록 만들 것이다.

function paintToDo(text){
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    delBtn.innerText = "❌";
    const span = document.createElement("span");
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    toDoList.appendChild(li);
}

createElement는 document에 요소를 생성해준다.

documetn.creatElement("li")는 <li></li>를 생성해준다.

delBtn은 삭제 버튼을 만들기위해 생성하였다.

span을 사용해서 입력값을 출력할 것이다.

span과 div의 차이점은 간단하게 설명하면 div는 박스로 영역을 생성하고 span은 줄 단위로 영역이 설정된다.

예를 들어서 10칸의 범위를 갖고있는 공간에 5글자를 입력했을때 div는 10까지의 칸을 전부 차지하고 span은 5까지만 차지한다.

D I V 형 식          
S P A N !

appenChild는 

반응형
LIST

'JavaScript' 카테고리의 다른 글

크롬 Momentum 클론코딩(사용자)  (0) 2021.06.01
크롬 Momentum 클론코딩(시계)  (0) 2021.05.31
JavaScript에서 init을 왜 쓰는 걸까..??  (0) 2021.05.31
자바스크립트 기본 끄적끄적2  (0) 2021.05.28
자바스크립트 기본 끄적끄적  (0) 2021.05.25
'JavaScript' Related Articles more
Comments