diff --git a/css/login.css b/css/login.css new file mode 100644 index 0000000..4d63747 --- /dev/null +++ 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 new file mode 100644 index 0000000..0cb4349 --- /dev/null +++ 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 new file mode 100644 index 0000000..e93247f --- /dev/null +++ b/delete.html @@ -0,0 +1,10 @@ + + + + + + + 지워져 제발.... + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..076e619 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + login + + + + + +
+ +
+ +
+
+

2021 SMARCLE Makers-day 박람회에 오신 것을 환영합니다!

+
+
+ 당신의 이름은 무엇인가요? +
+ +
+ +
+
+ 당신의 신분은 무엇인가요? +
+ +
+ +
+
+ + + + + + diff --git a/javascript/login.js b/javascript/login.js new file mode 100644 index 0000000..68f7a0a --- /dev/null +++ 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(); +} \ No newline at end of file diff --git a/js/modal.js b/js/modal.js new file mode 100644 index 0000000..e69de29 diff --git a/login.html b/login.html deleted file mode 100644 index 8389d7e..0000000 --- a/login.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - login - - - -
-
- -
- -
-
-
- - -
- - diff --git a/modal.html b/modal.html new file mode 100644 index 0000000..316fd14 --- /dev/null +++ b/modal.html @@ -0,0 +1,97 @@ + + + + + + + Document + + + + + + + + + diff --git a/package-lock.json b/package-lock.json index 200e0d0..b635974 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,8 @@ { - "requires": true, + "name": "simulation", + "version": "1.0.0", "lockfileVersion": 1, + "requires": true, "dependencies": { "@babel/code-frame": { "version": "7.14.5", diff --git a/package.json b/package.json index bfdaf80..bbfd2e2 100644 --- 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": [] }