Skip to content

Commit 898ab93

Browse files
Denis793Denis793
committed
Initial commit
0 parents  commit 898ab93

6 files changed

Lines changed: 155 additions & 0 deletions

File tree

‎.gitattributes‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 Denys Shevchenko
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎app/js/main.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const generate = document.getElementById('generate');
2+
const valueColor = document.getElementById('valueColor');
3+
4+
const randomColor = () => {
5+
return `#${Math.floor(Math.random() * 16777215)
6+
.toString(16)
7+
.toUpperCase()}`;
8+
};
9+
10+
const setBackground = () => {
11+
const colorCode = randomColor();
12+
document.body.style.backgroundColor = colorCode;
13+
14+
valueColor.textContent = colorCode;
15+
valueColor.style.color = colorCode;
16+
};
17+
18+
generate.addEventListener('click', setBackground);
19+
setBackground();

‎app/style/css/main.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@charset "UTF-8";
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: "Roboto";
7+
font-size: 10px;
8+
}
9+
10+
body {
11+
width: 100vw;
12+
height: 100vh;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
}
18+
19+
.title,
20+
.valueColor {
21+
font-size: clamp(1.4rem, 5vw, 5rem);
22+
color: #fff;
23+
position: relative;
24+
width: 90%;
25+
text-align: center;
26+
}
27+
28+
.title {
29+
background-color: #000;
30+
border-radius: 15px;
31+
padding-block: clamp(1rem, 3vw, 3rem); /* верх + низ */
32+
padding-inline: clamp(1.4rem, 5vw, 5rem); /* ліво + право */
33+
}
34+
35+
.button {
36+
padding: 2rem 3rem;
37+
border: 2px solid transparent;
38+
border-radius: 10px;
39+
margin: 4rem;
40+
font-size: 2rem;
41+
cursor: pointer;
42+
}
43+
44+
.button:hover {
45+
border: 2px solid #000;
46+
background-color: transparent;
47+
}

‎app/style/scss/main.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
6+
font-family: 'Roboto';
7+
font-size: 10px;
8+
}
9+
10+
body {
11+
width: 100vw;
12+
height: 100vh;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
}
18+
19+
.title,
20+
.valueColor {
21+
font-size: clamp(1.4rem, 5vw, 5rem);
22+
color: #fff;
23+
position: relative;
24+
width: 90%;
25+
text-align: center;
26+
}
27+
28+
.title {
29+
background-color: #000;
30+
border-radius: 15px;
31+
padding-block: clamp(1rem, 3vw, 3rem); /* верх + низ */
32+
padding-inline: clamp(1.4rem, 5vw, 5rem); /* ліво + право */
33+
}
34+
35+
.button {
36+
padding: 2rem 3rem;
37+
border: 2px solid transparent;
38+
border-radius: 10px;
39+
margin: 4rem;
40+
font-size: 2rem;
41+
cursor: pointer;
42+
}
43+
44+
.button:hover {
45+
border: 2px solid #000;
46+
background-color: transparent;
47+
}

‎index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Random Color</title>
7+
<link href="./app/style/css/main.css" rel="stylesheet" />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
10+
rel="stylesheet"
11+
/>
12+
</head>
13+
<body>
14+
<h1 class="title">Background Color: <span id="valueColor" class="valueColor"></span></h1>
15+
<button class="button" id="generate" type="button">Змінити колір</button>
16+
17+
<script src="./app/js/main.js"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)