1

minkyong/JavaScript Study/index.html

@@ -27,7 +27,10 @@ <h1 id="greeting" class="hidden"></h1>
 
     <h2 id="clock">00:00:00</h2>
 
-    <script src="app.js"></script>
-    <script src="clock.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/greetings.js"></script>
+    <script src="js/clock.js"></script>
+    <script src="js/background.js"></script>
+    <script src="js/todo.js"></script>
 </body>
 </html>

minkyong/JavaScript Study/app.js → minkyong/JavaScript Study/js/app.js

@@ -2,7 +2,7 @@ const loginForm = document.querySelector("#login-form");
 const loginInput = document.querySelector("#login-form input");
 const greeting = document.querySelector("#greeting");
 
-const HIDDEN_CLASSNAME = "hidden";
+
 
 function onLoginSubmit(event){
     event.preventDefalut();

minkyong/JavaScript Study/js/background.js

@@ -0,0 +1,7 @@
+const images = ["0.jpeg", "1.jpeg", "2.jpeg"];
+const chosenImage = images[Math.floor(Math.random() * images.length)];
+
+
+const bgImage = document.createElement("img");
+bgImage.src = `img/${chosenImage}`;
+document.body.appendChild(bgImage);

minkyong/JavaScript Study/js/greetings.js

@@ -0,0 +1,31 @@
+const loginForm = document.querySelector("#login-form");
+const loginInput = document.querySelector("#login-form input");
+const greeting = document.querySelector("#greeting");
+
+const HIDDEN_CLASSNAME = "hidden";
+const USERNAME_KEY = "username";
+
+function onLoginSubmit(event) {
+  event.preventDefault();
+  loginForm.classList.add(HIDDEN_CLASSNAME);
+  const username = loginInput.value;
+  localStorage.setItem(USERNAME_KEY, username);
+  paintingGreetings(username);
+}
+
+
+function paintingGreetings(username) {
+  greeting.innerText = "Hello " + username;
+  greeting.classList.remove(HIDDEN_CLASSNAME);
+}
+
+
+const savedUsername = localStorage.getItem(USERNAME_KEY);
+
+
+if (savedUsername === null) {
+  loginForm.classList.remove(HIDDEN_CLASSNAME);
+  loginForm.addEventListener("submit", onLoginSubmit);
+} else {
+  paintingGreetings(savedUsername);
+}

minkyong/JavaScript Study/js/todo.js

@@ -0,0 +1,11 @@
+const toDoFrom = document.getElementById("todo-form");
+const toDoInput = toDoFrom.querySelector("input");
+const toDoList = document.getElementById("todo-list");
+
+function handleToDoSubmit(event) {
+  event.preventDefault();
+  const newTodo = toDoInput.value;
+  toDoInput.value = "";
+}
+
+toDoFrom.addEventListener("submit", handleToDoSubmit);