작고 소중한 나의 첫 푸로젝트는 바로 디지털 시계 만들기였다.
html, css, javascript 를 모두 사용했고,
처음부터 스케치(?)를 하고 의사코드를 짜고, 코드를 수정했다.
스케치
만들고자 하는 디지털 시계의 대략적인 모습을 그렸다.
북흐 ㅎ
의사코드
의사코드는 어떻게 만들었냐면 기존에 있는 디지털 시계만들기 소스코드를 읽어보고, 자연어로 바꾸어서 적어본 것이다
그냥 존재하는 코드를 따라치면 클론코딩밖에 안될것 같아서, 코드 이해만 하고 웬만하면 구글링해서 찾아내려고 했다.
html
- 상단에 명언을 입력
css
- 명언 중앙정렬
- 명언 글씨체 바꾸기
- 날짜와 시간 글씨체를 투명하게
- 영상을 백그라운드에 재생(실행해봤는데 반복재생 안되면 방법을 서치)
javascript
요소선택
today와 time 선택하기
그리고 거기에다 이름붙이기
getTime 함수 사용하기
<초기값 설정 작업>
지금 시간을 먼저 선언 및 할당하기
년월일시간분초에 각각 선언 및 할당해주기
<화면에 보여지는 년월일시간분초를 만들기>
삼항연산식 확인하기
- 조건식 ? true 면 결과값 : false 면 결과값 ;
- 모든 년월일시간분초는 두자리 숫자로 표현 (한자리일 경우, 앞에 0을 붙임)
textContent를 사용하여 백틱(``)으로 문자열 만들어주기
- ${변수}
setInterval 메소드 사용하기
getTime 호출
setInterval 호출
- setInterval(호출할 함수이름, 몇 ms마다 나타날지)
완성작
참고로, 웹에서만 열림!
http://127.0.0.1:5500/01_clock/index.html
코드
html, css, javascript 순입니다.
<!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>JavaScript Clock</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<video muted autoplay loop>
<source src="./-73847.mp4" type="video/mp4">
</video>
<div id="container_saying">
<p>You may delay, but time will not.</p>
</div>
<div class="container_clock">
<div id="today" class="today"></div>
<div id="time" class="time"></div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>body {
padding: 0px;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
height: 100vh;
margin: 0px 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
video {
width: 100%;
height: 60vh;
object-fit: cover;
}
#container_saying{
position: fixed;
top: 30%;
width: 100%;
}
#container_saying p {
margin-top: -24px;
text-align: center;
font-size: 88px;
color: #ffffff;
font-family: 'Satisfy', cursive;}
.container_clock {
width: 60%;
height: 40vh;
background-color:#ffffff;
text-align: center;
}
.today {
font-size: 70px;
margin-top: 20px;
font-weight: bold;
}
.time {
margin-top: 20px;
font-size: 200px;
font-weight: bold;
}// const 및 요소 선택
const todaydiv = document.getElementById("today");
const timediv = document.getElementById("time");
// getTime 함수
function getTime(){
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let date = now.getDate();
let hour = now.getHours();
let min = now.getMinutes();
let sec = now.getSeconds();
month = month < 10 ? `0${month}` : month;
date = date < 10 ? `0${date}` : date;
hour = hour < 10 ? `0${hour}` : hour;
min = min < 10 ? `0${min}` : min;
sec = sec < 10 ? `0${sec}` : sec;
todaydiv.textContent =`${year}/${month}/${date}`
timediv.textContent =`${hour}:${min}:${sec}`
}
// setInterval 메소드
getTime()
setInterval(getTime, 1000);
느낀점
이제 코딩을 배운지 3주정도가 되었다. ㅎㅎ 공부하면 할 수록 부족하다고 느껴지는 점이 참많다. 코드스테이츠 스케줄을 따라가면서도 뒤쳐질까봐,, 미리 예습을 하곤했다. 워낙 잘하는 사람이 많긴 하지만, 일단 나는 시작한지 얼마 안되었고, 이 길을 오랫동안 걸어갈 것이기 때문에 너무 조급해하지 말자. 꾸준히 하는게 제일 중요하다.
나는 일단 스터디에 들어가기 보다는 혼자서 토이 프로젝트를 몇 개 만들어볼 생각이다. 나 혼자서도 못만드는데 스터디에서 개념정리만 해서는 크게 늘기 어려울 것이라고 판단했기 때문이다. 하지만, 막히면 뚫어줄 구멍이 없으니, 혼자 해결해야 한다는 단점도 존재한다.. 일단 몇번 해보고 스터디를 만들지도?
코플릿 연습문제를 푸는 것과 프로젝트를 하는 것은 또 다른 이야기 같다는 생각이 들었다. 프로젝트는 연습문제를 푸는 것과 달리 내가 처음부터 문제를 설계해야 한다는 어려움이 있다. 더불어, 구글링을 해도 내가 원하는 해답이 안나올때가 있는데 그때는 너무 화가아 난다아~ 어쩌겟어.. 익숙해져야징...
이번에는 작동되는 화면(?)을 만들었다는 것에 의의를 두자.~~ 다음에도 재밌는 플젝으로 다시 올게요
모두 힘내자구욤! ><
'Javascript' 카테고리의 다른 글
| 자바스크립트 기초 문법 헷갈리는 것 모음집 (0) | 2023.03.07 |
|---|---|
| DOM 다루기 (CRUD + append) (0) | 2023.03.07 |
| 현재 시간 브라우저에 나타내기 (0) | 2023.03.04 |
| 생성자 함수로 여러가지 객체 만들기 (0) | 2023.03.04 |
| 얕은 복사와 깊은 복사 (0) | 2023.03.02 |
