"인용구, 사진추가 보면서 따라해보기. todoList 살짝"

project/Script/Background.js

@@ -0,0 +1,12 @@
+
+const images = [0, 1];
+
+imagesOrder = images[Math.floor(Math.random()*images.length)];
+
+const bgImage = document.createElement("img");//태그 만들기 
+
+bgImage.src = `img/${imagesOrder}.png`;
+
+
+document.body.appendChild(bgImage);//태그를 바디 안에 달아주기
+

project/Script/Login.js

@@ -11,7 +11,7 @@ if (localStorage.getItem("userName") === null) {
 
 function submitForm(event) {
   event.preventDefault;
-  userName = document.querySelector("input").value;
+  const userName = document.querySelector("input").value;
   localStorage.setItem("userName", userName);
   loginForm.classList.add("hidden");
   doGreeting(userName);

project/Script/Quotes.js

@@ -0,0 +1,22 @@
+const quotes = [
+  {
+    quote: "가라 소년! 살아서 미래를 열어라!",
+    author: "그라함 에이커",
+  },
+  {
+    quote: "오랜만입니다. 핸들러 원.",
+    author: "신에이 노우젠",
+  },
+  {
+    quote: "은혼대사",
+    author: "사카타 긴토키3",
+  },
+
+];
+
+const quote = document.querySelector("#quote span:first-child");
+const author = document.querySelector("#quote span:last-child");
+
+const order = Math.floor(Math.random()*quotes.length);
+quote.innerText =  quotes[order].quote;
+author.innerText = quotes[order]['author'];

project/Script/Todo.js

@@ -0,0 +1,28 @@
+const todoForm = document.querySelector("#todoForm");
+
+
+const todoList = document.querySelector("#todoList");
+
+function todoSubmit(eventOccur){
+    const todoThings = todoForm.querySelector("input").value;//const 사용 유심히 보기
+
+    eventOccur.preventDefault();
+    localStorage.setItem("todoThings", todoThings);
+
+    /*
+    const createTodoThings = document.createElement("ul")
+    todoList.appendChild(createTodoThings)
+    todoList.querySelector("ul").innerText = localStorage.getItem("todoThings")
+    */
+    todoForm.querySelector("input").value=''; //요소 수정
+    //todoThing =''; //const를 사용해서 변경이 안된다.
+}
+
+todoForm.addEventListener("submit", todoSubmit);
+
+
+let b = 10;
+const a = b;
+b=5;
+
+console.log(a);

project/practice.html

@@ -22,7 +22,21 @@ <h1 id="greeting" class="hidden"></h1>
 
     <h2 id="clock"></h2>
 
+    <div id="quote">
+      <span></span>
+      <span></span>
+    </div>
+
+
+    <form id="todoForm">
+      <input type="text"  placeholder="Write a To Do and press Enter">
+    </form>
+    <ul id="todoList"></ul>
+
     <script defer src="Script/Login.js"></script>
     <script defer src="Script/Clock.js"></script>
+    <script defer src="Script/Quotes.js"></script>
+    <script defer src="Script/Background.js"></script>
+    <script defer src="Script/Todo.js"></script>
   </body>
 </html>