diff --git a/JS/1hour/index.html b/JS/1hour/index.html
index 2142f0f4f257f13174ed5e05b1f38bd8c1a815d8..88b0490781ccde043d66ed9411e40c5a92c8c943 100644
--- 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
diff --git a/JS/MOMENTUM/app.js b/JS/MOMENTUM/app.js
index ce9202eb903d7be0a2a70e6c98ecd667f993fb9d..6067506623d394ddd67252fa0e94fa8bee090282 100644
--- a/JS/MOMENTUM/app.js
+++ b/JS/MOMENTUM/app.js
@@ -1,9 +1,19 @@
-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
diff --git a/JS/MOMENTUM/index.html b/JS/MOMENTUM/index.html
index 09d5b90b31a98b01d7136d6474be44055c7e2327..2af221f84156fb0f1003a5b32b1ace93ab965165 100644
--- a/JS/MOMENTUM/index.html
+++ b/JS/MOMENTUM/index.html
@@ -1,16 +1,23 @@
<!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>Momentum App</title>
-</head>
-<body>
- <div id="login-form">
- <input type="text" placeholder="What is your name?">
- <button>Log In</button>
- </div>
- <script src="app.js"></script>
-</body>
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="style.css">
+ <title>Momentum App</title>
+ </head>
+ <body>
+ <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
diff --git a/JS/MOMENTUM/style.css b/JS/MOMENTUM/style.css
index 8316c0285c62dbca9d98549e30ac0ce0f2efdec9..b5164fc058ef86c4d251a336fae58fddad033bf7 100644
--- a/JS/MOMENTUM/style.css
+++ b/JS/MOMENTUM/style.css
@@ -1,16 +1,3 @@
-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