a small christmas gift for my darling beloved

colorcodes.txt

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

colorViewer.js

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>
        `;
    });
});