DEV Community: Praise Oluleye

I Built a Colour Palette Generator with Vanilla JavaScript

Praise Oluleye — Fri, 07 Aug 2026 11:26:31 +0000

As part of my journey toward becoming a software engineer, I've committed to shipping one project a week using just HTML, CSS, and JavaScript before I move on to frameworks. This week's project: a Colour Palette Generator.

It's a simple idea — click a button, get five random colors, click a color to copy its hex code. But small projects like this are great for practicing fundamentals: DOM manipulation, event delegation, and working with browser APIs like Clipboard.

What it does

Generates a random 5-color palette on load and on button click
Click any swatch (or its copy icon) to copy the hex code straight to your clipboard
Shows a quick visual confirmation — the copy icon morphs into a checkmark for 1.5 seconds
Fully responsive grid that reflows on smaller screens

The core logic

Generating a random hex color is the easiest part — just pick 6 random characters from the hex alphabet:

function generateRandomColor() {
    const letters = "0123456789ABCDEF";
    let color = "#";

    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

Then it's a matter of generating 5 of these and mapping them onto the color boxes already in the DOM:

function updatePaletteDisplay(colors) {
    const colorBoxes = document.querySelectorAll(".color-box");

    colorBoxes.forEach((box, index) => {
        const color = colors[index];
        const colorDiv = box.querySelector(".color");
        const hexValue = box.querySelector(".hex-value");

        colorDiv.style.backgroundColor = color;
        hexValue.textContent = color;
    });
}

The part I actually learned something from: event delegation

Instead of attaching a click listener to every single copy icon (there are 5, but imagine if the palette size were dynamic), I attached one listener to the parent container and checked what was actually clicked:

paletteContainer.addEventListener("click", function(e) {
    if (e.target.classList.contains("copy-btn")) {
        const hexValue = e.target.previousElementSibling.textContent;

        navigator.clipboard
            .writeText(hexValue)
            .then(() => showCopySuccess(e.target))
            .catch((err) => console.log(err));
    } else if (e.target.classList.contains("color")) {
        const hexValue = e.target.nextElementSibling.querySelector(".hex-value").textContent;
        navigator.clipboard.writeText(hexValue)
            .then(() => showCopySuccess(e.target.nextElementSibling.querySelector(".copy-btn")))
            .catch((err) => console.log(err));
    }
});

This is a pattern I keep coming back to — it's more performant, and it means new elements added to the DOM later would still "just work" without rebinding anything.

Using the Clipboard API

This was my first time reaching for navigator.clipboard.writeText() outside a tutorial. It's a Promise-based API, so I handled the copy confirmation in the .then():

function showCopySuccess(element) {
    element.classList.remove("far", "fa-copy");
    element.classList.add("fas", "fa-check");
    element.style.color = "#48bb78";

    setTimeout(() => {
        element.classList.remove("fas", "fa-check");
        element.classList.add("far", "fa-copy");
        element.style.color = "";
    }, 1500);
}

Small detail, but that little swap from a copy icon to a checkmark makes the interaction feel a lot more responsive than a plain alert().

What I'd add next

Locking specific colors so they don't change on regenerate
Saving favorite palettes with localStorage
A keyboard shortcut (spacebar) to generate a new palette
Exporting the palette as CSS variables

Code's on GitHub: Praise-04-dev

Would love feedback from anyone who's built something similar — did you handle the clipboard interaction differently?

I Built a Quiz Game With Vanilla JavaScript — Here's What I Learned

Praise Oluleye — Sat, 01 Aug 2026 19:53:14 +0000

I'm working through a roadmap toward becoming a software engineer, and step one is building projects with plain HTML, CSS, and JavaScript before reaching for frameworks. Part of how I'm holding myself accountable is shipping and writing about one project a week — this quiz game is the first entry in that series.

No React, no build tools, no dependencies. Just the fundamental

Live demo
GitHub

What it does

It's a three-screen quiz: a start screen, a quiz screen with five general-knowledge questions, and a results screen with a score and a message based on how you did. Pick an answer and you instantly see the correct one highlighted in green, and your pick in red if you got it wrong.

How the screens work

Instead of separate HTML pages, the whole thing lives in one index.html with three .screen divs. Only one is visible at a time, controlled by adding/removing an active class:

`css
.screen {
    display: none;
    padding: 2rem;
    text-align: center;
}

.screen.active {
    display: block;
}`

Switching screens in JS is just a classList toggle:


`js
startScreen.classList.remove("active");
quizScreen.classList.add("active");
`

It's a simple pattern, but it's basically a mini single-page app without any routing library.

Rendering questions dynamically

The questions live in an array of objects, each with a question string and an answers array where one option is flagged correct: true:

`javascript

`js
{
  question: "What is the capital of France?",
  answers: [
    { text: "London", correct: false },
    { text: "Berlin", correct: false },
    { text: "Paris", correct: true },
    { text: "Madrid", correct: false },
  ],
}`

For each question, I clear the answers container and generate a button per answer, stashing the correct flag on the button's dataset so I can check it on click without a lookup. This means adding, removing, or editing questions is just editing the array — thequestion counter, progress bar, andmax score all update automatically based on > quizQuestions.length.

Bugs I ran into:

An accidentally nested function

At one point I had a function declared inside another function without meaning to — I'd started editing one function, gotten distracted mid-thought, and closed the braces in the wrong place. The code still ran, which made it worse: no error, just quietly wrong behavior. It took me a while to notice because I was staring at the inner function's logic assuming the bug was there, when the real problem was scope — the outer function wasn't calling the inner one the way I expected, and variables weren't behaving the way I thought they should. Once I actually read the brace structure carefully instead of the logic, it was obvious. Lesson: when behavior is weird and the logic "looks right," check the shape of the code before the content of it.

Missing commas

Small, dumb, and it cost me more time than it should have: I dropped commas between object properties and array items in a couple of places. Sometimes JS threw a clear syntax error; other times it just silently broke things or pointed at the wrong line. Now I write one item per line and let my editor's formatting catch it before I even run the code.

Locking answers during the reveal

One thing I didn't think about until I hit it: what stops someone from spam-clicking multiple answers before the "correct" highlight even shows up? I added a simple boolean flag, answerDisabled, that gets set to true the moment an answer is picked and reset to false when the next question loads:

javascript
``js
function selectAnswer(event) {
    if (answerDisabled) return;
    answerDisabled = true;
    // ...reveal correct/incorrect, update score...

setTimeout(() => {
        currentQuestionIndex++;
        if (currentQuestionIndex < quizQuestions.length) {
            showQuestion();
        } else {
            showResult();
        }
    }, 1000);
}`

It's a small thing, but it's the kind of bug you only notice by actually clicking around your own app like a user would, not just reading the code.

Scoring and the result message

At the end, I calculate a percentage and match it against a few thresholds to pick a message — nothing fancy, just an if/else chain:

`js
const percentage = (score / quizQuestions.length) * 100;

if (percentage === 100) {
    resultMessage.textContent = "Perfect! You're a genius!";
} else if (percentage >= 80) {
    resultMessage.textContent = "Great job! You know your stuff!";
} else if (percentage >= 60) {
    resultMessage.textContent = "Good effort! Keep learning!";
} // ...and so on`
`

Nothing here is groundbreaking but building it without a framework was a good way to get more comfortable with vanilla DOM manipulation, state management, and catching my own scoping and syntax mistakes before shipping. This is project one of my weekly series — next week I'll have another one up.

If you've built something similar, hit a similar nested-function or missing-comma bug, or have ideas for what I should add next, I'd love to hear it in the comments.

Check out the full code on GitHub