Up until now, the course had been about following a clear set of instructions. Write a loop with the given constraints, use the exact function structure they tell you, and apply specific tools in a specific way. But today’s lesson on The Odin Project was different. The mission? Build a webpage from scratch.

The how? Find out along the way.

The only guidance was a short list of required mechanics. This was the first time it felt like I was actually creating something from the ground up.

The Project : A Digital Drawing Board

The goal was to make a simple online sketchpad, something like the classic Etch-A-Sketch, where you could move your mouse over the page and leave a trail of colour. The basic instructions were:

1. The drawing area should be made up of square grids.

2. It should have a reset button.

3. The user should be able to change the number of squares in the grid.

Straightforward, but a bit plain.

Adding My Own Spin

I decided not to make a basic barely functioning drawing. If I was going to make an online drawing tool, I wanted it to feel fun, smooth, and something you’d actually enjoy spending time with. That meant focusing on both design and function. A clean, polished look that I can showcase to you.

Step One: Planning It Out

Before I did anything, I broke the project down into basic, broad steps:

1. Make a 16×16 grid of square divs with JavaScript: This would form the base canvas. Each div is like one pixel of the drawing board.

2. Make them change colour when hovered over with the mouse: This gives the “drawing” effect.

3. Add replayability: Include a restart button to clear the board and an option to change the number of squares for different drawing resolutions.

4. Design: Style the board so it looks neat, modern, and visually inviting.

I didn't think too much while making this list. I figured that if anything was off, I'd just sneak them in one of the stages.

Phase One: Square Grid

Usually, the idea is to jump into the HTML file and start throwing in elements. But this time, that approach would have been a really sluggish nightmare. Manually adding every single square into the HTML file? Nah. Not only would it clog up the file, but it would also make the whole thing rigid and impossible to adjust when the user wants a different number of squares.

The grid needed to adapt on the fly. That meant the squares had to be generated dynamically through JavaScript.

So, I kept the HTML minimal. I used a container, something that represented the whole grid. Something like an ice cube tray. Then, with JavaScript, I wrote a loop function that would keep creating square divs until the grid was full. The idea of this method is that I can easily change how many squares are generated, and the layout updates instantly.

Once the divs were in place, CSS stepped in to give them shape.

Phase Two: Make It A Canvas

This part was short but needed a little digging around. The goal was simple: get the squares to light up when the mouse passed over them and make sure the colour stuck.

At first, I thought of using the CSS hover method. It changes the style when your mouse is on the square, easy enough. But there was a snag. The moment the mouse left, the square went back to its original state, like nothing happened.

So I switched to JavaScript event listeners. These run a function when a specific event happens. In my case, the event was the mouse entering a square. That way, once a square was coloured, it stayed that way until the grid was reset.

Here's what I coded:

<div class="divContainer"></div>


<script>

    const divContainer = document.querySelector(".divContainer");
    divContainer.innerHTML = ""; // clear previous grid

    for (let i = 0; i < squareNumber * squareNumber; i++) {
        const squareDiv = document.createElement("div");
        squareDiv.classList.add("squareDiv");
        squareDiv.style.flex = `1 0 calc(${100 / squareNumber}% - 10px)`;
        squareDiv.addEventListener('mouseover', () => {
            squareDiv.classList.add('squareColor');
        });
        divContainer.appendChild(squareDiv);

</script>


<style>

    .squareDiv {

        aspect-ratio: 1/1;
        display: flex;
        flex: 1 0 calc(6.25% - 2px);
        justify-content: center;
        align-items: center;
        border-width: 5px;
        transition: all 0.3s ease;

    }

    .squareDiv.squareColor {

        background-color: rgb(5, 93, 255);

    }

    .divContainer {

        display:flex;
        flex-wrap: wrap;
        gap: 5px;

    }

</style>

Final thoughts:

Building the basic structure without a guiding hand felt refreshing. I had real fun testing out the theories in my head and slowly but surely progressing. I'm halfway into completing the page now, but it took me quite some time.

All that's left is to make it replayable and design it. I'm confident it will be easier than it was today.