Skip to content

Commit d00ff43

Browse files
sarabgisarabgi
authored
Merge pull request #24 from Arcturus22/main
Created a Random-Color-Generator Website
2 parents add4bcc + 6642a4a commit d00ff43

File tree

4 files changed

+138
-0
lines changed

4 files changed

+138
-0
lines changed

‎Random-Color-Generator/del.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎Random-Color-Generator/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Random Color Generator</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
14+
<div id="Heading">
15+
<strong> <p id="Text">Random color generator </p> </strong>
16+
</div>
17+
<div class="container">
18+
<div id="Color">
19+
<p id="color-text">White</p>
20+
</div>
21+
22+
<div class="button">
23+
<button class="btn" id="b1">Click to change color.</button>
24+
</div>
25+
26+
<div class="button">
27+
<button id="b2" class="btn">Reset.</button>
28+
</div>
29+
</div>
30+
<script src="index.js"></script>
31+
</body>
32+
33+
</html>

‎Random-Color-Generator/index.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
3+
document.getElementById("b1").onclick = function () {
4+
let r, g, b, appleColor;
5+
r = Math.round(Math.random() * 256);
6+
g = Math.round(Math.random() * 256);
7+
b = Math.round(Math.random() * 256);
8+
appleColor = 'RGB(' + r + ',' + g + ',' + b + ')';
9+
document.getElementById("Color").style.backgroundColor
10+
= appleColor;
11+
document.getElementById("color-text").innerHTML=
12+
appleColor;
13+
14+
15+
}
16+
document.getElementById("b2").onclick =
17+
function(){
18+
19+
let color="white";
20+
document.getElementById("Color").style.backgroundColor
21+
=color;
22+
document.getElementById("color-text").innerHTML=
23+
"White";
24+
}
25+

‎Random-Color-Generator/style.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
body{
2+
background: rgb(131,58,180);
3+
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
4+
}
5+
#Heading{
6+
text-align: center;
7+
font-size: 60px;
8+
color: white;
9+
font-family: Verdana, Geneva, Tahoma, sans-serif;
10+
}
11+
.container{
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
flex-direction: column;
16+
margin-top: 0px;
17+
}
18+
#Color{
19+
background-color: white;
20+
height: 300px;
21+
width: 300px;
22+
margin: 10px auto;
23+
padding-top: 20px;
24+
border-radius: 1em;
25+
box-shadow: 10px 10px 8px #181717;
26+
}
27+
#color-text{
28+
border-radius: 1em;
29+
text-align: center;
30+
font-size: 23px;
31+
width: 190px;
32+
background-color: white;
33+
padding: 15px;
34+
border: 1px solid black;
35+
display: block;
36+
margin: 30px auto;
37+
}
38+
.btn{
39+
margin-top: 20px ;
40+
padding: 10px;
41+
font-size: 22px;
42+
background-color: rgb(230, 170, 215);
43+
border-radius: 9px;
44+
cursor: pointer;
45+
transition: 0.3s;
46+
box-shadow: 10px 10px 8px #181717;
47+
48+
}
49+
#b2{
50+
background-color: bisque;
51+
}
52+
.button{
53+
text-align: center;
54+
55+
}
56+
57+
.btn:hover{
58+
background-color: yellow;
59+
font-size: 25px;
60+
}
61+
62+
@media (max-height:638px ) {
63+
64+
#Heading{
65+
font-size: 30px;
66+
}
67+
#Color{
68+
height: 150px;
69+
width: 150px;
70+
margin: 5px auto;
71+
padding-top: 10px;
72+
border-radius: 1em;
73+
}
74+
#color-text{
75+
width: 95px;
76+
padding: 7.5px;
77+
margin: 15px auto;
78+
}
79+
}

0 commit comments

Comments
 (0)