하루를살자

JS Clone Project [Login] - 2, Getting User Input 본문

JS

JS Clone Project [Login] - 2, Getting User Input

Kai1996 2021. 12. 4. 16:12

Getting User Input 

이번 예제 에서는 로그인 form 의 input value 에 유저 가 닉네임을 submit 할시, input 값을 저장 하고 Form 을 사라지게 한 뒤, 유저 input 을 페이지 에 프린트할 예정이다.

 

중요한 Key 포인트! 

1. "hidden" 이라는 클래스 생성 후, CSS 에서 display: invisible 로 설정 해 준다. 

2. User 입력값을 프린트해주는 <h1> 태그를 초기에 hidden 의 클래스 로 지정해 주고, Inner Text 는 비워준다. 

3. App.js 에서 "hidden" 클래스 이름을 저장하는 상수 지정. 

4. Use of `${}` expression 

5. Use of classList object. 

 

- Index.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="style.css">
    
    <title>Clone Momentum App</title>
</head>

<body>
    <form id ="login-form">

        
        <input required maxlength="15" type ="text" placeholder=" What is your name?"/>
        <button> Log In </button>
        
    </form>
        <h1 id = "greeting" class = "hidden"> </h1> 
    <a id = "naver" href="https://naver.com"> 네이버 </a>

    <script src = "app.js"></script>
</body>

</html>

 

- Style.css

.hidden {
    display: none;
}

- App.js

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const link = document.querySelector("#naver");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";

console.log(loginInput.outerHTML);


function onLoginSubmit (data){
    data.preventDefault();
    const username = loginInput.value;
    console.log(username);

    loginForm.classList.add(HIDDEN_CLASSNAME);
    
    // greeting.innerHTML = "Welcome" + username + "!";
    //WE COULD DO IN THIS WAY 
    greeting.innerHTML = `Welcome ${username} !`;

    greeting.classList.remove(HIDDEN_CLASSNAME);

} 

// submit happens when pressing "enter" /  button within a Form element
loginForm.addEventListener("submit",onLoginSubmit); 
link.addEventListener("click",onLoginSubmit);

'JS' 카테고리의 다른 글

JS Clone Project [Clock] - 1  (0) 2021.12.04
JS Clone Project [Login] - 3, Saving User Input  (0) 2021.12.04
JS Clone Project [Login] - 1  (0) 2021.12.03
JS - Vanilla JS Clone Project [CSS in js]  (0) 2021.12.02
JS - Vanilla JS Clone Project [Event Handlers]  (0) 2021.12.02
'JS' Related Articles more
Comments