#학습/AI&IT

노마드코더 바닐라 JS 챌린지 8일차

참잘했을까요? 2021. 8. 31. 00:01
반응형

7일차는 쉬는 날이라 해서 넘겼는데 갑자기 8일차가 되어 있어서 괜히 쫄린다. 퀴즈를 좀 많이 틀렸던데 성공할 수 있겠지? ㅠㅠ

 

// 이름 data 받아서 화면에 기록하기


// 만약 querySelect 쓰면 Id 데려오는 거라고 명확히 알려주기
const logninInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

function onLoginBtnClick(){
    // username 유효성 검사
    const username = logninInput.value;
    if(username === "") {
        alert("Please write your name");
    } else if(username.length > 15) {
        alert("Your name is too long.")
    }
    
}

loginButton.addEventListener("click", onLoginBtnClick);

 

<!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>Momentum</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>
</html>
//submit 안되게 하기
const loginForm = document.querySelector("#login-form");
const logninInput = document.querySelector("#login-form input");

function onLoginSubmit(event) {
    event.preventDefault();
    console.log(event);
    
}


loginForm.addEventListener("submit", onLoginSubmit);

//공간을 제공하면 info를 넣을 것이다. 어떤 event의 기본 행동을 막는 preventDefault 이용.
const loginForm = document.querySelector("#login-form");
const logninInput = document.querySelector("#login-form input");

const link = document.querySelector("a");

function onLoginSubmit(event) {
    event.preventDefault();
    console.log(loginInput.value);
    
}

function handleLinkClick(event) {
    event.preventDefault(); 
}

loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);

// eventlistener를 내가 실행하는 것이 아니라 브라우저가 해주는 것이다.
// 4.3 강의 비몽사몽 ..
<!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>Momentum</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>
<a href="http://sosweat.tistory.com">Go to courses</a>

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

 

반응형