バニラJSを使ってChromeアプリを作成(2)[整理中]

HTML

<div class="js-clock">
    <h1></h1>
</div>

<form class="js-form form">
    <input type="text" placeholder="What is your name?" />
</form>

<h4 class="js-greetings greetings"></h4>

<form class="js-toDoForm">
    <input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList"></ul>

JS

const clockContainer = document.querySelector(".js-clock"); // .class
const clockTitle = clockContainer.querySelector("h1");

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

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

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

const TODOS_LS = "toDos";

function paintToDo(text) {
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");

    delBtn.innerText = "❌";
    span.innerText = text;
    
    li.appendChild(span);
    li.appendChild(delBtn);
    toDoList.appendChild(li);
}

function handleSubmit(event) {
    event.preventDefault(); // enter 누르면 원상태로 돌아가는 것 방지

    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value = ""; // enter 누르면 다시 공백으로 만듦
}

function loadToDos() {
    const toDos = localStorage.getItem(TODOS_LS);

    if (toDos !== null) {
    }
}

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

init();

Key:hello
Value:true
localStorage.getItem('hello')
>>"true"//not boolean, but string
JSはローカルストレージのデータを格納できません.Stringとしてのみ保存できます.
そのため、objectをstringにしなければなりません.
JSON.stringfy
JSON (Object Notation)

querySelector()

ノードの最初のサブノードを返します
(#title) : id
(.title) : class
JSはイベントに応答するために作成される.
event : click, resize, submit, input, change, load, before closing, printing..

addEventListener("event", func)

のアクティビティを待機します.

必要に応じてfunc

を呼び出す

func()自動即時コール

イベントを処理する関数を作成するたびに、JSは自動的に関数をオブジェクトに貼り付けます.