Skip to content

Commit 0884b76

Browse files
ijaz-ali-devijaz-ali-dev
authored
Random Color Generator (devvsakib#35)
* `index file added` * `create a script file` * `style file added` * `Budget App` (devvsakibwithijaz#33) * Create readme.md * `create a index.html` * `create a style.css` * Create index.html * `COVID-19 Screening Tool` * Delete index.html * `index file added` * `added style` * `Random Color Generator`
1 parent b4f6195 commit 0884b76

File tree

3 files changed

+98
-0
lines changed

3 files changed

+98
-0
lines changed

‎random color generator/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+
<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" />
7+
<link
8+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
9+
rel="stylesheet"
10+
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
11+
crossorigin="anonymous"
12+
/>
13+
<link
14+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
15+
rel="stylesheet"
16+
crossorigin="anonymous"
17+
/>
18+
<title>Random Color Generator</title>
19+
<link href="./style.css" rel="stylesheet" />
20+
<script src="./script.js"></script>
21+
</head>
22+
23+
<body onload="initialColor()">
24+
<div class="content">
25+
<div>
26+
<i class="fas fa-copy" id="copy"></i>
27+
<p class="display-5 title" id="title" onmouseenter="copy()"></p>
28+
</div>
29+
<button
30+
type="button"
31+
class="btn btn-dark"
32+
onclick="colorGenerator()"
33+
id="btn"
34+
>
35+
New Color
36+
</button>
37+
</div>
38+
</body>
39+
</html>

‎random color generator/script.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"]
2+
let hexcode = "#41b3a3"
3+
function initialColor() {
4+
document.body.style.background = hexcode
5+
document.getElementById("title").innerHTML = hexcode
6+
}
7+
function colorGenerator() {
8+
const hexarray = []
9+
10+
for (i = 0; i < 6; i++) {
11+
const random = Math.floor(Math.random() * 16)
12+
hexarray.push(hex[random])
13+
}
14+
hexcode = "#" + hexarray.join("")
15+
document.body.style.background = hexcode
16+
document.getElementById("title").innerHTML = hexcode
17+
document.getElementById("copy").style.color = "black"
18+
}
19+
function copy() {
20+
const copyText = document.getElementById("title").innerHTML
21+
navigator.clipboard.writeText(copyText)
22+
document.getElementById("copy").style.color = hexcode
23+
}

‎random color generator/style.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
body,
2+
html {
3+
height: 100%;
4+
width: 100%;
5+
display: grid;
6+
}
7+
8+
.content {
9+
text-align: center;
10+
margin: auto;
11+
}
12+
13+
.title {
14+
display: inline-block;
15+
text-align: center;
16+
background-color: white;
17+
border-radius: 20px;
18+
min-width: 380px;
19+
padding: 10px;
20+
cursor: default;
21+
}
22+
23+
.fa-copy {
24+
color: black;
25+
font-size: 5vh;
26+
z-index: 99;
27+
position: relative;
28+
left: 60px;
29+
margin-left: -30px;
30+
}
31+
32+
@media only screen and (max-width: 600px) {
33+
.title {
34+
min-width: 300px;
35+
}
36+
}

0 commit comments

Comments
 (0)