Skip to content

Instantly share code, notes, and snippets.

@PatheticMustan
Last active December 1, 2023 23:18
Show Gist options
  • Save PatheticMustan/19ac1426ee3d89dadcc4913dbd00fc67 to your computer and use it in GitHub Desktop.
Save PatheticMustan/19ac1426ee3d89dadcc4913dbd00fc67 to your computer and use it in GitHub Desktop.
a small christmas gift for my darling beloved
beetle:
arms/legs: #738334
antennae: #4a5224
back primary: #04ab44
back highlights: #7adb8b
eyes: #2f2f2f
octopus:
primary: #ff615e
tentacle highlight: #ffa8a8
shadow: #a52914
eyes: #2c2b2d
suckers: #fcd4b0
const content = `beetle:
arms/legs: #738334
antennae: #4a5224
back primary: #04ab44
back highlights: #7adb8b
eyes: #2f2f2f
octopus:
primary: #ff615e
tentacle highlight: #ffa8a8
shadow: #a52914
eyes: #2c2b2d
suckers: #fcd4b0`;
let cd = document.getElementById("colorDisplay");
if (cd === null) {
cd = document.createElement("div");
cd.id = "colorDisplay";
document.body.append(cd);
}
// clear previous attempt
cd.replaceChildren();
// title
const title = document.createElement("h1");
title.textContent = "Color Display";
cd.append(title);
// style!!
cd.insertAdjacentHTML("beforeend", `
<style>
#colorDisplay { font-family: Arial, Helvetica, sans-serif; }
.box { margin: 20px; padding: 10px; border: 1px solid black; }
</style>
`);
// content
const colorHolder = document.createElement("div");
colorHolder.style = "display: flex";
cd.appendChild(colorHolder);
content.split("\n\n").map(group => {
const [groupName, ...colors] = group.split("\n\t");
const groupBox = document.createElement("div");
groupBox.className += "box";
colorHolder.appendChild(groupBox);
const gntext = document.createElement("h2");
gntext.textContent = groupName;
groupBox.appendChild(gntext);
colors.map(colorPair => {
const [colorPairText, color] = colorPair.split(": ");
groupBox.innerHTML += `
<div style="display: flex; align-items: center">
<p style="margin-right: 20px;">${colorPairText}:</p>
<div class="box" style="width: 50px; height: 50px; background-color: ${color}; display: flex; align-items: center; justify-content: center; margin-left: auto;">
${color}
</div>
</div>
`;
});
});
@PatheticMustan
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment