본 포스팅은 Florin Pop 유튜브 채널을 보고 학습한 내용을 바탕으로 작성되었습니다.
😺 만들고자 하는 것
첫번째 챌린지는 새해까지 얼마나 남았는지를 알려주는 사이트이다.
😺 HTML 분석
먼저 큰 제목에 해당하는 "New Years Eve"에 div가 하나 들어 갈 것이고,
그 밑으로 days, hours, mins, seconds가 들어갈 큰 div 안에 4개의 div가 만들어져야 한다.
😺 HTML 코드 작성
먼저, html 뼈대 코드를 만들어 준 후, script.js, style.css파일을 연결해 준다.
이후, 분석한 결과에 따라서 HTML코드 먼저 생성해 보도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>New Years Eve</h1>
<div class="container">
<div class="days-c">
<p class="timer" id="day">0</p>
<span>days</span>
</div>
<div class="hours-c">
<p class="timer" id="hours">0</p>
<span>hours</span>
</div>
<div class="mins-c">
<p class="timer" id="mins">0</p>
<span>mins</span>
</div>
<div class="seconds-c">
<p class="timer" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
</body>
</html>😺 HTML 코드 작성한 결과
😺 CSS 작업
CSS는 많이 다루어 본 적이 없어서 어렵지만, 하나하나 해 보려고 한다.
먼저 적당한 폰트와 배경이미지를 찾아서 받아오도록 하자.
폰트는 구글 폰트를 사용했고, 배경이미지는 https://unsplash.com/ 를 사용했다.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
box-sizing: border-box;
}
h1 {
font-weight: normal;
font-size: 4rem;
}
body{
background-image: url(https://images.unsplash.com/photo-1484503793037-5c9644d6a80a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=765&q=80);
font-family: "Poppins", sans-serif;
display: flex;
flex-direction: column;
background-size: cover;
background-position: center center;
align-items: center;
min-height: 100vh;
}
.container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.timer{
font-weight: bold;
font-size: 6rem;
line-height: 1;
margin: 0 2rem;
}
.count {
text-align: center;
}
.count span{
font-size: 1.4rem;
}😺 CSS 작업 결과
😺 JS작업
const dayEl = document.getElementById('day')
const hoursEl = document.getElementById('hours')
const minsEl = document.getElementById('mins')
const secondsEl = document.getElementById('seconds')
function countDown(){
const newYear = new Date(2022, 0, 1)
const current = new Date()
const diffTime = Math.abs(newYear-current)
const days = Math.floor( diffTime/(1000*3600*24) )
const hours = Math.floor( diffTime/(1000*3600) %24)
const mins = Math.floor( diffTime/(1000*60) %60)
const seconds = Math.floor( diffTime/(1000) %60)
dayEl.innerHTML = formatTime(days)
hoursEl.innerHTML = formatTime(hours)
minsEl.innerHTML = formatTime(mins)
secondsEl.innerHTML = formatTime(seconds)
}
function formatTime(time){
return time < 10 ? (`0${time}`) : (time);
}
countDown()
setInterval(countDown, 1000)😺 오류와 해결법
script.js:17
Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
at countDown (script.js:17)
at script.js:23innerHTML을 통해 접근해서 값을 바꾸려고 했는데, 위와 같은 오류가 떴다.
구글링을 통해 찾아보니 스택오버플로우에서 답을 찾을 수 있었다.
days, hours, mins, seconds Element가 로드 되기 전에 js파일이 먼저 로드가 되어서 생긴 문제라고 한다.
해결법은 단순하게, html에서 연결해주는 script를 아래에다 연결시켜주면 해결된다.
조금 더 검색을 해 본 결과, 밑에다 적지 말고, script tag에 defer를 추가해주면 해결된다.
자세한 내용은 여기를 참고해보도록 하자.
😺 수정된 HTML 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>New Years Eve</h1>
<div class="container">
<div class="count">
<p class="timer" id="day">00</p>
<span>days</span>
</div>
<div class="count">
<p class="timer" id="hours">00</p>
<span>hours</span>
</div>
<div class="count">
<p class="timer" id="mins">00</p>
<span>mins</span>
</div>
<div class="count">
<p class="timer" id="seconds">00</p>
<span>seconds</span>
</div>
</div>
</body>
</html>😺 느낀점
CSS 작업하는데 한참 걸린다. 아직 모르는 개념이 많아서 검색하는 것도 일인데, 어떻게 검색을 해야 할 지 감이 잡히지 않는게 더 문제인 것 같다. 조만간 CSS 강의를 한번 제대로 들어봐야겠다.
'프로젝트 > 10 Javascript Project Challenge' 카테고리의 다른 글
| 2. 퀴즈 사이트 (0) | 2021.11.08 |
|---|
댓글