4.2

GDSC-DEU · Aug 13, 2024 · a80f82d · a80f82d
1 parent c8b01ba
commit a80f82d
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 0 deletions.
diff --git a/minkyong/JavaScript Study/app.js 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
@@ -0,0 +1,31 @@
+<!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">
+    <title>Document</title>
+</head>
+<body>
+    <div class="Login">
+        <h2>Login</h2>
+
+
+        <form  id="login-form" >
+            <input required maxlength="15" type="text" placeholder="아이디" >
+            <input type="password" name="userPassword" placeholder="비밀번호">
+            <label for="remember-check">
+                <input type="checkbox" id="remember-check">로그인 상태 유지
+            </label>
+            <input type="submit" value="로그인" />
+        </form>
+
+        <a href="https://www.naver.com/"> go to coureses</a>
+
+    </div>
+    <h1 id="greeting" class="hidden"></h1>
+
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/minkyong/JavaScript Study/style.css 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;
+} */