노마드(4.1~4.5)

GDSC-DEU · Aug 20, 2024 · 1a1f6b6 · 1a1f6b6
1 parent cf49f04
commit 1a1f6b6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/yoojin/노마드/app.js b/yoojin/노마드/app.js
@@ -1,12 +1,16 @@
+const loginForm = document.querySelector("#login-form ");
 const loginInput = document.querySelector("#login-form input");
-const loginButton = document.querySelector("#login-form button");
+const greeting = document.querySelector("#greeting");
 
-function onLoginBtnClick() {
-  console.log("hello", loginInput.value);
-}
+const HIDDEN_CLASSNAME = "hidden";
 
-if (loginButton) {
-  loginButton.addEventListener("click", onLoginBtnClick);
-} else {
-  console.error("loginButton이 존재하지 않습니다.");
+function onLoginSubmit(event) {
+  event.preventDefault();
+  loginForm.classList.add(HIDDEN_CLASSNAME);
+  const username = loginInput.value;
+  localStorage.setItem("username", username);
+  greeting.innerText = "Hello" + username;
+  greeting.classList.remove(HIDDEN_CLASSNAME);
 }
+
+loginForm.addEventListener("submit", onLoginSubmit);
diff --git a/yoojin/노마드/index.html b/yoojin/노마드/index.html
@@ -7,10 +7,8 @@
     <title>Momentum App</title>
   </head>
   <body>
-    <div id="login-form">
-      <input type="text" placeholder="What is your name?" />
-      <button>Log In</button>
-    </div>
+    <form id="login-form"></form>
+    <h1 id="greeting" class="hidden"></h1>
     <script src="app.js"></script>
   </body>
 </html>
diff --git a/yoojin/노마드/style.css b/yoojin/노마드/style.css
@@ -0,0 +1,3 @@
+.hidden {
+  display: none;
+}