NomardCoder: greeting-4
1. link 버튼 실행
<!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="./project4.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="InPut" />
</form>
<a href="https://www.naver.com">naver</a>
<script src="./project4.js"></script>
</body>
</html>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const link = document.querySelector("a");
function onLoginSubmit(event) {
event.preventDefault();
console.log(loginInput.value);
}
function handleLinkClick(event) {
event.preventDefault();
console.log(event);
alert("clicked!!");
}
loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);
* naver링크로 넘어가지 않음
2.submit 한 후 form을 없애기
<!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="./project4.css" />
<title>Momentum App</title>
</head>
<body>
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="what is your name?"
/>
<button>login</button>
</form>
<script src="./project4.js" defer></script>
</body>
</html>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(event) {
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add("hidden");
console.log(username);
}
loginForm.addEventListener("submit", onLoginSubmit);
→ form은 사라지고, 입력값은 console에 나타남
3.class=hidden인 h1태그를 추가하여, form은 사라지고 h1태그는 나타나게 코딩
<!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="./project4.css" />
<title>Momentum App</title>
</head>
<body>
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="what is your name?"
/>
<button>login</button>
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="./project4.js" defer></script>
</body>
</html>
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.preventDefault();
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME);
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);
* string만 포함된 변수는 대문자로 표기하고, string을 저장하고 싶을때 사용함
→ gido 입력 후 제출시, form은 사라지고, h1에 입력값이 전달되면서 보여짐
3.새로고침할때도 form 볼 필요없이 이름이 저장되게 하기 (local storage.)
콘솔창에 입력
3-1 저장하기
localstorage.setItem("username", "nico")
* username에 nico를 저장
3-2 불러오기
localstorage.getItem("username")
* username에 저장된 값을 불러오기
3-3 제거하기
localstorage.removeItem("username")
username에 공백을 저장하면 null이 됨
4. local sotrage에 유저정보 유무를 확인/ 유저정보가 없다면 form을 보여주기
<!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="./project4.css">
<title>Momentum App</title>
</head>
<body>
<form id="login-form" class="hidden">
<input
required maxlength="15" type="text"
placeholder="what is your name?"
/>
<button>login</button>
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="./project4.js" defer></script>****
</body>
</html>
const loginForm = document.querySelector("#login-form")
const loginInput= document.querySelector("#login-form input")
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username"
function onLoginSubmit(event) {
event.preventDefault();
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username)
loginForm.classList.add(HIDDEN_CLASSNAME)
paintGreetings(username);
}
function paintGreetings(username) {
greeting.innerText = `Hello! ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME)
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME)
loginForm.addEventListener("submit", onLoginSubmit);
} else {
const username = loginInput.value;
paintGreetings(savedUsername);
}
* gido 입력시, localstorage에 저장이되고, Hello gido라고 나타나며 새로고침을 해도 초기화 되지 않음
댓글남기기