index.html
<!DOCTYPE html>
<html>
<head>
<title>Someting</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?">
</form>
<h4 class="js-greetings greetings"></h4>
<script src="index.js" ></script>
<script src="greeting.js"></script>
</body>
</html>index.css
h1{
color: #34495e;
}
.form,
.greetings {
display: none;
}
.showing {
display: block;
}clock.js
- 시계 작성
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");
function getTime() {
const date = new Date(); // Date -> object
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
clockTitle.innerText =`${hours < 10 ? `0${hours}`:hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}
/*
`${hours < 10 ? `0${hours}`:hours}:
${minutes < 10 ? `0${minutes}` : minutes}:
${seconds < 10 ? `0${seconds}` : seconds}`;
시간을 표시할 때 22:11:1 -> 22:11:01로 표현하기 위해 삼항연산자를 사용했다.
*/
// 실행
function init() {
getTime();
setInterval(getTime, 1000); // 현재 브라우저에서 시간이 흐르는 걸 보여준다.
}
init();- setInterval(fn, 시간)
greeting.js
- LocalStorage User
const form = document.querySelector(".js-form");
const input = document.querySelector("input");
const greeting = document.querySelector(".js-greetings")
const USER_LS = "curretUser";
const SHOWING_CN = "showing";
function paintGreeting(text) {
form.classList.remove(SHOWING_CN);
greeting.classList.add(SHOWING_CN);
greeting.innerHTML = `Hello ${text}`
}
function loadName() {
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null) {
// 현재 유저가 null 이라면 코드 실행
} else {
paintGreeting(currentUser); // 저장된 유저가 있다면, paintGreeting을 실행해!
}
}
function init() {
loadName();
}
init();
- querySelector : element 요소를 가져온다.
- querySeletorAll : 모든 element를 array로 가져온다.
- localStorage :
chrome창 -> 개발자도구 -> Application -> local Storage
References
- 노마드 코더 : 강의를 듣고 정리한 자료입니다.
- 🎈2020.12.03
- 🎈정리 : song, VSCode
안녕하세요:)