Skip to content

Commit 9b477c9

Browse files
Anujit1Anujit1
committed
added project Color Changer
0 parents  commit 9b477c9

File tree

3 files changed

+223
-0
lines changed

3 files changed

+223
-0
lines changed

‎colorChanger/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Color Switcher</title>
6+
7+
<!-- css -->
8+
<link rel="stylesheet" href="styles.css">
9+
10+
11+
<!-- Font -->
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">
15+
16+
17+
</head>
18+
19+
<body>
20+
<nav class="navbar">
21+
<h1>Color Changer</h1>
22+
</nav>
23+
24+
<div class="canvas">
25+
<h2 class="canvasText">Select color to Preview</h2>
26+
<div class="buttons">
27+
<span class="button" id="white"></span>
28+
<span class="button" id="black"></span>
29+
<span class="button" id="gray"></span>
30+
<span class="button" id="red"></span>
31+
<span class="button" id="blue"></span>
32+
<span class="button" id="green"></span>
33+
<span class="button" id="cyan"></span>
34+
<span class="button" id="magenta"></span>
35+
</div>
36+
37+
<h3 class="canvasText">Try clicking on one of the colors above to change the background color of this page!</h3>
38+
</div>
39+
</body>
40+
41+
<script src="script.js"></script>
42+
</html>

‎colorChanger/script.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const buttons = document.querySelectorAll('.button');
2+
const body = document.querySelector('body');
3+
4+
5+
6+
7+
buttons.forEach(function (button){
8+
9+
button.addEventListener('click', function(e){
10+
switch(e.target.id){
11+
case "white":
12+
body.style.backgroundColor = e.target.id;
13+
body.style.color = "black";
14+
break;
15+
16+
case "black":
17+
body.style.backgroundColor = e.target.id;
18+
body.style.color = "white";
19+
break;
20+
21+
case "red":
22+
body.style.backgroundColor = e.target.id;
23+
body.style.color = "white";
24+
break;
25+
26+
case "blue":
27+
body.style.backgroundColor = e.target.id;
28+
body.style.color = "white";
29+
break;
30+
31+
case "green":{
32+
body.style.backgroundColor = e.target.id;
33+
body.style.color = "white";
34+
break;
35+
}
36+
37+
case "cyan":{
38+
body.style.backgroundColor = e.target.id;
39+
body.style.color = "black";
40+
break;
41+
}
42+
43+
case "magenta":{
44+
body.style.backgroundColor = e.target.id;
45+
body.style.color = "black";
46+
break;
47+
}
48+
49+
case "gray":{
50+
body.style.backgroundColor = e.target.id;
51+
body.style.color = "white";
52+
break;
53+
}
54+
55+
default:{
56+
document.html.style.backgroundColor = "wheat";
57+
}
58+
}
59+
})
60+
61+
} );

‎colorChanger/styles.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body{
7+
background: white;
8+
font-family: 'Courier New', Courier, monospace;
9+
}
10+
11+
nav {
12+
display: flex;
13+
font-family: "Bungee Spice", sans-serif ;
14+
justify-content: center;
15+
align-items: center;
16+
padding: 10px;
17+
background-color: rgb(37, 35, 35);
18+
height: 30px;
19+
}
20+
21+
nav h1{
22+
color: aliceblue;
23+
font-family: "Bungee Spice", sans-serif;
24+
}
25+
26+
.canvasText{
27+
display: flex;
28+
flex-wrap: wrap;
29+
margin: 10px 10px;
30+
justify-content: center;
31+
align-items: center;
32+
}
33+
34+
.canvas {
35+
margin: 15vh auto;
36+
width: 80%;
37+
text-align: center;
38+
}
39+
40+
41+
/* buttons */
42+
43+
.buttons {
44+
display: flex;
45+
gap: 20px;
46+
margin: 20px auto;
47+
width: 80%;
48+
flex-wrap: wrap;
49+
justify-content: space-evenly;
50+
51+
}
52+
53+
.button{
54+
width: 100px;
55+
height: 100px;
56+
border: 2px solid black;
57+
}
58+
59+
60+
/* screen optimization */
61+
@media (min-width: 768px) {
62+
.buttons {
63+
display: grid;
64+
grid-template-columns: repeat(4, 1fr);
65+
justify-items: center;
66+
}
67+
}
68+
69+
@media (max-width: 767px) {
70+
.canvas {
71+
margin: 10vh auto;
72+
}
73+
}
74+
75+
@media (max-width: 600px) {
76+
.canvas {
77+
margin: 10vh auto;
78+
}
79+
}
80+
81+
@media (max-width: 545px) {
82+
.canvas {
83+
margin: 2vh auto;
84+
}
85+
}
86+
87+
88+
89+
/* colors */
90+
#white {
91+
background: white;
92+
}
93+
94+
#black {
95+
background: black;
96+
}
97+
98+
#red {
99+
background: red;
100+
}
101+
102+
#blue {
103+
background: blue;
104+
}
105+
106+
#gray {
107+
background: gray;
108+
}
109+
110+
#cyan {
111+
background: cyan;
112+
}
113+
114+
#magenta {
115+
background: magenta;
116+
}
117+
118+
#green {
119+
background: green;
120+
}

0 commit comments

Comments
 (0)