fininshed JS 1hr

68c21566 · 이주창 · a654a546 · 68c21566 · 68c21566 · 68c21566
Commit 68c21566 authored 1 year ago by 이주창
--- a/JS/1hour/index.html
+++ b/JS/1hour/index.html
@@ -7,8 +7,95 @@
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 </head>
 <body>  
+    <div class=""container">
+        <div>이름 : <input type="text" id="name" value="" /></div>
+        <div>지역 : 
+            <select id="city" onchange="changeCity();">
+                <option value="02">서울</option>
+                <option value="064">제주</option>
+            </select>
+        </div>
+        <div>동네 : 
+            <select id="region_02">
+                <option value="">강남</option>
+                <option value="">서초</option>
+            </select>
+            <select id="region_064" style="display:none">
+                <option value="">제주시</option>
+                <option value="">서귀포시</option>
+            </select>
+        </div>
+        <button id="button" onclick="regist();">등록</button>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
+    
+
    <script>
+        function regist() {
+            //Jquery 이용
+            alert($("name").val());
+            alert($("city").val());
+
+            let obj={};
+
+            obj.name = $("#name").val();
+            obj.city = $("#city").val();
+
+            printConsole(obj);
+            // printConsole2(name,city);
+        }
+        
+        function loadCity() {
+            let city = [{
+                    code: "02",
+                    name: "서울"
+                },
+                {
+                    code: "064",
+                    name: "제주"    
+                },
+                {
+                    code: "051",
+                    name: "부산"
+                }
+            ];
+
+            for(let i=0; i<city.length; i++){
+                if(i==0) $('city').append('<option value="'+city[i].code+'" selected>'+city[i].name+'</option>');
+                else $('city').append('<option value="'+city[i].code+'">'+city[i].name+'</option>');
+            }
+
+
+            $('city').append('<option value="02" selected>서울</option>');
+            $('city').append('<option value="064" selected>제주</option>');
+        }
+
+        loadCity();
+
+        function printConsole(data) {
+            console.log(data);
+        }
+
+        function printConsole2(name,city){
+            console.log(name);
+        }
+
+        function changeCity() {
+            // let city = document.getElementById("city").value;
+            // document.getElementById("region_02").style.display="none";
+            // document.getElementById("region_064").style.display="none";
+
+            // document.getElementById("region_"+ city).style.display="";

+            let city = $("#city").val();
+            $("#region_02").hide();
+            $("#region_064").hide();
+            $("#region_"+ city).show();
+        }
    </script>
 </body>
 </html>
\ No newline at end of file
--- a/JS/MOMENTUM/app.js
+++ b/JS/MOMENTUM/app.js
-const loginInput = loginForm.querySelector("#login-form input");
-const loginButton = loginForm.querySelector("#login-form button"); 
+const loginForm = document.querySelector("#login-form");
+const loginInput = document.querySelector("#login-form input");
+const greeting = document.querySelector("#greeting");
+function onLoginSubmit(event) {
+    event.preventDefault();
+    loginForm.classList.add("hidden");
+    const username = loginInput.value;
+    console.log(username);
+}

-function onLoginBtnClick() {
+function handleLinkClick(event) {
+    event.preventDefault();
    const username = loginInput.value;
-    console.log(clicked!!);
+    loginForm.classList.add("hidden");
+    greeting.innerText = "Hello" + username;
 }

-loginButton.addEventListener("click", onLoginBtnClick);
\ No newline at end of file
+loginForm.addEventListener("submit", onLoginSubmit);
+link.addEventListener("click", handleLinkClick);
\ No newline at end of file
--- a/JS/MOMENTUM/index.html
+++ b/JS/MOMENTUM/index.html
@@ -7,10 +7,17 @@
        <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>
+            <input 
+                required
+                maxlength="15"
+                type="text" 
+                placeholder="What is your name?"
+            />
+            <input type="submit" value="Log In" />
+        </form>
+        <h1 id="greeting" class="hidden"></h1>
+        <a href="https://nomadcoders.co">Go to courses</a>
        <script src="app.js"></script>
    </body>
 </html>
\ No newline at end of file
--- a/JS/MOMENTUM/style.css
+++ b/JS/MOMENTUM/style.css
-body{
-    background-color: beige;
-}
-
-h1{
-    color: blue;
-    transition:color .5s ease-in-out;
-}
-
-.clicked{
-    color:tomato;
-}
-
-.sexy-font{
-    font-family: 'Pacifico', cursive;
+.hidden{
+    display: none;
 }
\ No newline at end of file