SEED 홈페이지 제작 중 나 또한 JS라던가 웹에 대한 기본적인 지식은 갖춰야 겠다고 생각하여 공부를 시작하였다. 니콜라스 선생님은 정말 좋은 선생님 같다.
실시간 시계 만들기. 아직 todolist라던가 다른 기능은 넣지 못했지만 랜덤한 사진을 넣는 기능은 넣어보고 싶었다.
1. 시계 만들기
const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector(".time");
function getTime(){
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds<10 ? `0${seconds}` : seconds}`;
}
function init(){
getTime();
setInterval(getTime, 1000);
}
init();2. 사용자명을 입력받고 띄우는 부분
const form = document.querySelector(".js-form"), input = form.querySelector("input");
const greeting = document.querySelector(".js-greetings");
const USER_LS = "currentUser"
,SHOWING_CN = "showing";
function paintGreeting(text){
form.classList.remove(SHOWING_CN);
greeting.classList.add(SHOWING_CN);
greeting.innerText = `Hello ${text}`;
}
function saveName(text){
localStorage.setItem(USER_LS, text);
}
function handleSubmit(event){
event.preventDefault();
const currentValue = input.value;
saveName(currentValue);
paintGreeting(currentValue);
}
function askForName(){
form.classList.add(SHOWING_CN);
form.addEventListener("submit", handleSubmit);
}
function loadName(){
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null){
//is not
askForName();
}else{
//is
paintGreeting(currentUser);
}
}
function init(){
loadName();
}
init();이 부분은 살짝 복잡해서 아직 완벽하게 이해하진 못했지만 클래스에 따라서 스타일을 바꿔주며 숨기고 나타내는 것으로 이해를 했다. 그렇게 하면 대충 이해는 가더라.
3. 랜덤 사진 넣기(HTML에 추가 안되어있다.)
const body = document.querySelector("body");
const IMG_NUMBER = 29;
function paintImage(imgNumber){
document.body.background = 'photo/'+imgNumber+'.jpg';
document.body.style.backgroundSize = "cover";
}
function getRandom(){
const number = Math.floor(Math.random()*IMG_NUMBER);
return number;
}
function init(){
const num = getRandom();
paintImage(num);
}
init();이건 혼자 찾아보고 넣은거라서 아마 나중에 배우게 될 내용과 다를 것 같다. 하지만 멀쩡히 기능을 한다. 이거 기능 추가하라고 해야지.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Clock</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<script src="background.js"></script>
<div class="total">
<div class="js-clock">
<h1 class="time">00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your Name?">
</form>
<h4 class="js-greetings greetings"></h4>
</div>
<script src="clock.js"></script>
<script src="greetting.js"></script>
</body>
</html>CSS
.total{
position:absolute;
top:35%;
left:41%;
color:teal;
}
.time{
font-size:5vw;
}
.time, .js-greetings{
position: relative;
text-align: center;
margin:1vw;
}
.form,
.greetings{
font-size: 2vw;
display:none;
margin:1vw;
}
.showing{
display: block;
}'vidigummy KAU > 혼자하는 Web 공부(Front)' 카테고리의 다른 글
| Node.js 와 TypeScript 그리고 Nest.js 첫번째 (1/18 ~ 2/9) (0) | 2021.02.09 |
|---|---|
| 백엔드 공부 2(java Servelt - jsp) (0) | 2021.01.19 |
| 백엔드 공부(java로 mysql 쿼리 쓰기)1 (0) | 2021.01.19 |
| 웹스터디 웹스터디! (0) | 2020.08.10 |