<복습>
https://wook-2124.tistory.com/86
[JavaScript] #3.4 Saving the User Name part Two (#코딩공부)
https://youtu.be/7gYwj8vh_OQ <복습> https://wook-2124.tistory.com/85 [JavaScript] #3.3 Saving the User Name part One (#코딩공부) https://youtu.be/lXxlGCRBOQU <복습> https://wook-2124.tistory.com/83..
wook-2124.tistory.com
<준비물>
Online IDE, Editor, and Compiler - Fast, Powerful, Free
Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin (beta), QBasic, Forth, LOLCODE, BrainF, Emoticon, Bloop, Unlambda, JavaScript, CoffeeS
repl.it
<코드기록>
// "js-toDoForm", "js-toDoList" class, <meta charset="utf-8" /> 추가 (delBtn인 ✖ 이모티콘이 읽히지 않음)
// UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나로
// Universal Coded Character Set + Transformation Format – 8-bit의 약자임
// https://ko.wikipedia.org/wiki/UTF-8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JH</title>
<link href="style.css" rel="stylesheet" />
</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-greeting greeting"></h4>
<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="greeting.js"></script>
<script src="todo.js"></script>
</body>
</html>// User Name을 LS에 저장할 때와 같이 코드 작성
// init(initialize 초기화) 함수로 loadToDo와 handleSubmit를 실행시켜 LS에 저장되게끔함
// 여기서는 toDo가 null 값이 아닐(!)경우에만 반응
const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoform.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");
const = TODO_LS = "toDo"
function paintToDo(text){
console.log(text)
}
function handleSubmit(event){
event.preventDefault();
const currentValue = toDoInput.value;
paintToDo(currentValue);
}
function loadToDo() {
const toDo = localStorage.getItem(TODO_LS);
if(toDo !== null){
}
}
function init() {
loadToDo();
toDoForm.addEventListener("submit", handleSubmit);
}
init();
// toDoInput.value = "";
// Enter를 치면 text가 console로 "submit"되고, "Wirte a to do"로 다시 빈칸이 채워짐
function handleSubmit(event) {
event.preventDefault();
const currentValue = toDoInput.value;
paintToDo(currentValue);
toDoInput.value = "";
}
// createElement
// text를 입력하면 document에 li Element를 create(생성)하고
// delBtn(delete Button), span Element 역시 document에 create(생성)해줌
// appendChild
// span, delBtn을 따로따로 li에 append(추가)하고 마지막으로 li를 ul class인 toDoList에 append(추가)함
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);
}
// 최종 코드
const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoform.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");
const = TODO_LS = "toDo"
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);
}
function handleSubmit(event) {
event.preventDefault();
const currentValue = toDoInput.value;
paintToDo(currentValue);
toDoInput.value = "";
}
function loadToDo() {
const toDo = localStorage.getItem(TODO_LS);
if(toDo !== null){
}
}
function init() {
loadToDo();
toDoForm.addEventListener("submit", handleSubmit);
}
init();1. index.html, To do List 사전준비하기
delBtn인 ✖ 이모티콘이 읽히지 않아서 <meta charset="utf-8">을 추가하고 To do List를 만들기 위한 "js-toDoForm", "js-toDoList" class를 추가해서 JavaScript와 연동했다.
다음으로 <form class="js-toDoForm">안에 <input type="text" placeholder="Write a to do" />로 저번에 했던 "js-greeting"과 같이 text를 입력할 수 있는 placeholder를 추가했다.
https://ko.wikipedia.org/wiki/UTF-8
UTF-8 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 둘러보기로 가기 검색하러 가기 UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나로, 켄 톰프슨과 롭 파이크가 만들었다. UTF-8은 Universal Coded Character Set + Transformation Format – 8-bit 의 약자이다. 본래는 FSS-UTF(File System Safe UCS/Unicode Transformation Format)라는 이름으로 제안되었다. UTF-8
ko.wikipedia.org
*UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나로 Universal Coded Character Set + Transformation Format – 8-bit의 약자이다.
2. toDo.js, To do List 만들기
currentUser를 value의 값으로 LS에 저장할 때와 같이 코드를 작성했다. 먼저 "js-toDoForm" <form class>와 그 안에 있는 input, 그리고 <ul class>인 "js-toDoList"를 querySelector로 찾고,
init(initialize 초기화) 함수로 loadToDo와 handleSubmit를 실행시켜 To do List에 적는 값이 LS에 저장되게끔하고, greeting.js와는 다르게 여기서는 if의 condition(조건)으로 toDo가 null 값이 아닐(!)경우에만 반응하도록 했다.
function paintToDo(text)의 console.log(text)로 "Wirte a to do"에 입력한 text가 console에 출력해봤다.
toDoInput.value = "__"로 "Write a to do"(toDo)에 text를 입력하고 Enter를 치면 text가 console로 "submit"되고, "Wirte a to do"는 다시 "__"(빈칸)으로 채워진다.
createElement는 말 그대로 html(document)에 Element를 create 하는 것이다. 즉, 어떤 text를 입력하게 되면 document에 li Element를 create(생성)하고 delBtn(delete Button), span Element 역시 document에 create하는 const를 정의했다.
그리고 appendChild로 span, delBtn을 따로따로 document li Element의 child(하위 class)로 append(추가)하고, 마지막으로 li Element를 상위 class인 toDoList(ul class)에 append(추가)한다.
<"form class="js-toDoForm">("Write a to do" 빈칸) 다음으로 <ul class="js-toDoList">가 있고, <ul class>의 하위 class로 <li>가 append(추가)됐고, 또 그 밑으로 span(text 내용)과 button(X 표시)이 append(추가)되어 있다.
그리고 마지막으로 위의 paintToDo가 기능이 끝나면, toDoInput.value = "__"가 실행되어 "Wirte a to do"가 다시 빈칸이 된다.
※ 코로나19 조심하세요!!!!
'JavaScript > Clone Website' 카테고리의 다른 글
| [JavaScript] #3.7 Making a To Do List part Three (#코딩공부) (0) | 2020.04.01 |
|---|---|
| [JavaScript] #3.6 Making a To Do List part Two (#코딩공부) (0) | 2020.03.31 |
| [JavaScript] #3.4 Saving the User Name part Two (#코딩공부) (0) | 2020.03.28 |
| [JavaScript] #3.3 Saving the User Name part One (#코딩공부) (0) | 2020.03.27 |
| [JavaScript] #3.2 Making a JS Clock part Two (#코딩공부) (0) | 2020.03.25 |
댓글