DEV Community: Praise Oluleye

I Built a Drag-and-Drop Kanban Board with Vanilla JavaScript

Praise Oluleye — Wed, 19 Aug 2026 11:08:53 +0000

If you've ever wanted to understand how drag-and-drop actually works under the hood — no libraries, no frameworks, just the browser — building a Kanban board is a great way to find out. Here's how I built one using plain HTML, CSS, and JavaScript.

The Idea

A Kanban board is one of those projects that looks simple on the surface but forces you to actually understand the DOM: creating elements, listening for events, and moving nodes around dynamically. I wanted three columns — To Do, In Progress, and Done — with cards you can drag between them.

Setting Up the Structure

The HTML is just a .board container holding three .list columns, each with a heading and a few .card elements marked draggable="true":

<div class="list" id="list1">
  <h2>To do</h2>
  <div class="card" draggable="true" id="card1">Wash dishes</div>
  <div class="card" draggable="true" id="card2">Buy groceries</div>
</div>

That draggable="true" attribute is doing a lot of quiet work — it's what unlocks the HTML5 Drag and Drop API on that element.

Making It Draggable

The core logic comes down to a handful of events split between the cards and the lists.

On each card:

card.addEventListener("dragstart", dragStart);
card.addEventListener("dragend", dragEnd);

function dragStart(e) {
  e.dataTransfer.setData("text/plain", this.id);
}

When a drag starts, I stash the card's id in the dataTransfer object. That's the only "state" I need to track — everything else can be looked up from the DOM.

On each list:

list.addEventListener("dragover", dragOver);
list.addEventListener("dragenter", dragEnter);
list.addEventListener("dragleave", dragLeave);
list.addEventListener("drop", dragDrop);

function dragOver(e) {
  e.preventDefault(); // required, or drop never fires
}

function dragDrop(e) {
  const id = e.dataTransfer.getData("text/plain");
  const card = document.getElementById(id);
  this.appendChild(card);
  this.classList.remove("over");
}

The one gotcha that trips a lot of people up: dragover must call preventDefault(), or the drop event will never fire. Browsers block dropping by default, and that call is what tells the browser "yes, this element accepts drops."

Once the card is dropped, appendChild() handles the rest — since a card is a single DOM node, moving it to a new parent just relocates it, no cloning or re-rendering needed.

A Bit of Polish

I added a .over class that toggles on dragenter/dragleave to give the target list a subtle highlight while you're dragging over it — small detail, but it makes the board feel responsive instead of static.

.list.over {
  background-color: #d1d3d3;
}

What I'd Add Next

This is intentionally a minimal version, but a few natural next steps:

Persistence — save board state to localStorage so cards don't reset on refresh
Add/edit/delete cards — right now the cards are hardcoded in the HTML
Touch support — the native Drag and Drop API doesn't work great on mobile, so a touch-based fallback would help

Wrap-up

No libraries, no build tools — just the Drag and Drop API and a bit of CSS. It's a solid project if you want a deeper feel for how the DOM handles events and element movement, and it's satisfying to drag a card across the screen and watch it just... work.

Code's on GitHub if you want to poke around or build on it: github.com/Praise-04-dev

Would love feedback — especially if you've built something similar and handled persistence or touch support differently!

I Built an Expense Tracker with Vanilla JavaScript (No Frameworks, No Libraries)

Praise Oluleye — Wed, 19 Aug 2026 10:48:06 +0000

As part of my "one project a week" roadmap toward becoming a software engineer, this week I built an Expense Tracker — a clean, responsive app for logging income and expenses, with everything running client-side. No frameworks, no build tools. Just HTML, CSS, and JavaScript.

The Idea

I wanted something simple but genuinely useful: a place to log transactions, see totals update in real time, and have the data stick around after a page reload. That last part meant reaching for localStorage instead of just holding everything in a JS array that resets on refresh.

Features

Add a transaction with a description and an amount
Positive numbers = income, negative numbers = expenses
Auto-calculated Balance, Income, and Expense totals
Delete any transaction with one click
Data persists across reloads via localStorage
Fully responsive layout for tablet and mobile
Currency formatted as Nigerian Naira (₦) using Intl.NumberFormat
How It Works

Every transaction is stored as an object with an id, description, and amount:

js
transactions.push({
    id: Date.now(),
    description,
    amount,
});

Totals are calculated with simple array methods — reduce for the running balance, and filter + reduce to separate income from expenses:

js
const balance = transactions.reduce((acc, t) => acc + t.amount, 0);

const income = transactions
    .filter(t => t.amount > 0)
    .reduce((acc, t) => acc + t.amount, 0);

const expense = transactions
    .filter(t => t.amount < 0)
    .reduce((acc, t) => acc + t.amount, 0);

For formatting currency, Intl.NumberFormat did all the heavy lifting instead of me hand-rolling a formatter:

js
function formatCurrency(number) {
    return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "NGN",
    }).format(number);
}

What I Learned

localStorage is deceptively simple but easy to misuse. Since it only stores strings, every save/load needs JSON.stringify / JSON.parse. Forgetting either one is a classic bug.
Deriving state beats storing it. Balance, income, and expense are never stored directly — they're recalculated from the transactions array every time it changes. One source of truth, no sync bugs.
CSS Grid made the two-column layout painless — the transaction list and the form sit side-by-side on desktop and stack on mobile with a single media query change.
Small typos in CSS are silent killers. I had a few rgba() values with an extra channel argument that quietly broke shadows across the app — a good reminder to actually inspect rendered output, not just skim the code.

What's Next

A few things I want to add:

Transaction categories (Food, Transport, Salary, etc.)
Date/time stamps per transaction
Filtering and search
A simple chart to visualize spending by category
Export to CSV
Try It / Check the Code

The full source is on GitHub — feel free to fork it, break it, or suggest improvements. This is project N in my weekly build streak on the road to becoming a software engineer, so more of these are coming.

What would you add to a tracker like this? Let me know in the comments 👇

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