Skip to content

Commit 738adfb

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #179 from yellowberard/rndmcolor
Updated random color generator
2 parents 4e2989e + 43187bf commit 738adfb

File tree

5 files changed

+179
-57
lines changed

5 files changed

+179
-57
lines changed

‎Random Color Generator/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<h1> Random Color Generator </h1>
2+
<h3>Project overview</h3> <br>
3+
This a simple project where user can generate a random color for background, random gradient background and random button background.The heading also changes contrast on the basis of basis of abckground color.Background color also changes in case button backgroung is button color is light. <br>
4+
<h3>Use of the Project</h3> <br>
5+
User can have rgb value random color and can see how a color would look on backgund of the page and button. User can also have random gradient background color. <br>
6+
<h3> Languages Used:-</h3> <br>
7+
<ul>
8+
<li>HTML</li>
9+
<li>CSS</li>
10+
<li>Javascript</li>
11+
</ul>
12+
<h3>How to run the project</h3><br>
13+
Running the project is easy.The user only have to press the button and a random color would be generated.<br>
14+
Here Are Some Pictures:-<br>
15+
16+
<image src="https://user-images.githubusercontent.com/82977727/125175181-022b8180-e1e8-11eb-9159-777edd5d1948.png"> Opening Page </image>
17+
<image src="https://user-images.githubusercontent.com/82977727/125175231-50d91b80-e1e8-11eb-955c-51ff808a67f8.png"> Random Background Color </image>
18+
<image src="https://user-images.githubusercontent.com/82977727/125175255-8978f500-e1e8-11eb-836f-77e30a99959a.png"> Random Gradient Backround </image>
19+
<image src="https://user-images.githubusercontent.com/82977727/125175296-bc22ed80-e1e8-11eb-88a3-3f428c5ac01e.png"> Random Button Dark Background </image>
20+
<image src="https://user-images.githubusercontent.com/82977727/125175321-ed032280-e1e8-11eb-859f-963bcc88b5f4.png"> Random Button Light Background </image>
21+
<h2>Link for The Website</h2>
22+
link:-https://yellowberard.github.io/Random-Color-Website/randomcolor.html
23+

‎Random Color Generator/Readme.md

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎Random Color Generator/randomcolor.css

Lines changed: 75 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,77 @@
1-
h1{
2-
display:flex;
3-
justify-content: center;
1+
h1 {
2+
display: flex;
3+
4+
justify-content: center;
5+
6+
font-weight: bolder;
7+
8+
font-size: 60px;
9+
10+
text-shadow: 2px 2px;
11+
12+
font-family: "Raleway", sans-serif;
413
}
5-
.color_gen{
6-
display:flex;
7-
justify-content: center;
14+
15+
.color_gen {
16+
display: flex;
17+
18+
justify-content: center;
819
}
20+
21+
body {
22+
width: 100%;
23+
24+
height: 100%;
25+
26+
display: flex;
27+
28+
justify-content: center;
29+
30+
align-items: center;
31+
}
32+
33+
html {
34+
height: 100%;
35+
}
36+
37+
#random,
38+
.brndm,
39+
#gradc {
40+
font-size: 20px;
41+
42+
border-radius: 12px;
43+
44+
padding: 16px 32px;
45+
46+
text-align: center;
47+
48+
font-size: 20px;
49+
50+
margin: 4px 2px;
51+
52+
opacity: 0.6;
53+
54+
transition: 0.3s;
55+
56+
font-weight: bolder;
57+
58+
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
59+
}
60+
61+
.color_gen:active {
62+
transform: translateY(4px);
63+
}
64+
65+
#random:hover {
66+
opacity: 1;
67+
}
68+
69+
#gradc:hover {
70+
opacity: 1;
71+
}
72+
73+
.brndm:hover {
74+
opacity: 1;
75+
}
76+
77+

