크롬 앱 만들기

2. User name

⭐ form에 Username을 입력하면 Hello 'Username' 하고 greeting 문구가 뜨도록 하기 !

• event.preventDefault() username 입력 후 submit 되지 않도록 했다.
• localStorage.setItem() username을 localStorage에 저장하여 다시 이름을 물어보지 않도록 했다.
• .classList.add(SHOWING_CN) .showing 클래스가 추가 되었을 때 display 되도록 했다.

<!--HTML-->
<form class="js-form form">
        <input type="text" placeholder="What is your name?" />
    </form>
    <h4 class="js-greetings greetings"></h4>
<script src="greeting.js"></script>

/* CSS */
.form,
.greetings{
    display: none;
}
.showing{
    display: block;
}

// javascript
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
greeting = document.querySelector(".js-greetings");

const USER_LS="currentUser",
SHOWING_CN = "showing";

// form에 입력한 text를 저장한다.
function saveName(text){
    localStorage.setItem(USER_LS, text);
}

// form에 입력받은 후 greeting 문자를 나타내고 username을 저장한다.
function handleSubmit(event){
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
    saveName(currentValue);
}

// form에 class를 추가하여 form-box가 나타나도록 하고 submit 되면 handSubmit 함수를 실행한다.
function askForName(){
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit",handleSubmit);
}

// class 위치를 옮겨 form box가 사라지고 greeting 문구가 나타나도록 한다.
function paintGreeting(text){
    form.classList.remove(SHOWING_CN);
    greeting.classList.add(SHOWING_CN);
    greeting.innerText = `Hello ${text}`;
}

// lacalStorage에 user가 있을 때 printGreeting 함수를 실행하고, user가 없을 때 askForname함수를 실행한다.
function loadName(){
    const currentUser = localStorage.getItem(USER_LS);
    if (currentUser === null){
        askForName();
    } else {
        paintGreeting(currentUser)
    }
}

// loadName 함수를 실행한다.
function init(){
    loadName();
}
init();

3. To Do List

⭐ form에 To Do List를 입력하면 삭제 버튼과 목록이 뜨도록 하기!
⭐ 삭제버튼을 눌러 하나씩 삭제할 수 있도록 하기!

• createElement와 appendChild()를 이용하여 HTML에 li, button, span element를 추가했다.
• .target과 .parentNode 로 특정하고, removeChild() 를 이용하여 element를 삭제했다.

<!--HTML-->
<form class="js-toDoForm">
        <input type="text" placeholder="Write a to do" />
    </form>
    <ul class="js-toDoList">
    </ul>
<script src="todo.js"></script>

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

const TODOS_LS = 'toDos';

let toDos =[];

// 버튼을 눌러 ToDos를 지운다.
function deleteToDo(event){
    const btn = event.target;
    const li = btn.parentNode;
    toDoList.removeChild(li);
    // filter
    const cleanToDos = toDos.filter(function(toDo){
    // parseInt string을 number로 바꿔준다.
    return toDo.id !== parseInt(li.id);
});
// 새로고침 후에도 삭제한 리스트가 나오지 않도록 한다.
toDos = cleanToDos
saveToDos();
}

// toDos를 가져와서 localStorage에 저장한다.
function saveToDos(){
    // JSON.stringify javascript object를 string으로 바꿔준다.
    // JSON: JavaScript Object Notation
    localStorage.setItem(TODOS_LS, JSON.stringify)(toDos);
}

// li, delBtn, span, newID를 만든다.
function paintToDo(text){
    // createElement HTML에 element를 생성한다.
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.lentgh +1;
    delBtn.innerText = "❌";
    delBtn.addEventListener("click", deleteToDo);
    span.innerText = text;
    // appendChild HTML에 하위 element를 생성한다.
    li.appendChild(delBtn);
    li.appendChild(span);
    li.id = newId;
    toDoList.appendChild(li);
    const toDoObj ={
        text: text,
        id: newId
    };
    saveToDos();
    toDos.push(toDoObj);
}

// form에 입력받은 후 ToDo list를 만든다.
function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value="";
}

// localStorge에 ToDos가 없을 때 paintToDo 함수를 실행한다.
function loadToDos(){
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if(loadedToDos !== null){
        // JSON.parse string을 object로 바꿔준다.
        const parsedToDos = JSON.parse(loadedToDos);
        // forEach 모든 item에 함수를 실행한다.
        parsedToDos.forEach(function(toDo){
            paintToDo(toDo.text);
        });
    } 
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit)
}

init();

해결해야 할 문제

• 전체적으로 잘 모르겠다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 복습복습복습
• 내가 입력한 문자가 아닌 placeholder 문구가 뜨도록 하고싶다.
  
• user name 입력 후 새로고침한 페이지에서 엔터할 때마다 To Do List가 저장되지 않는다.
  

(2021.02.03 수정)

• placeholder 문구가 나만 안뜨는 거였다 ^-^ 오타 때문인가 ^-^
  
• 새로고침 하고도 ToDoList를 유지하려면, ToDoList를 추가하는 것 다음에 저장하기를 실행해야 한다.
  
• 새로고침 하고 삭제한 ToDoList가 같이 유지된다.. >오타를 줄이자 ^-^