노마드(4.6~5.2)

GDSC-DEU · Aug 22, 2024 · 0b3f569 · 0b3f569
1 parent 1a1f6b6
commit 0b3f569
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 25 deletions.
diff --git a/yoojin/노마드/app.js b/yoojin/노마드/app.js
diff --git a/yoojin/노마드/css/style.css b/yoojin/노마드/css/style.css
diff --git a/yoojin/노마드/index.html b/yoojin/노마드/index.html
@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="css/style.css" />
     <title>Momentum App</title>
   </head>
   <body>
-    <form id="login-form"></form>
-    <h1 id="greeting" class="hidden"></h1>
-    <script src="app.js"></script>
+    <form class="hidden" id="login-form"></form>
+
+    <h2 id="clock">00:00:00</h2>
+    <h1 class="hidden" id="greeting"></h1>
+    <script src="js/greetings.js"></script>
+    <script src="js/clock.js"></script>
   </body>
 </html>
diff --git a/yoojin/노마드/js/clock.js b/yoojin/노마드/js/clock.js
@@ -0,0 +1,11 @@
+const clock = document.querySelector("h2#clock");
+
+function getClock() {
+  const date = new Date();
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+  clock.innerText = `${hours}:${minutes}:${seconds}`;
+}
+getClock();
+setInterval(getClock, 1000);
diff --git a/yoojin/노마드/js/greetings.js b/yoojin/노마드/js/greetings.js
@@ -0,0 +1,28 @@
+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) {
+  const username = localStorage.getItem(USERNAME_KEY);
+  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);
+}
diff --git a/yoojin/노마드/style.css b/yoojin/노마드/style.css