From a80f82d86f6f8505157b70546d65b5a605a8b1bf Mon Sep 17 00:00:00 2001 From: MinGyeong Kim Date: Tue, 13 Aug 2024 19:24:18 +0900 Subject: [PATCH] 4.2 --- minkyong/JavaScript Study/app.js | 16 ++++++ minkyong/JavaScript Study/index.html | 31 ++++++++++++ minkyong/JavaScript Study/style.css | 76 ++++++++++++++++++++++++++++ 3 files changed, 123 insertions(+) create mode 100644 minkyong/JavaScript Study/app.js create mode 100644 minkyong/JavaScript Study/index.html create mode 100644 minkyong/JavaScript Study/style.css diff --git a/minkyong/JavaScript Study/app.js b/minkyong/JavaScript Study/app.js new file mode 100644 index 0000000..8608aff --- /dev/null +++ b/minkyong/JavaScript Study/app.js @@ -0,0 +1,16 @@ +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(); + loginForm.classList.add("hidden"); + const username = loginInput.value; + greeting.innterText = "Hello" + username; + greeting.classList.remove("hidden"); +} + +loginForm.addEventListener("submit", onLoginSubmit); + diff --git a/minkyong/JavaScript Study/index.html b/minkyong/JavaScript Study/index.html new file mode 100644 index 0000000..ed887de --- /dev/null +++ b/minkyong/JavaScript Study/index.html @@ -0,0 +1,31 @@ + + + + + + + Document + + +
+

Login

+ + +
+ + + + +
+ + go to coureses + +
+

+ + + + + \ No newline at end of file diff --git a/minkyong/JavaScript Study/style.css b/minkyong/JavaScript Study/style.css new file mode 100644 index 0000000..a9dab13 --- /dev/null +++ b/minkyong/JavaScript Study/style.css @@ -0,0 +1,76 @@ +*{ + margin: 0; + padding: 0; + list-style: none; + /* text-decoration: none; */ + box-sizing: border-box; +} + +.hidden{ + display: none; +} + +body{ + font-size: 14px; +} +.Login{ + width: 400px; + height: 350px; + padding: 40px; + margin: 0 auto; +} + +.Login > h2{ + font-size: 24px; + color: #00c234; + margin-bottom: 20px; + +} +#login-form > input{ + width: 100%; + height: 48px; + padding: 0 10px; + box-sizing: border-box; + margin-bottom: 16px; + border-radius: 6px; +} +#login-form > input::placeholder{ + color: #D2D2D2; +} +#login-form > input[type="submit"]{ + /* width: 100%; + height: 48px; + border-radius: 6px; */ + color: #fff; + font-size: 16px; + background-color: #00c234; + margin-top: 20px; + border: none; + cursor: pointer; +} + +#login-form > input[type="checkbox"]{ + display: none; +} +#login-form > label{ + color: #999999; +} + + + + + + + +/* #login-form input[type="checkbox"] + label{ + cursor: pointer; + padding-left: 26px; + background-image: url("checkbox.png"); + background-repeat: no-repeat; + background-size: contain; +} +#login-form input[type="checkbox"]:checked + label{ + background-image: url("checkbox-active.png"); + background-repeat: no-repeat; + background-size: contain; +} */ \ No newline at end of file