Skip to content

Commit 4bf40c5

Browse files
SapiosonicSapiosonic
committed
new repository
0 parents  commit 4bf40c5

File tree

3 files changed

+173
-0
lines changed

3 files changed

+173
-0
lines changed

‎index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
<title>Random Hex Color Code</title>
8+
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=Roboto+Mono:wght@200;300;400;500;600&display=swap" rel="stylesheet">
12+
13+
<link rel="stylesheet" href="style.css">
14+
</head>
15+
<body>
16+
<div class="container">
17+
<div id="output-color">
18+
<span></span>
19+
</div>
20+
<input type="text" id="output" readonly>
21+
<div class="btns">
22+
<button id="gen-btn">Generate</button>
23+
<button id="copy-btn">Copy</button>
24+
</div>
25+
</div>
26+
<div class="custom-alert">Hex Code Copied</div>
27+
<!--Script-->
28+
<script src="script.js"></script>
29+
</body>
30+
</html>

‎script.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
let outputColor = document.querySelector("#output-color span");
2+
let output = document.getElementById("output");
3+
let genBtn = document.getElementById("gen-btn");
4+
let copyBtn = document.getElementById("copy-btn");
5+
let customAlert = document.querySelector(".custom-alert");
6+
let hexString = "0123456abcdef";
7+
8+
let genHexCode = () => {
9+
let hexCode = "#";
10+
for( i = 0; i < 6; i++){
11+
hexCode += hexString[Math.floor(Math.random() * hexString.length)];
12+
}
13+
output.value = hexCode;
14+
outputColor.classList.remove("show-color");
15+
setTimeout( () => {
16+
outputColor.classList.add("show-color")
17+
}, 10);
18+
outputColor.style.backgroundColor = hexCode;
19+
}
20+
21+
copyBtn.addEventListener("click", () => {
22+
output.select();
23+
document.execCommand("copy");
24+
customAlert.style.transform = "translateX(0)";
25+
setTimeout( () => {
26+
customAlert.style.transform = "translateX( calc( 100% + 10px))"
27+
}, 2000);
28+
})
29+
30+
window.onload = genHexCode;
31+
genBtn.addEventListener("click", genHexCode);

‎style.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
border: none;
6+
outline: none;
7+
font-family: 'Roboto Mono', monospace;
8+
}
9+
10+
body {
11+
background-color: #121317;
12+
}
13+
14+
.container{
15+
background-color: #202229;
16+
width: 60vmin;
17+
padding: 2.5em 2em;
18+
position: absolute;
19+
transform: translate(-50%,-50%);
20+
top: 50%;
21+
left: 50%;
22+
font-size: 3vmin;
23+
border-radius: 10px;
24+
}
25+
26+
#output-color {
27+
position: relative;
28+
height: 30vmin;
29+
width: 30vmin;
30+
border:0.5em solid #f5f5f5;
31+
border-radius: 50%;
32+
margin: auto;
33+
display: grid;
34+
place-items: center;
35+
}
36+
37+
#output-color span{
38+
display: block;
39+
width: calc( 100% - 20px);
40+
height: calc( 100% - 20px);
41+
border-radius: 50%;
42+
}
43+
44+
.show-color{
45+
animation: pop 0.8s;
46+
}
47+
48+
@keyframes pop{
49+
0%{
50+
transform: scale(0);
51+
}
52+
100%{
53+
transform: scale(1);
54+
}
55+
}
56+
57+
input[type="text"]{
58+
width: 100%;
59+
background-color: transparent;
60+
border: 2.5px dashed #f5f5f5;
61+
font-size: 1.3em;
62+
padding:0.8em 0;
63+
margin: 1em 0;
64+
border-radius: 8px;
65+
color: #f5f5f5;
66+
text-align: center;
67+
}
68+
69+
input[type="text"]::-moz-selection{
70+
background: transparent;
71+
}
72+
73+
input[type="text"]::selection{
74+
background: transparent;
75+
}
76+
77+
.btns {
78+
display: flex;
79+
justify-content: space-around;
80+
}
81+
82+
.btns button {
83+
font-size: 1em;
84+
padding: 0.8em 1.7em;
85+
border-radius: 7px;
86+
font-weight: 600;
87+
cursor: pointer;
88+
}
89+
90+
#gen-btn{
91+
background-color: #18f98f;
92+
color: #202229;
93+
}
94+
95+
#copy-btn{
96+
border: 3px solid #18f98f;
97+
background-color: transparent;
98+
color: #18f98f;
99+
}
100+
101+
.custom-alert{
102+
background-color: rgba(255,255,255,0.3);
103+
font-size: 2.5vmin;
104+
padding: 1em 1.5em;
105+
position: fixed;
106+
top: 10px;
107+
right: 10px;
108+
color: #f5f5f5;
109+
transition: 0.5s;
110+
transform: translateX(calc(100% + 10px));
111+
}
112+

0 commit comments

Comments
 (0)