Skip to content

Commit 1336b27

Browse files
RanitManikRanitManik
committed
added HEX code Generator
1 parent f59a44c commit 1336b27

File tree

8 files changed

+378
-0
lines changed

8 files changed

+378
-0
lines changed

‎08. HEX Code Generator/README.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# HEX Code Generator
2+
3+
Welcome to the HEX Code Generator project! This is the seventh challenge in the JavaScript Projects series,
4+
where we focus on building a HEX Code Generator. In this project, users can calculate cash denominations based
5+
on the amount entered. Let's explore the details.
6+
7+
## Table of Contents
8+
9+
- [The Challenge](#the-challenge)
10+
- [Screenshot](#screenshot)
11+
- [Links](#links)
12+
- [Author](#author)
13+
- [Acknowledgments](#acknowledgments)
14+
15+
## The Challenge
16+
17+
The challenge is to develop a HEX Code Generator using JavaScript. The application should allow users to input
18+
the quantities of different currency denominations they possess, calculate the total cash amount based on these inputs,
19+
and display the result. Additionally, include a reset button to clear all inputs.
20+
21+
## Screenshot
22+
23+
![Screen Shot.png](Screen%20Shot.png)
24+
25+
## Links
26+
27+
- **Solution**:
28+
Find the solution on
29+
GitHub: [HEX Code Generator Solution](https://github.com/RanitManik/JavaScript-projects/tree/main/07.%20Cash%20Calculator%20Application)
30+
- **Live Demo**:
31+
Experience the application
32+
live: [Cash Calculator Live Demo](https://ranitmanik.github.io/JavaScript-projects/07.%20Cash%20Calculator%20Application/index.html)
33+
34+
## Author
35+
36+
- Website: [Ranit Manik's Portfolio](https://ranitmanik.github.io/Portfolio-1.0)
37+
- LinkedIn: [@ranit-manik](https://www.linkedin.com/in/ranit-manik/)
38+
39+
## Acknowledgments
40+
41+
Gratitude is extended to the open-source community for fostering an environment of collaboration and continuous
42+
improvement.
43+
44+
Calculate your cash denominations effortlessly! 💰🧮

‎08. HEX Code Generator/Screen Shot.png‎

413 KB
Loading

‎08. HEX Code Generator/assets/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎08. HEX Code Generator/assets/images/copied.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎08. HEX Code Generator/assets/images/copy.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎08. HEX Code Generator/index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
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+
<meta name="description"
7+
content="HEX Code Generator Application - Generate random HEX color codes. Developed by RANIT MANIK.">
8+
<title>HEX Code Generator Application</title>
9+
<link rel="shortcut icon" href="assets/favicon.svg" type="image/x-icon">
10+
<link rel="stylesheet" href="style.css">
11+
12+
<!-- Open Graph meta tags for social media sharing -->
13+
<meta property="og:title" content="HEX Code Generator Application">
14+
<meta property="og:description"
15+
content="HEX Code Generator Application - Generate random HEX color codes. Developed by RANIT MANIK.">
16+
<meta property="og:image"
17+
content="https://ranitmanik.github.io/JavaScript-projects/08.%20Hex%20Code%20Generator/assets/favicon.svg">
18+
<meta property="og:url"
19+
content="https://ranitmanik.github.io/JavaScript-projects/08.%20Hex%20Code%20Generator/index.html">
20+
<meta property="og:type" content="website">
21+
</head>
22+
<body>
23+
<header>
24+
<h1>HEX Code Generator</h1>
25+
<h2>Click <span data-keyborad>spacebar</span> to Change the Hex Colors</h2>
26+
</header>
27+
<main>
28+
<section>
29+
<ul class="color__shades">
30+
<li class="color__1">
31+
<div class="color__container">
32+
<div class="color"></div>
33+
</div>
34+
<p class="hex-code">#000000</p>
35+
</li>
36+
<li class="color__2">
37+
<div class="color__container">
38+
<div class="color"></div>
39+
</div>
40+
<p class="hex-code">#000000</p>
41+
</li>
42+
<li class="color__3">
43+
<div class="color__container">
44+
<div class="color"></div>
45+
</div>
46+
<p class="hex-code">#000000</p>
47+
</li>
48+
<li class="color__4">
49+
<div class="color__container">
50+
<div class="color"></div>
51+
</div>
52+
<p class="hex-code">#000000</p>
53+
</li>
54+
<li class="color__5">
55+
<div class="color__container">
56+
<div class="color"></div>
57+
</div>
58+
<p class="hex-code">#000000</p>
59+
</li>
60+
<li class="color__6">
61+
<div class="color__container">
62+
<div class="color"></div>
63+
</div>
64+
<p class="hex-code">#000000</p>
65+
</li>
66+
<li class="color__7">
67+
<div class="color__container">
68+
<div class="color"></div>
69+
</div>
70+
<p class="hex-code">#000000</p>
71+
</li>
72+
<li class="color__8">
73+
<div class="color__container">
74+
<div class="color"></div>
75+
</div>
76+
<p class="hex-code">#000000</p>
77+
</li>
78+
<li class="color__9">
79+
<div class="color__container">
80+
<div class="color"></div>
81+
</div>
82+
<p class="hex-code">#000000</p>
83+
</li>
84+
<li class="color__10">
85+
<div class="color__container">
86+
<div class="color"></div>
87+
</div>
88+
<p class="hex-code">#000000</p>
89+
</li>
90+
<li class="color__11">
91+
<div class="color__container">
92+
<div class="color"></div>
93+
</div>
94+
<p class="hex-code">#000000</p>
95+
</li>
96+
<li class="color__12">
97+
<div class="color__container">
98+
<div class="color"></div>
99+
</div>
100+
<p class="hex-code">#000000</p>
101+
</li>
102+
</ul>
103+
</section>
104+
</main>
105+
<footer>
106+
Made with ♥️ by <a href="https://github.com/RanitManik">RANIT MANIK</a>
107+
</footer>
108+
109+
<script src="script.js"></script>
110+
111+
</body>
112+
</html>

‎08. HEX Code Generator/script.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
function generateRandomHexCode() {
2+
const randomValue = Math.floor(Math.random() * 0xffffff);
3+
return '#' + randomValue.toString(16).padStart(6, '0');
4+
}
5+
6+
const colors = document.querySelectorAll('.color');
7+
8+
function updateColors() {
9+
colors.forEach(color => {
10+
const randomColor = generateRandomHexCode();
11+
const copyIndicator = color.closest('li').querySelector('.hex-code');
12+
13+
color.style.backgroundColor = randomColor;
14+
const hexCodeElement = color.closest('li').querySelector('.hex-code');
15+
hexCodeElement.textContent = randomColor;
16+
17+
color.addEventListener('click', () => {
18+
color.classList.add('clicked');
19+
navigator.clipboard.writeText(randomColor);
20+
copyIndicator.textContent = "copied";
21+
});
22+
23+
color.addEventListener('mouseover', () => {
24+
copyIndicator.textContent = "copy";
25+
});
26+
27+
color.addEventListener('mouseleave', () => {
28+
copyIndicator.textContent = randomColor;
29+
})
30+
31+
color.addEventListener('mouseleave', () => {
32+
color.classList.remove('clicked');
33+
});
34+
});
35+
}
36+
37+
document.addEventListener('keydown', (event) => {
38+
if (event.code === 'Space') {
39+
updateColors();
40+
}
41+
});
42+
43+
updateColors();

‎08. HEX Code Generator/style.css‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
:root {
2+
--primary-color: #010409;
3+
--secondary-color: #161b22;
4+
--accent-color: #2c3239;
5+
--highlight-color: #2f81f7;
6+
--background-color: #010409;
7+
--text-color: white;
8+
--border-color: #2c3239;
9+
--hover-color: #2ea043;
10+
}
11+
12+
* {
13+
padding: 0;
14+
margin: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
a {
19+
text-decoration: none;
20+
}
21+
22+
li {
23+
list-style: none;
24+
}
25+
26+
body {
27+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
28+
padding: 2rem;
29+
background-color: var(--background-color);
30+
color: var(--text-color);
31+
text-align: center;
32+
min-height: 100vh;
33+
display: grid;
34+
place-items: center;
35+
align-content: center;
36+
}
37+
38+
main {
39+
max-width: min(60rem, 90%);
40+
width: 100%;
41+
padding: 1rem;
42+
background-color: var(--secondary-color);
43+
border-radius: 0.375rem;
44+
border: 0.0625rem solid var(--border-color);
45+
margin-top: 1rem;
46+
}
47+
48+
h1 {
49+
font-weight: lighter;
50+
}
51+
52+
h2 {
53+
font-weight: lighter;
54+
font-size: 0.9rem;
55+
margin-block: 1rem;
56+
color: var(--hover-color);
57+
}
58+
59+
button {
60+
background-color: var(--accent-color);
61+
border: none;
62+
color: white;
63+
cursor: pointer;
64+
padding: 0.5rem 1rem;
65+
font-weight: bold;
66+
border-radius: 0.375rem;
67+
font-size: 1rem;
68+
}
69+
70+
button:hover {
71+
background-color: var(--hover-color);
72+
}
73+
74+
button:active {
75+
background-color: var(--accent-color);
76+
}
77+
78+
footer {
79+
width: 100%;
80+
max-width: 20rem;
81+
margin-block: 1rem;
82+
padding: 0.5rem 1rem;
83+
border-radius: 0.375rem;
84+
border: 0.0625rem solid var(--border-color);
85+
}
86+
87+
footer a {
88+
color: var(--highlight-color);
89+
text-decoration: none;
90+
}
91+
92+
footer a:hover {
93+
text-decoration: underline;
94+
}
95+
96+
@media screen and (min-width: 60rem) {
97+
main {
98+
max-width: min(55rem, 90%);
99+
}
100+
}
101+
102+
@media screen and (max-width: 27.5rem) and (min-width: 24.375rem) {
103+
body {
104+
padding-inline: .5rem;
105+
}
106+
}
107+
108+
@media screen and (max-width: 27.5rem) {
109+
main {
110+
max-width: 100%;
111+
}
112+
}
113+
114+
115+
/* MAIN CSS */
116+
117+
.color__shades {
118+
display: flex;
119+
justify-items: center;
120+
align-items: center;
121+
align-content: center;
122+
justify-content: center;
123+
flex-wrap: wrap;
124+
gap: 1rem;
125+
}
126+
127+
.color__shades li {
128+
background-color: var(--accent-color);
129+
cursor: pointer;
130+
display: grid;
131+
place-items: center;
132+
position: relative;
133+
gap: 1rem;
134+
padding: 0.5rem;
135+
border-radius: 0.25rem;
136+
border: 1px solid transparent;
137+
transition: all 0.15s ease;
138+
}
139+
140+
.color__shades li:hover {
141+
border: 1px solid var(--highlight-color);
142+
background-color: rgba(47, 130, 247, 0.3);
143+
}
144+
145+
.color {
146+
width: 100px;
147+
height: 100px;
148+
position: relative;
149+
display: grid;
150+
place-items: center;
151+
background-color: #1f8041;
152+
}
153+
154+
li:hover .color::before {
155+
position: absolute;
156+
content: url("./assets/images/copy.svg");
157+
}
158+
159+
li:hover .color.clicked::before {
160+
position: absolute;
161+
content: url("./assets/images/copied.svg");
162+
}
163+
164+
.hex-code {
165+
user-select: all;
166+
font-size: 1.1rem;
167+
}
168+
169+
.hex-code::selection {
170+
background: white;
171+
color: black;
172+
}

0 commit comments

Comments
 (0)