Skip to content

Commit 97b5041

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#410 from srinjoy-26/hex
Random hex generator
2 parents 4e9d79e + 4cc3a73 commit 97b5041

File tree

4 files changed

+205
-0
lines changed

4 files changed

+205
-0
lines changed

‎Random hex generator/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# random hex generator
2+
## html , css , js
3+
## look
4+
![Screenshot 2022-05-30 233738](https://user-images.githubusercontent.com/91176055/171043981-0c252a07-d51f-4655-9b2a-4c2aab82403a.png)

‎Random hex generator/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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 generator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="canvas">
12+
<div class="container">
13+
<div class="color-wrapper">
14+
<div class="color-preview"></div>
15+
</div>
16+
<input type="text" name="" id="output" readonly />
17+
<div class="actions">
18+
<button class="button" id="generate">Generate</button>
19+
<button class="button" id="copy">Copy</button>
20+
</div>
21+
</div>
22+
<div class="toast">Hex code copied</div>
23+
</div>
24+
<script src="script.js"></script>
25+
</body>
26+
</html>

‎Random hex generator/script.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const colorPreview = document.querySelector(".color-preview");
2+
const output = document.getElementById("output");
3+
const generateButton = document.getElementById("generate");
4+
const copyButton = document.getElementById("copy");
5+
const toast = document.querySelector(".toast");
6+
const hexString = "0123456789abcdef";
7+
8+
function generateHexCode(){
9+
let HexCode = "#";
10+
for (let i = 0; i < 6; i++){
11+
HexCode += hexString[Math.floor(Math.random() * hexString.length)];
12+
}
13+
output.value = HexCode;
14+
colorPreview.classList.remove("color-animation");
15+
setTimeout(() => colorPreview.classList.add("color-animation"), 10);
16+
colorPreview.getElementsByClassName.backgroundColor = HexCode;
17+
}
18+
19+
function copyHexCode(){
20+
navigator.clipboard.writeText(output.value);
21+
toast.getElementsByClassName.transform = "translateX(0)";
22+
setTimeout(() => toast.style.transform = "translateX( calc(100% + 10px) )", 2000);
23+
}
24+
25+
window.onload = generateHexCode;
26+
27+
generateButton.addEventListener("click", generateHexCode);
28+
copyButton.addEventListener("click", copyHexCode);

‎Random hex generator/style.css

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
:root {
2+
--yangColor: #d8c21e;
3+
--yinColor: #111111;
4+
--borderRadius: 10px;
5+
--animation: 0.3s ease;
6+
}
7+
8+
html {
9+
font-family: 'Gemunu Libre', sans-serif;
10+
box-sizing: border-box;
11+
width: 100%;
12+
height: 100%;
13+
}
14+
15+
*,
16+
*::before,
17+
*::after {
18+
font-family: inherit;
19+
box-sizing: inherit;
20+
margin: 0;
21+
padding: 0;
22+
}
23+
24+
.canvas {
25+
position: relative;
26+
background-color: var(--yinColor);
27+
min-height: 100vh;
28+
}
29+
30+
.container {
31+
position: absolute;
32+
font-size: 40px;
33+
width: 60vmin;
34+
padding: 40px;
35+
top: 50%;
36+
left: 50%;
37+
transform: translate(-50%, -50%);
38+
border-radius: var(--borderRadius);
39+
border: 5px solid var(--yangColor);
40+
}
41+
42+
.color-wrapper {
43+
position: relative;
44+
width: 30vmin;
45+
height: 30vmin;
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
border: 5px solid var(--yangColor);
50+
border-radius: 50%;
51+
margin: 0 auto;
52+
}
53+
54+
.color-preview {
55+
width: calc(100% - 20px);
56+
height: calc(100% - 20px);
57+
border-radius: 50%;
58+
}
59+
60+
#output {
61+
font-size: 24px;
62+
color: var(--yangColor);
63+
padding: 15px 0;
64+
margin: 25px 0;
65+
width: 100%;
66+
background-color: transparent;
67+
border: 3px dashed var(--yangColor);
68+
border-radius: var(--borderRadius);
69+
text-align: center;
70+
}
71+
72+
#output::selection {
73+
background: transparent;
74+
}
75+
76+
.actions {
77+
display: flex;
78+
justify-content: space-around;
79+
}
80+
81+
.button {
82+
font-size: 20px;
83+
padding: 15px 25px;
84+
margin: 0;
85+
cursor: pointer;
86+
border-radius: var(--borderRadius);
87+
transition: var(--animation);
88+
}
89+
90+
#generate {
91+
background-color: var(--yangColor);
92+
color: var(--yinColor);
93+
border: 3px solid var(--yinColor);
94+
}
95+
96+
#generate:hover {
97+
color: var(--yangColor);
98+
background-color: var(--yinColor);
99+
border: 3px solid var(--yangColor);
100+
}
101+
102+
#copy {
103+
color: var(--yangColor);
104+
background-color: var(--yinColor);
105+
border: 3px solid var(--yangColor);
106+
}
107+
108+
#copy:hover {
109+
background-color: var(--yangColor);
110+
color: var(--yinColor);
111+
border: 3px solid var(--yinColor);
112+
}
113+
114+
.color-animation {
115+
animation: showColor 0.8s;
116+
}
117+
118+
.toast {
119+
position: fixed;
120+
font-size: 20px;
121+
padding: 20px;
122+
top: 10px;
123+
right: 10px;
124+
color: var(--yangColor);
125+
transition: var(--animation);
126+
transform: translateX(calc(100% + 10px));
127+
border: 3px solid var(--yangColor);
128+
border-radius: var(--borderRadius);
129+
}
130+
131+
@keyframes showColor {
132+
0% {
133+
transform: scale(0);
134+
}
135+
100% {
136+
transform: scale(1);
137+
}
138+
}
139+
140+
@media screen and (max-width: 480px) {
141+
.actions {
142+
flex-direction: column;
143+
}
144+
.button {
145+
margin: 5px 0;
146+
}
147+
}

0 commit comments

Comments
 (0)