Skip to content

Commit 67240fb

Browse files
limkhllimkhl
committed
add: project 5 카운터 UI 추가
1 parent e9368ce commit 67240fb

File tree

11 files changed

+243
-0
lines changed

11 files changed

+243
-0
lines changed

‎project5-Counter/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/reset-css@5.0.1/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>

‎project5-Counter/src/App.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Button from './Button.js';
2+
import * as feature from './Constants.js';
3+
import Count from './Count.js';
4+
5+
export default function App({ $target }) {
6+
const $container = document.createElement('div');
7+
$container.className = 'countContainer';
8+
$target.append($container);
9+
$container.innerHTML = /* html */ `
10+
<h2>Counter</h2>
11+
`;
12+
13+
const count = new Count({ $target: $container, initialState: 0 });
14+
15+
new Button({
16+
$target: $container,
17+
feature: feature.INCREASE,
18+
onClick: () => {
19+
count.setState(count.state + 1);
20+
},
21+
});
22+
23+
new Button({
24+
$target: $container,
25+
feature: feature.DECREASE,
26+
onClick: () => {
27+
count.setState(count.state - 1);
28+
},
29+
});
30+
}

‎project5-Counter/src/Button.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default function Button({ $target, feature, onClick }) {
2+
const $button = document.createElement('button');
3+
$target.append($button);
4+
5+
$button.textContent = feature;
6+
$button.className = feature;
7+
8+
$button.addEventListener('click', (e) => {
9+
onClick();
10+
});
11+
}

‎project5-Counter/src/Constants.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const INCREASE = 'Increase';
2+
export const DECREASE = 'Decrease';

‎project5-Counter/src/Count.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export default function Count({ $target, initialState }) {
2+
const $count = document.createElement('p');
3+
$target.append($count);
4+
5+
this.state = initialState;
6+
7+
this.setState = (nextState) => {
8+
this.state = nextState;
9+
this.render();
10+
};
11+
12+
this.render = () => {
13+
$count.textContent = this.state;
14+
};
15+
16+
this.render();
17+
}

‎project5-Counter/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 = 'project5 page';
7+
8+
new App({ $target: $page });

‎project5-Counter/src/style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
:root .project5 {
2+
--bg-color: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
3+
--base-font-family: 'Noto Sans KR', sans-serif;
4+
--border-radius: 0.4rem;
5+
--box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
6+
--base-margin: 1.3rem;
7+
--base-padding: 1.6rem;
8+
--button-padding: 0.5rem;
9+
--button-border: 1px solid gray;
10+
--button-color: rgb(52, 58, 64);
11+
--button-bg-color: transparent;
12+
--button-hover-color: purple;
13+
--box-border: 5px solid rebeccapurple;
14+
}
15+
16+
.wrap {
17+
width: 100vw;
18+
height: 100vh;
19+
}
20+
21+
.page {
22+
width: 100%;
23+
height: 100%;
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
}
28+
29+
.project5 {
30+
background-image: var(--bg-color);
31+
font-weight: bold;
32+
}
33+
34+
.project5 button {
35+
padding: 10px 15px;
36+
background-color: var(--button-bg-color);
37+
border-radius: var(--border-radius);
38+
cursor: pointer;
39+
outline: 0;
40+
color: var(--button-color);
41+
font-size: 16px;
42+
border: var(--button-border);
43+
transition: all 0.2s;
44+
}
45+
46+
.project5 button:hover {
47+
color: white;
48+
font-weight: 500;
49+
background-color: var(--button-hover-color);
50+
}
51+
52+
.project5 button + button {
53+
margin-left: 20px;
54+
}
55+
56+
.project5 .countContainer {
57+
text-align: center;
58+
background-color: white;
59+
flex-basis: 500px;
60+
padding: var(--base-padding);
61+
box-sizing: border-box;
62+
border-radius: var(--border-radius);
63+
box-shadow: var(--box-shadow);
64+
border: var(--box-border);
65+
}
66+
67+
.project5 .countContainer h2 {
68+
font-size: 2rem;
69+
}
70+
71+
.project5 .countContainer p {
72+
font-size: 6.5rem;
73+
line-height: 12rem;
74+
}

‎src/components/App.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Project1Page from '../../project1-colors/src/Project1Page.js';
66
import Project2Page from '../../project2-HexColorsGradient/src/Project2Page.js';
77
import Project3Page from '../../project3-RandomQuoteGenerator/src/Project3Page.js';
88
import Project4Page from '../pages/Project4Page.js';
9+
import Project5Page from '../pages/Project5Page.js';
910

1011
export default function App({ $target }) {
1112
new Header({ $target });
@@ -19,6 +20,7 @@ export default function App({ $target }) {
1920
const project2Page = new Project2Page({ $target: $main });
2021
const project3Page = new Project3Page({ $target: $main });
2122
const project4Page = new Project4Page({ $target: $main });
23+
const project5Page = new Project5Page({ $target: $main });
2224

2325
this.route = () => {
2426
$main.innerHTML = ``;
@@ -41,6 +43,9 @@ export default function App({ $target }) {
4143
case 4:
4244
project4Page.render();
4345
break;
46+
case 5:
47+
project5Page.render();
48+
break;
4449
}
4550
} else {
4651
notFoundPage.render();

‎src/pages/Project5Page.js‎

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

‎src/styles/project5.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
:root .project5 {
2+
--bg-color: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
3+
--base-font-family: 'Noto Sans KR', sans-serif;
4+
--border-radius: 0.4rem;
5+
--box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
6+
--base-margin: 1.3rem;
7+
--base-padding: 1.6rem;
8+
--button-padding: 0.5rem;
9+
--button-border: 1px solid gray;
10+
--button-color: rgb(52, 58, 64);
11+
--button-bg-color: transparent;
12+
--button-hover-color: purple;
13+
--box-border: 5px solid rebeccapurple;
14+
}
15+
16+
.project5.page {
17+
background-image: var(--bg-color);
18+
font-weight: bold;
19+
flex-direction: row;
20+
}
21+
22+
.project5 button {
23+
padding: 10px 15px;
24+
background-color: var(--button-bg-color);
25+
border-radius: var(--border-radius);
26+
cursor: pointer;
27+
outline: 0;
28+
color: var(--button-color);
29+
font-size: 16px;
30+
border: var(--button-border);
31+
transition: all 0.2s;
32+
}
33+
34+
.project5 button:hover {
35+
color: white;
36+
font-weight: 500;
37+
background-color: var(--button-hover-color);
38+
}
39+
40+
.project5 button + button {
41+
margin-left: 20px;
42+
}
43+
44+
.project5 .countContainer {
45+
text-align: center;
46+
background-color: white;
47+
flex-basis: 500px;
48+
padding: var(--base-padding);
49+
box-sizing: border-box;
50+
border-radius: var(--border-radius);
51+
box-shadow: var(--box-shadow);
52+
border: var(--box-border);
53+
}
54+
55+
.project5 .countContainer h2 {
56+
font-size: 2rem;
57+
}
58+
59+
.project5 .countContainer p {
60+
font-size: 6.5rem;
61+
line-height: 12rem;
62+
}

0 commit comments

Comments
 (0)