Skip to content

Commit c91f69b

Browse files
limkhllimkhl
committed
add: project 7 디지털 시계 UI 추가
1 parent 808c18c commit c91f69b

File tree

10 files changed

+171
-1
lines changed

10 files changed

+171
-1
lines changed

‎project6-ImageCarousel/src/style.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
.project6 {
1515
box-sizing: border-box;
1616
padding: 1rem;
17-
background-image: var(--bg-color);
1817
font-weight: bold;
1918
}
2019

‎project7-DigitalClock/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>디지털 시계</title>
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css" />
13+
<link rel="stylesheet" href="../src/styles/style.css" />
14+
<link rel="stylesheet" href="./src/style.css" />
15+
</head>
16+
<body>
17+
<main class="wrap"></main>
18+
<script src="/src/main.js" type="module"></script>
19+
</body>
20+
</html>

‎project7-DigitalClock/src/App.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Clock from './Clock.js';
2+
3+
export default function App({ $target }) {
4+
new Clock({ $target });
5+
}

‎project7-DigitalClock/src/Clock.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export default function Clock({ $target }) {
2+
const $clock = document.createElement('div');
3+
$clock.className = 'clock';
4+
$target.append($clock);
5+
6+
const getTime = () => {
7+
const date = new Date();
8+
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
9+
const dayNum = date.getDay();
10+
const addZero = (time) => (time < 10 ? '0' + time : time);
11+
const hours = addZero(date.getHours() ? date.getHours() % 12 : '12');
12+
const minutes = addZero(date.getMinutes());
13+
const seconds = addZero(date.getSeconds());
14+
const ampm = date.getHours() < 12 ? 'AM' : 'PM';
15+
$clock.textContent = `${days[dayNum]} ${hours}:${minutes}:${seconds} ${ampm}`;
16+
};
17+
18+
const setBgColor = () => {
19+
if (new Date().getHours() < 11) {
20+
$target.className += ' dawn';
21+
} else if (new Date().getHours() > 19) {
22+
$target.className += ' night';
23+
} else {
24+
$target.className += ' day';
25+
}
26+
};
27+
28+
this.init = () => {
29+
getTime();
30+
setBgColor();
31+
setInterval(getTime, 1000);
32+
};
33+
34+
this.init();
35+
}

‎project7-DigitalClock/src/main.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import App from './App.js';
2+
3+
const $target = document.querySelector('main');
4+
const $page = document.createElement('div');
5+
$target.append($page);
6+
$page.className = 'project7 page';
7+
8+
new App({ $target: $page });

‎project7-DigitalClock/src/style.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
:root .project7 {
2+
--clock-bg-color: rgba(0, 0, 0, 0.5);
3+
--bg-dawn-color: linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 56%, #ffbac3 100%);
4+
--bg-day-color: linear-gradient(to right, #f83600 0%, #f9d423 100%);
5+
--bg-night-color: linear-gradient(to top, #0250c5 0%, #d43f8d 100%);
6+
--base-font-family: 'Noto Sans KR', sans-serif;
7+
--base-font-size: 3.3rem;
8+
--base-padding: 2rem;
9+
}
10+
11+
.wrap {
12+
width: 100vw;
13+
height: 100vh;
14+
}
15+
16+
.page {
17+
width: 100%;
18+
height: 100%;
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
font-weight: bold;
23+
}
24+
25+
.project7.dawn {
26+
background-image: var(--bg-dawn-color);
27+
}
28+
29+
.project7.day {
30+
background-image: var(--bg-day-color);
31+
}
32+
33+
.project7.night {
34+
background-image: var(--bg-night-color);
35+
}
36+
37+
.project7 .clock {
38+
background-color: var(--clock-bg-color);
39+
font-family: var(--base-font-family);
40+
color: white;
41+
font-size: var(--base-font-size);
42+
padding: var(--base-padding);
43+
}
44+
45+
@media (max-width: 500px) {
46+
.project7 .clock {
47+
font-size: 2rem;
48+
}
49+
}

‎src/components/App.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Project3Page from '../../project3-RandomQuoteGenerator/src/Project3Page.j
88
import Project4Page from '../pages/Project4Page.js';
99
import Project5Page from '../pages/Project5Page.js';
1010
import Project6Page from '../pages/Project6Page.js';
11+
import Project7Page from '../pages/Project7Page.js';
1112

1213
export default function App({ $target }) {
1314
new Header({ $target });
@@ -23,6 +24,7 @@ export default function App({ $target }) {
2324
const project4Page = new Project4Page({ $target: $main });
2425
const project5Page = new Project5Page({ $target: $main });
2526
const project6Page = new Project6Page({ $target: $main });
27+
const project7Page = new Project7Page({ $target: $main });
2628

2729
this.route = () => {
2830
$main.innerHTML = ``;
@@ -51,6 +53,9 @@ export default function App({ $target }) {
5153
case 6:
5254
project6Page.render();
5355
break;
56+
case 7:
57+
project7Page.render();
58+
break;
5459
}
5560
} else {
5661
notFoundPage.render();

‎src/pages/Project7Page.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import App from '../../project7-DigitalClock/src/App.js';
2+
3+
export default function Project6Page({ $target }) {
4+
const $page = document.createElement('div');
5+
6+
$page.className = 'project7 page';
7+
8+
new App({ $target: $page });
9+
10+
this.render = () => {
11+
$target.append($page);
12+
};
13+
}

‎src/styles/project7.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
:root .project7 {
2+
--clock-bg-color: rgba(0, 0, 0, 0.5);
3+
--bg-dawn-color: linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 56%, #ffbac3 100%);
4+
--bg-day-color: linear-gradient(to right, #f83600 0%, #f9d423 100%);
5+
--bg-night-color: linear-gradient(to top, #0250c5 0%, #d43f8d 100%);
6+
--base-font-family: 'Noto Sans KR', sans-serif;
7+
--base-font-size: 3.3rem;
8+
--base-padding: 2rem;
9+
}
10+
11+
.project7.dawn {
12+
background-image: var(--bg-dawn-color);
13+
}
14+
15+
.project7.day {
16+
background-image: var(--bg-day-color);
17+
}
18+
19+
.project7.night {
20+
background-image: var(--bg-night-color);
21+
}
22+
23+
.project7 .clock {
24+
background-color: var(--clock-bg-color);
25+
font-family: var(--base-font-family);
26+
color: white;
27+
font-size: var(--base-font-size);
28+
padding: var(--base-padding);
29+
}
30+
31+
@media (max-width: 500px) {
32+
.project7 .clock {
33+
font-size: 2rem;
34+
}
35+
}

‎src/styles/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import url('./project4.css');
55
@import url('./project5.css');
66
@import url('./project6.css');
7+
@import url('./project7.css');
78

89
:root {
910
--primary-color: #306ba4;

0 commit comments

Comments
 (0)