Palllang · yh4752 · Aug 16, 2021 · Aug 16, 2021 · Aug 17, 2021 · Aug 17, 2021
diff --git a/css/login.css b/css/login.css
@@ -0,0 +1,58 @@
+.login-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menu-bar {
+  width: 100%;
+  height: 60px;
+  background-color: navy;
+}
+
+.login-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-main header {
+  margin-bottom: 100px;
+}
+
+.login-main section {
+  margin-bottom: 70px;
+}
+
+.login-footer {
+  margin-bottom: 25px;
+}
+
+.ask {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 25px;
+  font-weight: bold;
+}
+
+.ask form input {
+  width: 300px;
+  font-size: 45px;
+  border: none;
+  border-bottom: 2px solid black;
+  margin-top: 40px;
+  text-align: center;
+}
+
+.ask form input:focus {
+  outline: none;
+  border-bottom-color: blue;
+}
+
+/* js 관련 css */
+.hidden {
+  display: none;
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,8 @@
+@import "./login.css";
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
diff --git a/delete.html b/delete.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=, initial-scale=1.0" />
+    <title>지워져 제발....</title>
+  </head>
+  <body></body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>login</title>
+    <link rel="stylesheet" href="css/style.css">
+
+  </head>
+
+  <body class="login-body">
+    <header class="menu-bar">
+      <nav></nav>
+    </header>
+
+    <main class="login-main">
+      <header>
+        <h1>2021 SMARCLE Makers-day 박람회에 오신 것을 환영합니다!</h1>
+      </header>
+      <section class="ask">
+        <span>당신의 이름은 무엇인가요?</span>
+        <form class="form-name">
+          <input type="text" class="input-name">
+        </form>
+        <span class="hidden name"></span>
+      </section>
+      <section class="ask">
+        <span>당신의 신분은 무엇인가요?</span>
+        <form class="form-position">
+          <input type="text" class="input-position">
+        </form>
+        <span class="hidden position"></span>
+      </section>
+    </main>
+
+    <footer class="login-footer">
+      <span>룰루 랄라</span>
+    </footer>
+
+    <script src="javascript/login.js"></script>
+  </body>
+</html>
diff --git a/javascript/login.js b/javascript/login.js
@@ -0,0 +1,59 @@
+const loginNameForm = document.querySelector(".form-name");
+const loginPositionForm = document.querySelector(".form-position");
+const loginNameInput = document.querySelector(".input-name");
+const loginPositionInput = document.querySelector(".input-position");
+
+const loginName = document.querySelector(".name");
+const loginPosition = document.querySelector(".position");
+
+const CLASS_HIDDEN = "hidden";
+
+const NAME_KEY = "name";
+const POSITION_KEY = "position";
+
+function nameSubmit(event) {
+  event.preventDefault();
+  loginNameForm.classList.add(CLASS_HIDDEN);
+  const name =loginNameInput.value;
+  localStorage.setItem(NAME_KEY, name);
+  paintName();
+}
+
+function positionSubmit(event) {
+  event.preventDefault();
+  loginPositionForm.classList.add(CLASS_HIDDEN);
+  const position =loginPositionInput.value;
+  localStorage.setItem(POSITION_KEY, position);
+  paintPosition();
+}
+
+function paintName() {
+  const name = localStorage.getItem(NAME_KEY);
+  loginName.innerText = `Hello ${name}`;
+  loginName.classList.remove(CLASS_HIDDEN);
+}
+
+function paintPosition() {
+  const position = localStorage.getItem(POSITION_KEY);
+  loginPosition.innerText = `Hello ${position}`;
+  loginPosition.classList.remove(CLASS_HIDDEN);
+}
+
+const savedName = localStorage.getItem(NAME_KEY);
+const savedPosition = localStorage.getItem(POSITION_KEY);
+
+if (savedName === null) {
+  loginNameForm.classList.remove(CLASS_HIDDEN);
+  loginNameForm.addEventListener("submit", nameSubmit);
+} else {
+  paintName();
+  paintPosition();
+}
+
+if (savedPosition === null) {
+  loginPositionForm.classList.remove(CLASS_HIDDEN);
+  loginPositionForm.addEventListener("submit", positionSubmit);
+} else {
+  paintName();
+  paintPosition();
+}
diff --git a/js/modal.js b/js/modal.js
diff --git a/login.html b/login.html
diff --git a/modal.html b/modal.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      @keyframes openmodal{
+        from{
+          animation-delay: 0.2s;
+          opacity: 0;
+        }
+        to{
+          opacity:1;
+        }
+      }
+
+      body {
+        height: 1000vh;
+        font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+          "Lucida Sans", Arial, sans-serif;
+      }
+      button {
+        all: unset;
+        background-color: steelblue;
+        color: white;
+        padding: 5px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+      .modal{
+        position: fixed;
+        top:0;
+        left:0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        animation: openmodal 1.5s ease-in-out;
+
+      }
+      .modal__overlay{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background-color: rgba(0, 0, 0 , 0.6);
+      }
+      .modal__content{
+        padding:50px 100px;
+        text-align: center;
+        background-color: seashell;
+        border-radius: 10px;
+        width: 30%;
+        box-shadow: 0 10px 20px rgba(0, 0, 0 , 0.19), 0 6px 6px rgba(0, 0, 0 , 0.23);
+      }
+      h1{
+        margin: 0;
+      }
+      .hidden{
+        display: none;
+      }
+
+    </style>
+  </head>
+  <body>
+    <button class="open">Open Modal</button>
+    <div class="modal hidden">
+      <div class="modal__overlay">
+        <div class="modal__content">
+        <h1>I'm a modal</h1>
+        <button class="close">❌</button>
+      </div>
+      </div>
+
+      </div>
+    </div>
+    <script>
+      const openButton = document.querySelector(".open");
+      const modal = document.querySelector(".modal");
+      const closeButton = document.querySelector(".close");
+
+      const openModal = () => {
+        modal.classList.remove("hidden");
+      }
+      const closeModal = () => {
+        modal.classList.add("hidden");
+      }
+      openButton.addEventListener("click",openModal);
+      closeButton.addEventListener("click",closeModal);
+    </script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,5 +20,6 @@
   "bugs": {
     "url": "https://github.com/Jiyajiwon/simulation/issues"
   },
-  "homepage": "https://github.com/Jiyajiwon/simulation#readme"
+  "homepage": "https://github.com/Jiyajiwon/simulation#readme",
+  "keywords": []
 }