웹페이지에 입력한 본인의 이름이 사이트 상에 표시되는 것을 구현해보았다.
- html
<!DOCTIYE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<link href = 'first.css' rel = 'stylesheet' type='text/css'/>
</head>
<body>
<form class="js-form form">
<input class="formInput" type="text" placeholder="What is your name?"/>
</form>
<h4 class="js-greetings greeting"></h4>
<script src="js2.js"></script>
<body>
<html>- css
.js-form {
text-align: center;
}
.form, .greetings {
display: none;
text-align: center;
}
.showing {
display: block;
text-align: center;
}
input {
display: block;
text-align: center;
border-radius: 10px;
border-style: ridge;
margin: auto;
}
이름을 입력하는 input 과 이름이 노출되는 h4 는 상황에 따라 보이거나 보여지지 않아야 하기 때문에 .form, .greeting이라는 class 를 추가하여 display : none 을 적용했고 보여져야할 상황에 쓰여질 .showing 이라는 class를 css에 생성했다.
- js
const form = document.querySelector('.js-form'), // js-form 이라는 class를 가져와 form 이라는 변수로 선언했다.
input = form.querySelector ('.formInput'), // formInput 이라는 class를 가져와 input 이라는 변수로 선언했다.
greeting = document.querySelector ('.js-greetings') // js-greetings 라는 class를 가져와 greeting 이라는 변수로 선언했다.
const showNM = 'showing'; // css에만 만들어져 있는 showing 이라는 class를 showNM 이라는 변수로 선언했다.
const userLS = 'currentUser'; // 해당 페이지에 있는 local storage 안에 들어갈 value 이름 (user가 입력한 이름)
function submitName(event){ // 이름이 입력되어 제출되면 이벤트를 발생시킬 함수
event.preventDefault(); // 이벤트의 default 값으로 인해 input에 이름을 입력한 후 enter를 누르면 input의 값이 노출되지 않고 화면이 초기화 되는데 그걸 없애기 위한 기능
const inputName = input.value; // input의 value 값을 inputName 이라는 변수로 선언했다.
showName(inputName); // showName 이라는 함수에 들어갈 argument를 input.value 값으로 설정
}
function askName(){ // 이름을 입력받아 submitName 함수로 전달하기 위한 함수
form.classList.add(showNM); // 이름을 입력받기 위해 form의 class list에 .showing 이라는 class를 추가한다.
form.addEventListener ('submit', submitName); // input에서 입력된 이름을 submitName 이라는 함수로 제출하는 이벤트를 실행한다.
}
function showName(text){ // 입력받은 이름을 화면에 노출하는 함수
form.classList.remove(showNM); // input이 보이면 안되기 때문에 form의 class list에서 .showing 이라는 class를 제거한다.
greeting.classList.add(showNM); // 입력된 이름을 노출하기 위헤 greeting의 class list 에 .showing 이라는 class를 추가한다.
greeting.innerText = `hello!! ${text}`; // greeting (h4 class = "js-greetings") 에 입력될 텍스트를 작성해준다.
}
function core (){ askName과 showName 함수가 실행될 조건을 설정할 함수
const currentUser = localStorage.getItem (userLS); // 해당 페이지의 local storage 에서 가져온 userLS 를 currentUser 라는 변수로 선언했다.
if (currentUser === null) { // currentUser 가 비어 있을 경우 askName 함수를 실행한다.
askName();
} else { // currentUser 가 존재할 경우 showName 함수를 실행한다.
showName(currentUser);
}
}
core (); // core 함수를 실행한다.- 결과물
최초 화면에 이름을 입력하는 란이 나타나고
lee seungmin 이라는 이름을 입력하면 이러한 형태로 노출된다.
프론트 앤드 개발자를 꿈꿉니다.