Skip to content

Commit 73a60e6

Browse files
GeekkyCoderGeekkyCoder
committed
Color-Pallate With Corresponding Hex Values
1 parent d659d1e commit 73a60e6

File tree

4 files changed

+191
-0
lines changed

4 files changed

+191
-0
lines changed

‎medium/Color Scheme Generator/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5503
3+
}

‎medium/Color Scheme Generator/index.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap");
3+
4+
body {
5+
font-family: "Inter", sans-serif;
6+
margin: 0;
7+
padding: 0;
8+
overflow: hidden;
9+
}
10+
11+
#navigation {
12+
display: flex;
13+
margin-top: 30px;
14+
justify-content: space-around;
15+
width: 533px;
16+
}
17+
18+
#colorEl {
19+
width: 61px;
20+
height: 42px;
21+
}
22+
23+
#selectEl {
24+
font-family: inherit;
25+
width: 312px;
26+
height: 42px;
27+
border: 1px solid #d1d5db;
28+
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
29+
border-radius: 6px;
30+
}
31+
32+
#btn {
33+
width: 123px;
34+
height: 42px;
35+
border: 1px solid #d1d5db;
36+
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
37+
border-radius: 4px;
38+
font-family: "Inter", sans-serif;
39+
font-size: 12px;
40+
font-weight: 500;
41+
transition-duration: 200ms;
42+
cursor: pointer;
43+
}
44+
45+
#colors-container {
46+
display: flex;
47+
width: 100%;
48+
margin: 0 4px;
49+
margin-top: 4em;
50+
}
51+
52+
.color-div {
53+
width: 100%;
54+
height: 100vh;
55+
padding: 8px;
56+
border-radius: 10px;
57+
margin-left: 0.4em;
58+
position: relative;
59+
}
60+
61+
.hex {
62+
color: whitesmoke;
63+
font-weight: bold;
64+
font-size: 0.7rem;
65+
text-align: center;
66+
letter-spacing: 1px;
67+
cursor: pointer;
68+
border: none;
69+
background-color: inherit;
70+
width: 50%;
71+
position: absolute;
72+
top: -20px;
73+
border-radius: 5px;
74+
padding: 0.2em 0.4em;
75+
font-family: "Kanit", sans-serif;
76+
}

‎medium/Color Scheme Generator/index.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<html>
2+
3+
<head>
4+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="./index.css">
7+
</head>
8+
9+
<body>
10+
11+
<div id="navigation">
12+
<input id="colorEl" type="color" value="#F55A5A">
13+
14+
<select id="selectEl" name="colors">
15+
<option value="monochrome">Monochrome</option>
16+
<option value="monochrome-dark">Monochrome-dark</option>
17+
<option value="monochrome-light">Monochrome-light</option>
18+
<option value="analogic">Analogic</option>
19+
<option value="complement">Complement</option>
20+
<option value="analogic-complement">Analogic-complement</option>
21+
<option value="triad">Triad</option>
22+
</select>
23+
<button id="btn">Get Color Scheme</button>
24+
</div>
25+
26+
<div id="colors-container">
27+
<div class="color-div">
28+
<input type="text" class="hex"></input>
29+
</div>
30+
<div class="color-div">
31+
<input type="text" class="hex"></input>
32+
</div>
33+
<div class="color-div">
34+
<input type="text" class="hex"></input>
35+
</div>
36+
<div class="color-div">
37+
<input type="text" class="hex"></input>
38+
</div>
39+
<div class="color-div">
40+
<input type="text" class="hex"></input>
41+
</div>
42+
<div class="color-div">
43+
<input type="text" class="hex"></input>
44+
</div>
45+
<div class="color-div">
46+
<input type="text" class="hex"></input>
47+
</div>
48+
<div class="color-div">
49+
<input type="text" class="hex"></input>
50+
</div>
51+
52+
</div>
53+
54+
<script src="./index.js"></script>
55+
</body>
56+
57+
</html>

‎medium/Color Scheme Generator/index.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const getColorBtn = document.getElementById("btn");
2+
const divWithColors = document.getElementsByClassName("color-div");
3+
const colorDivContainer = document.getElementById("colors-container");
4+
const colorEl = document.getElementById("colorEl");
5+
const selectEl = document.getElementById("selectEl");
6+
const hexPara = document.getElementsByClassName("hex");
7+
8+
getColorBtn.addEventListener("click", () => {
9+
fetchColorsData();
10+
});
11+
12+
fetchColorsData();
13+
copyToClipboard();
14+
15+
function fetchColorsData() {
16+
const colorElValue = colorEl.value.slice(1);
17+
const selectElValue = selectEl.value;
18+
const url = `https://www.thecolorapi.com/scheme?hex=${colorElValue}&mode=${selectElValue}&count=${divWithColors.length}`;
19+
console.log(url);
20+
fetch(url)
21+
.then((response) => response.json())
22+
.then((colorData) => {
23+
const colorArray = colorData.colors;
24+
let ColorArrayData = randomGeneratedColor(colorArray);
25+
displayDivsWithColors(ColorArrayData);
26+
copyToClipboard();
27+
});
28+
}
29+
30+
function randomGeneratedColor(colorArray) {
31+
let newArray = [];
32+
for (let i = 0; i < colorArray.length; i++) {
33+
let randNum = Math.floor(Math.random() * colorArray.length);
34+
newArray.push(colorArray[randNum].hex.value);
35+
}
36+
37+
return newArray;
38+
}
39+
40+
function displayDivsWithColors(randomColorArray) {
41+
for (let i = 0; i < divWithColors.length; i++) {
42+
divWithColors[i].style.backgroundColor = randomColorArray[i];
43+
hexPara[i].value = randomColorArray[i];
44+
}
45+
}
46+
47+
function copyToClipboard() {
48+
for (let i = 0; i < hexPara.length; i++) {
49+
hexPara[i].addEventListener("click", () => {
50+
hexPara[i].select();
51+
hexPara[i].setSelectionRange(0, 99999);
52+
navigator.clipboard.writeText(hexPara[i].value);
53+
});
54+
}
55+
}

0 commit comments

Comments
 (0)