[노마드 바닐라JS 챌린지] Day.8~9 LOGIN

티스토리 뷰

JavaScript

[노마드 바닐라JS 챌린지] Day.8~9 LOGIN

JxxxxH 2023. 5. 23. 15:37

const loginForm= document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
// const loginButton = document.querySelector("#login-form button");

//input이 div안에 있을 경우 click이벤트로 처리 할 수 있겠지..
// function onLoginBtnClick(){
//     const username = loginInput.value;
//     if(username === ""){
//         alert("Please write your name");
//     }else if(username.length > 15){
//         alert("Your name is too long");
//     }
// }


// loginButton.addEventListener("click", onLoginBtnClick )

    function onLoginSubmit(event){
        event.preventDefault();
        console.log(loginInput.value);
    }
    loginForm.addEventListener("submit", onLoginSubmit )

1. form안에서 엔터를 누르고 input이 더 존재하지 않는다면 자동으로 submit된다는 규칙

2. form안에 있는 버튼을 눌렀을 때, 자동으로 submit된다.

input의 유효성 검사를 위해선 div가 아닌 form에 넣어야 한다.

form이 submit 되는 것, refresh 되는 것을 막아주도록 할 것이다.

★ 중요 ★

form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다.

--> 이것을 막기 위해 preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다.

preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다.

첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.

*JS는(기본적으로) argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다.

ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음.

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

const HIDDEN_CLASSNAME = "hidden"; //string 변수는 주로 대문자로 작성

function onLoginSubmit(event){
    event.preventDefault();

    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;

    greeting.innerText = "Hello " + username;
    greeting.innerText = `Hello ${username}`;

    greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit );

--> const HIDDEN_CLASSNAME = 'hidden';
관습: string만 포함된 변수는 대문자로 쓴다 + 중요한 변수가 아니라서.

lcoalStorage 브라우저에 무언가를 저장한 후 나중에 가져 올 수 있음.

localStorage.setItem(key, value);
- 로컬 저장소에 해당 키와 값을 저장함.
localStorage.getItem(key);
- 로컬 저장소에 해당 키에 해당되는 값을 불러옴.
localStorage.removeItem(key);
- 로컬 저장소에 해당 키에 해당되는 키, 값을 삭제함.

예)

lcoalStorage.setItem("username", "nico");
lcoalStorage.getItem("username")
lcoalStorage.removeItem("username")

최종 코드

<body>    
    <form id="login-form" class="hidden">
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
</body>

.hidden{
    display: none;
}

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

const HIDDEN_CLASSNAME = "hidden"; //string 문자열만 있는 변수는 주로 대문자로 작성
const USERNAME_KEY = "username";

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    
    const username = loginInput.value;    
    localStorage.setItem(USERNAME_KEY, username);
    
    paintGreetions(username);
}

function paintGreetions(username){
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `Hello ${username}`;
}

const saveUsername = localStorage.getItem(USERNAME_KEY);

if(saveUsername === null){
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit );
} else {
    //show the greeting
    paintGreetions(saveUsername);
}

챌린지 Day.8~9과제 랜덤 숫자 게임

조건

0에서 사용자가 지정한 숫자까지의 범위에서 랜덤 한 숫자를 찾으세요. (범위는 0 이상 입력값 이하가 됩니다.)
범위에는 음수가 포함될 수 없습니다.
실시간으로 범위 값을 업데이트해야 합니다.
유저가 숫자를 선택한 후에 게임을 플레이할 수 있습니다.
유저에게 게임의 승패를 알려야 합니다.

  <h1>Random Number Game</h1>
    <form id="rangeForm">
      <h2>Generate a number between 0 and</h2>
      <input type="number" class="range"/>
    </form>
    <form id="numForm">
      <p>Generate a number between 0 and</p>
      <input type="number" class="number"/>
      <button>Play!</button>
    </form>
    <p id="greeting"></p>
<h1 id="lostWon"></h1>

const numForm = document.querySelector("#numForm");
const greeting = document.querySelector("#greeting");
const lostWon = document.querySelector("#lostWon");

const maxNumInput = document.querySelector(".range");
const numInput = document.querySelector(".number");

function result(myNum, randomNum){
    greeting.innerText = `You chose: ${myNum}, the machine chose: ${randomNum}`;    

    if(myNum >= randomNum){
        lostWon.innerText = `You won!`
    } else{
        lostWon.innerText = `You lost!`
    }
}

function onNumberSubmit(event){
    event.preventDefault();

    const maxNum = maxNumInput.value;    
    const myNum = numInput.value;    
    const randomNum = Math.ceil(Math.random()* maxNum);    

    result(myNum, randomNum);
    console.log("submit");
}
    
numForm.addEventListener("submit", onNumberSubmit );

'JavaScript' 카테고리의 다른 글

[노마드 바닐라JS 챌린지] Day.12 ToDo (0)	2023.05.28
[노마드 바닐라JS 챌린지] Day.10 Intervals (0)	2023.05.24
[노마드 바닐라JS 챌린지] Day.5 (0)	2023.05.19
[노마드 바닐라JS 챌린지] Day.4 (0)	2023.05.18
[노마드 바닐라JS 챌린지] Day.3 (0)	2023.05.17

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/09 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

글 보관함

기록의 힘

티스토리 뷰