Skip to content

Commit 7a31a1a

Browse files
limkhllimkhl
committed
add: 랜덤 그라데이션 생성 UI 추가
1 parent 5fcfb03 commit 7a31a1a

File tree

5 files changed

+152
-0
lines changed

5 files changed

+152
-0
lines changed

‎project2-HexColorsGradient/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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 rel="stylesheet" href="./src/style.css" />
9+
</head>
10+
<body>
11+
<main id="app"></main>
12+
<script src="./src/main.js" type="module"></script>
13+
</body>
14+
</html>

‎project2-HexColorsGradient/src/Button.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export default function Button({ $target, onClick }) {
2+
const $button = document.createElement("button");
3+
$target.append($button);
4+
$button.textContent = "Click Me!";
5+
6+
$button.addEventListener("click", (e) => {
7+
const generateRandomDirection = () => {
8+
return Math.floor(Math.random() * 2) === 0 ? `right` : `left`;
9+
};
10+
11+
const generateRandomColorCode = () => {
12+
const randomHex = Math.floor(Math.random() * 16777215).toString(16);
13+
return randomHex.length < 6
14+
? `${"0".repeat(6 - randomHex.length)}${randomHex}`
15+
: randomHex;
16+
};
17+
18+
onClick(
19+
generateRandomDirection(),
20+
generateRandomColorCode(),
21+
generateRandomColorCode()
22+
);
23+
});
24+
}

‎project2-HexColorsGradient/src/Sign.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export default function Sign({ $target }) {
2+
const $signContainer = document.createElement("div");
3+
$target.append($signContainer);
4+
5+
this.state = {
6+
direction: "right",
7+
colorCode: {
8+
start: "#ffffff",
9+
end: "#ffffff",
10+
},
11+
};
12+
13+
this.setState = (nextState) => {
14+
this.state = nextState;
15+
this.render();
16+
};
17+
18+
this.render = () => {
19+
const { direction, colorCode } = this.state;
20+
21+
$signContainer.innerHTML = /* html */ `
22+
<h1>아래에 있는 버튼을 클릭해서<br />랜덤 그라데이션 조합을 만들어보세요.</h1>
23+
<h2>background: linear-gradient(to ${direction}, #${colorCode.start}, #${colorCode.end})</h2>
24+
`;
25+
};
26+
27+
this.render();
28+
}

‎project2-HexColorsGradient/src/main.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Button from "./Button.js";
2+
import Sign from "./Sign.js";
3+
4+
const $app = document.querySelector("#app");
5+
6+
const signBoard = new Sign({ $target: $app });
7+
8+
new Button({
9+
$target: $app,
10+
onClick: (direction, startColor, endColor) => {
11+
$app.style.background = `linear-gradient(to ${direction}, #${startColor}, #${endColor})`;
12+
signBoard.setState({
13+
...signBoard.state,
14+
direction,
15+
colorCode: { start: startColor, end: endColor },
16+
});
17+
},
18+
});

‎project2-HexColorsGradient/src/style.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
font-family: "Noto Sans KR", sans-serif;
7+
}
8+
9+
:root {
10+
--text-start-color: rgb(52, 58, 64);
11+
--text-end-color: white;
12+
--button-color: white;
13+
--button-hover-color: rgb(52, 58, 64);
14+
--button-font-color: rgb(52, 58, 64);
15+
--button-border-color: rgb(52, 58, 64);
16+
}
17+
18+
#app {
19+
display: flex;
20+
flex-direction: column;
21+
justify-content: center;
22+
align-items: center;
23+
height: 100vh;
24+
background-color: transparent;
25+
}
26+
27+
#app div {
28+
text-align: center;
29+
animation: 3s ease-in-out 1s infinite alternate changeFontColor;
30+
color: var(--text-start-color);
31+
}
32+
33+
#app h1 {
34+
margin-bottom: 100px;
35+
}
36+
37+
#app h2 {
38+
margin-bottom: 30px;
39+
}
40+
41+
button {
42+
padding: 10px 15px;
43+
background-color: var(--button-color);
44+
border-radius: 5px;
45+
cursor: pointer;
46+
outline: 0;
47+
color: var(--button-font-color);
48+
font-size: 16px;
49+
border: 1px solid var(--button-border-color);
50+
transition: all 0.2s;
51+
box-shadow: 0px 0px 0px 5px rgb(255, 255, 255, 0.8);
52+
}
53+
54+
button:hover {
55+
color: white;
56+
font-weight: 500;
57+
background-color: var(--button-hover-color);
58+
}
59+
60+
@keyframes changeFontColor {
61+
from {
62+
color: var(--text-start-color);
63+
}
64+
65+
to {
66+
color: var(--text-end-color);
67+
}
68+
}

0 commit comments

Comments
 (0)