🗓 진행일: 3월 18일
📎 7.0 ~ 7.4
오늘부터 4일 챌린지네
나의 깃헙 실력을 뽐내라니... 제일 어려운 요구 사항이다;
오늘 5개 듣고, 내일 5개 듣고, 일요일에 1개 듣고 프로젝트 하기
7.0 Setup
html에 새로운 js 추가하고, 투두 관련 요소 넣어줌
index.html
<!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 App</title>
</head>
<body>
<form id="login-form" class="hidden">
<input required maxlength="15" type="text" placeholder="What is your name?" />
<button>Log In</button>
</form>
<h2 id="clock">00:00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter" required/>
</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/background.js"></script>
<script src="js/todo.js"></script>
</body>
</html>todo.js
// todo-form에서 적으면 javascript에서 todo-list에 추가해주기
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
}
toDoForm.addEventListener("submit", handleToDoSubmit);7.1 Adding ToDos
우리가 작성한 투두 텍스트를 span, li에 담아서 ul에 넣어보는 작업
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
function paintToDo(newTodo) {
// toDo를 그리는 역할
const li = document.createElement("li");
const span = document.createElement("span");
// li 안에 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);7.2 Deleting To Dos
x 라는 내용을 버튼 내에 넣고, 눌렀을 때 사라지도록 함 (어떤 게 눌렸는지 알기 위해 event.target.parentElement) 사용
todo.js
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
function deleteToDo(event) { // target: 클릭된 element
const li = event.target.parentElement;
li.remove();
}
function paintToDo(newTodo) {
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newTodo;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
paintToDo(newToDo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);7.3 Saving To Dos
localStorage에 저장하기
저장 시에 그냥 a, b, c로 저장하지 않고 toString 처럼 저장
todo.js
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
const toDos = [];
function saveToDos() { // 저장 중,,
localStorage.setItem("todos", JSON.stringify(toDos)); // 배열을 stringify로 저장해서 배열 형태로
}
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
}
function paintToDo(newTodo) {
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newTodo;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);7.4 Loading To Dos part One
localStorage에 저장된 값들을 불러오는데, string으로 저장되어 있는 걸 parse로 변환해줌
그리고 그걸 forEach로 돌려버렸음
todo.js
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "todos";
const toDos = [];
function saveToDos() { // 저장 중,,
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); // 배열을 stringify로 저장해서 배열 형태로
}
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
}
function paintToDo(newTodo) {
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newTodo;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo );
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
if (saveToDos) { // savedToDos !== null
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach((item) => console.log("this is turn of ", item));
}
자존감은 일상의 성실함으로부터 온다