Skip to content

Commit 0bf03a5

Browse files
committed
random color generator project
1 parent 9432e31 commit 0bf03a5

File tree

4 files changed

+76
-0
lines changed

4 files changed

+76
-0
lines changed

Random-Color-Generator/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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>Document</title>
7+
</head>
8+
<link rel="stylesheet" href="style.css">
9+
<body>
10+
<h1>Random color generator</h1>
11+
12+
<div class="container">
13+
<div>
14+
<input type="color" id="color">
15+
<h4 id="text">#000000</h4>
16+
<p>click to change color</p>
17+
</div>
18+
</div>
19+
<script src="script.js"></script>
20+
</body>
21+
</html>

Random-Color-Generator/script.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
function randomInteger(max) {
3+
return Math.floor(Math.random()*(max + 1));
4+
}
5+
6+
function randomRgbColor() {
7+
let r = randomInteger(255);
8+
let g = randomInteger(255);
9+
let b = randomInteger(255);
10+
return [r,g,b];
11+
}
12+
13+
function randomHexColor() {
14+
let [r,g,b] =randomRgbColor();
15+
16+
let hr = r.toString(16).padStart(2, '0');
17+
let hg = g.toString(16).padStart(2, '0');
18+
let hb = b.toString(16).padStart(2, '0');
19+
20+
return "#" + hr + hg + hb;
21+
}
22+
23+
function changeColor() {
24+
let hex = randomHexColor();
25+
document.getElementById('color').value = hex;
26+
document.getElementById('text').innerHTML = hex;
27+
}
28+
29+
function clickHandler(event) {
30+
changeColor();
31+
event.preventDefault();
32+
}
33+
34+
document.addEventListener('click', clickHandler);
35+
36+
changeColor();

Random-Color-Generator/style.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#color {
2+
width: 50rem;
3+
height: 30rem;
4+
}
5+
6+
7+
h4, h5, p {
8+
font-family: sans-serif;
9+
text-align: center;
10+
}
11+
12+
.container {
13+
width: 100%;
14+
height: 100vh;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
}

javascript-mini-projects

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit 07d855499aa9bea6d21e9d59ca1fe18c7d61b674

0 commit comments

Comments
 (0)