‎Random Color Generator/randomcolor.html

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
<!DOCTYPE html>
22
<html lang="en">
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">
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" />
77
<title>Random Color</title>
8-
<link rel="stylesheet" href="randomcolor.css">
9-
</head>
10-
<body>
11-
<h1>Random Color</h1>
12-
<div class="color_gen">
13-
<button id="random">Change color</button>
14-
</div>
8+
<link rel="stylesheet" href="randomcolor.css" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
12+
</head>
13+
<body>
14+
<div class="rndm">
15+
<h1>RANDOM COLOR</h1>
16+
<div class="color_gen">
17+
<button id="random">Change Background Color</button>
18+
<button id="gradc">Change Background Gradient Color</button>
19+
<button class="brndm">Change Button Background</button>
20+
</div>
21+
</div>
1522
<script src="randomcolor.js"></script>
16-
</body>
17-
</html>
23+
</body>
24+
</html>
25+

‎Random Color Generator/randomcolor.js

Lines changed: 60 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,62 @@
1-
const colour = document.querySelector('button');
2-
const h1=document.querySelector('h1');
3-
const rndmcolor = () =>
4-
{
5-
const r = Math.floor(Math.random()*255);
6-
const g = Math.floor(Math.random()*255);
7-
const b = Math.floor(Math.random()*255);
8-
// let r=10, b =40 ,g=31;
9-
return `rgb(${r},${g},${b})`;
1+
const colour = document.querySelector('#random');
2+
const h = document.querySelector('h1');
3+
const gradcolor = document.querySelector('#gradc');
4+
const buttoncolor = document.querySelector('.brndm')
5+
6+
// to generate random color
7+
const rndmcolor = () => {
8+
9+
let rgb = [1, 1, 1];
10+
rgb[0] = Math.floor(Math.random() * 255);
11+
rgb[1] = Math.floor(Math.random() * 255);
12+
rgb[2] = Math.floor(Math.random() * 255);
13+
14+
return rgb;
1015
}
16+
// To Check contrast of the text
17+
const checkContrast = (tcolor) => {
18+
const textc = Math.floor(((parseInt(tcolor[0]) * 255) + (parseInt(tcolor[1]) * 255) + (parseInt(tcolor[2]) * 255)) / 765);
19+
const textColour = (textc > 96) ? 'black' : 'white';
20+
return textColour;
21+
}
22+
23+
//For Random Background color
24+
colour.addEventListener('click', function() {
25+
const tempcolor = rndmcolor();
26+
const newcolor = `rgb(${tempcolor[0]},${tempcolor[1]},${tempcolor[2]})`;
27+
const textcolor = checkContrast(tempcolor);
28+
document.body.style.background = newcolor;
29+
h.style.color = textcolor;
30+
h.innerText = `THE BACKGROUND COLOR IS: ${newcolor}`;
31+
buttoncolor.style.background = "white";
32+
33+
});
34+
//For Random gradient background
35+
gradcolor.addEventListener('click', function() {
36+
const tempcolor = rndmcolor();
37+
const tempcolor2 = rndmcolor();
38+
const newcolor = `rgb(${tempcolor[0]},${tempcolor[1]},${tempcolor[2]})`;
39+
const newcolorr2 = `rgb(${tempcolor2[0]},${tempcolor2[1]},${tempcolor2[2]})`;
40+
41+
document.body.style.background = "linear-gradient(to right, " +
42+
newcolor +
43+
", " +
44+
newcolorr2 +
45+
")";
46+
47+
h.innerText = `THE GRADIENT COLOR IS: ${newcolor},${newcolorr2}`;
48+
h.style.color = "black";
49+
buttoncolor.style.background = "white";
50+
});
51+
// For random button background
52+
buttoncolor.addEventListener('click', function() {
53+
const tempcolor = rndmcolor();
54+
const newcolor = `rgb(${tempcolor[0]},${tempcolor[1]},${tempcolor[2]})`;
55+
const contrast = checkContrast(tempcolor);
56+
document.body.style.background = contrast;
57+
buttoncolor.style.background = newcolor;
58+
h.style.color = newcolor;
59+
h.innerText = `THE BUTTON BACKGROUND COLOR IS: ${newcolor}`;
60+
});
61+
1162

12-
colour.addEventListener('click', function () {
13-
const newcolor= rndmcolor();
14-
document.body.style.backgroundColor = newcolor;
15-
console.log("hey")
16-
h1.innerText= `The Color is : ${newcolor}`;
17-
// if(`newcolor<rgb(50,50,50)`)
18-
// {
19-
// h1.innerText.style.colour = white;
20-
// }
21-
});

0 commit comments

Comments
 (0)