Dev study and notes

바닐라 JS로 크롬 앱 만들기 4장 강좌들 노마드코더 무료강좌 본문

Building & Learning/바닐라JS-노마드코더

바닐라 JS로 크롬 앱 만들기 4장 강좌들 노마드코더 무료강좌

devlunch4 2024. 12. 22. 23:55
반응형

바닐라 JS로 크롬 앱 만들기 4장 강좌들 노마드코더 무료강좌

이번 4강 강좌에서는 html과 자바스트립트 소스를 이용하여 간단한 웹페이지를 만들어보게 됩니다.
로그인 기능 구현 전의 실습으로 아이디 입력 후 버튼을 눌렀을 때 greeting(인사) 문구가 화면에 나타나도록 합니다.
아주 간단한 html 코드와 js 코드를 사용하게 됩니다.

기본적인 소스코드 작성 및 약간의 유용한 코드 스킬을 배울 수 있게 됩니다.
​
이번 포스팅엔 4장 강좌들에 대한 최종 소스코드를 남깁니다.
포스팅 내용은 각 파일 명 그리고 소스코드로 대체합니다.

html

<!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="style.css" />
    <title>Document</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>
    <script src="app.js"></script>
</body>

</html>


js

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();
    loginForhttp://m.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);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
    loginForhttp://m.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    paintGreetings(savedUsername);
}



css

.hidden {
    display: none;
}
​



파일명을 제대로 적지 않았으나, 소스를 확인해 본다면 파일명이 어떤 것인지 알 수 있을 것입니다.
​
파일명을 알고 있다면 댓글로 남겨주세요.
또는 알고 싶다면 댓글로 남겨주세요.

​
끝!

반응형
저작자표시 비영리 동일조건

'Building & Learning > 바닐라JS-노마드코더' 카테고리의 다른 글

바닐라 JS로 크롬 앱 만들기 6장 강좌들 노마드코더 무료강좌  (0) 2025.01.17
바닐라JS로 크롬 앱 만들기 5장 강좌들 노마드코더 무료강좌  (0) 2025.01.17
바닐라 JS로 크롬 앱 만들기 3장 강좌들 노마드코더 무료강좌  (1) 2024.12.22
바닐라 JS로 크롬 앱 만들기 2장 강좌들 노마드코더 무료강좌  (0) 2024.12.22
바닐라 JS로 크롬 앱 만들기 #2.0 Your First JS Project 노마드코더 무료강좌  (1) 2024.12.22
'Building & Learning/바닐라JS-노마드코더' Related Articles more
Comments