Skip to content

Commit a0d6570

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1140 from kiselova/ColorChanger-kiselova
ColorChanger project
2 parents f875994 + 05f64a4 commit a0d6570

File tree

3 files changed

+163
-0
lines changed

3 files changed

+163
-0
lines changed

‎ColorChanger-MiniApp/kiselova/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Color Generator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="random-element">
13+
<h1>Color Changer</h1>
14+
<h2>CLICK ANY ONE OF THESE ELEMENTS</h2>
15+
<div class="color-pallets-div">
16+
<div class="pallet" data-color="red"></div>
17+
<div class="pallet" data-color="green"></div>
18+
<div class="pallet" data-color="purple"></div>
19+
<div class="pallet" data-color="blue"></div>
20+
</div>
21+
</div>
22+
23+
<div class="container">
24+
<div class="wrapper">
25+
R<input type="range" min="0" max="255" value="0" id="red" oninput="colors()">
26+
</div>
27+
<div class="wrapper">
28+
G<input type="range" min="0" max="255" value="0" id="green" oninput="colors()">
29+
</div>
30+
<div class="wrapper">
31+
B<input type="range" min="0" max="255" value="0" id="blue" oninput="colors()">
32+
</div>
33+
<span id="output">rgb(0, 0, 0)</span>
34+
35+
<script src="script.js"></script>
36+
37+
</body>
38+
39+
</html>

‎ColorChanger-MiniApp/kiselova/script.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
function colors() {
2+
var red = document.getElementById("red").value;
3+
var green = document.getElementById("green").value;
4+
var blue = document.getElementById("blue").value;
5+
document.body.style.backgroundColor =
6+
"rgb(" + red + "," + green + "," + blue + ")";
7+
document.getElementById("output").innerHTML =
8+
"rgb(" + red + "," + green + "," + blue + ")";
9+
}
10+
11+
function myFunction() {
12+
document.getElementById("myDIV").style.backgroundColor = "lightblue";
13+
}
14+
15+
document.querySelectorAll(".pallet").forEach((pallet) => {
16+
pallet.addEventListener("click", () => {
17+
document.body.style.backgroundColor = pallet.getAttribute("data-color");
18+
});
19+
});

‎ColorChanger-MiniApp/kiselova/style.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
*,
2+
*::after,
3+
*::before {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body {
10+
background-color: #142b37;
11+
}
12+
13+
.random-element {
14+
width: 60%;
15+
border: 4px solid black;
16+
margin: 2em auto;
17+
padding: 1em;
18+
border-radius: 10px;
19+
background-color: white;
20+
}
21+
22+
h1 {
23+
font-size: 100px;
24+
margin-bottom: 0.2em;
25+
}
26+
27+
h1,
28+
h2 {
29+
text-align: center;
30+
}
31+
32+
h2 {
33+
font-weight: 500;
34+
}
35+
36+
.color-pallets-div {
37+
display: flex;
38+
align-items: center;
39+
gap: 1em;
40+
justify-content: center;
41+
margin-top: 1.5em;
42+
}
43+
44+
.pallet {
45+
cursor: pointer;
46+
width: 55px;
47+
height: 55px;
48+
border-radius: 7px;
49+
background-color: blue;
50+
}
51+
52+
[data-color="red"] {
53+
background-color: red;
54+
}
55+
56+
[data-color="green"] {
57+
background-color: green;
58+
}
59+
60+
[data-color="purple"] {
61+
background-color: purple;
62+
}
63+
64+
.container {
65+
background-color: #ffffff;
66+
position: absolute;
67+
transform: translate(-50%, -50%);
68+
top: 50%;
69+
left: 50%;
70+
width: 60%;
71+
padding: 20px 0;
72+
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
73+
font-family: "Work Sans", sans-serif;
74+
font-size: 20px;
75+
font-weight: 500;
76+
color: #142b37;
77+
border-radius: 5px;
78+
display: grid;
79+
justify-items: center;
80+
margin-top: 6em;
81+
}
82+
83+
.wrapper {
84+
width: 100%;
85+
text-align: center;
86+
}
87+
88+
input[type="range"] {
89+
display: inline-block;
90+
width: 80%;
91+
margin-left: 10px;
92+
margin-top: 25px;
93+
}
94+
95+
span {
96+
display: inline-block;
97+
text-align: center;
98+
margin: 20px 0;
99+
background-color: #0075ff;
100+
color: #ffffff;
101+
padding: 10px 30px;
102+
font-size: 18px;
103+
letter-spacing: 0.5px;
104+
border-radius: 2px;
105+
}

0 commit comments

Comments
 (0)