👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#4.3-4.5

change up·2023년 6월 8일

노마드코더 클론코딩

목록 보기

7/13

1. output

Momentum Log In

2. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href="app.css">
    <title>Momentum</title>
</head>
<body>
    <form class="hidden" id="login-form">
    <input type="text" />
    <button id="button">Log In</button>
    <a href="https://nomadcoders.co/" class="hidden">Go nomad!</a>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
</body>
</html>
<!---href를 사용해서 사이트를 가져올수 있도록 연결시켜준다.
hidden 기능을 사용하기 위해서는 html의 class hidden+ css에 hidden none display 추가 -->

3. JavaScript

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();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  localStorage.setItem("USERNAME_KEY", username);
  paintGreetings(username);
}


function paintGreetings(username){
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
  //value값을 기억해서 아웃풋 해주고 , 새로고침을 누르면 인사말은 사라고 다시 로그인창이 나온다.
}
//중복되는 식을 제거하기 위해 , 함수로 만들어주고 함수호출 하는 형식으로 사용한다.
//같은 함수라도 호출되는 시점에 따라 매개인자는 달라진다.
const savedUsername = localStorage.getItem("USERNAME_KEY");
console.log(savedUsername)// null 결과값
//logic짜기 
if(savedUsername === null){
 loginForm.classList.remove(HIDDEN_CLASSNAME);
 loginForm.addEventListener("submit",onLoginSubmit);
  //show the form
} else {
  paintGreetings(savedUsername)

}

//1.localStrage.setItem('mycat','tom)<- key .value local storage에 정보를 저장할 수 있다.
//2.local storage.remove('mycat') 저장한 내용삭제 가능.
//3.localStorage.getItem("username") 유저네임 기록 유무 확인.

4. css

.hidden {
    display: none;
}

change up

새싹이

이전 포스트

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 : #4.0-4.2

다음 포스트

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#4.3-4.5

노마드코더 클론코딩

1. output

2. html

3. JavaScript

4. css

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 : #4.0-4.2

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#4.6-5.0

0개의 댓글