I recently started building a simple BlackJack game using HTML, CSS, and JavaScript, and wow — DOM manipulation is so cool! This project started as a way to get more comfortable with JavaScript, but once I figured out how to make the webpage respond to user actions using the DOM, I was hooked.

Let me take you through what I’ve built so far.

Starting with the Structure — HTML

I kicked things off with the basic HTML layout. Here's what the initial structure looks like:

htmlCopyEdit<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="main-div">
            <div class="header-text">
                <h1>BLACK JACK GAMES</h1>
            </div>

            <div class="body-text">
                <p id="top-message">Do you want to play a round?</p>
                <p id="card-picks">Your card picks are:</p>
                <p id="total-sum">Their Sum is:</p>
                <button onclick="startGame()">START GAME</button>
            </div>
        </div>

        <script src="index.js"></script>
    </body>
</html>

The goal here was simple: display a title, show the picked cards and their sum, and give the user a button to start the game. The real magic started when I moved to JavaScript.

Styling It Up — CSS

To make the game look more inviting, I added some basic styles:

cssCopyEditbody {
    background-color:  #F4D58D;
    font-family: 'Trebuchet MS', sans-serif;
}

h1 {
    color: #001427;
    font-size: 64px;
}

p {
    font-size: 24px;
}

button {
    background-color: #708D81;
    color: white;
    font-size: 28px;
    padding: 20px 32px;
    border: none;
    border-radius: 12px;
    margin-top: 16px;
}

This gave the game a clean, warm feel. But it was still just a static page… until JavaScript came in.

Enter the DOM — JavaScript Time!

Here’s the part that got me super excited — DOM manipulation. I learned how to access and update elements on the page using document.getElementById(), and from there, things got really fun.

Here's the current JavaScript code:

javascriptCopyEditlet firstCard = 10
let secondCard = 4
let sum = firstCard + secondCard
let hasBlackJack = false
let isAlive = true
let message = ""

let topMessage = document.getElementById("top-message")
let totalSum = document.getElementById("total-sum")
let cardPicks = document.getElementById("card-picks")

function startGame() {
    cardPicks.textContent = "Your card picks are: " + firstCard + " and " + secondCard
    totalSum.textContent = "Their Sum is = " + sum

    if (sum <= 20) {
        message = "Do you want to draw a new card?"
    } else if (sum === 21) {
        message = "Wohoo! You've got Blackjack!"
        hasBlackJack = true
    } else {
        message = "You're out of the game!"
        isAlive = false
    }

    topMessage.textContent = message
}

What’s Happening Here?

I store two cards (firstCard and secondCard) and add their values to get the sum.
Using getElementById, I grab the <p> elements in the HTML and update their content when the startGame() function is called.
The conditionals check if the sum is under, equal to, or over 21, and I display a corresponding message.

I remember running it for the first time and seeing the DOM update live when I clicked the button — it felt like magic! It was the moment where the code on the page started to feel alive.

What’s Next?

Right now, the card values are hardcoded. My next steps are:

Add a function to draw random cards.
Allow the user to draw more cards after the first two.
Add some game logic to handle wins, losses, and restarting the game.

Final Thoughts

If you're just starting out like me, don't sleep on DOM manipulation. It's one of the most exciting parts of web development because it's where your HTML stops being static and starts responding to the user. Watching my page update based on logic I wrote gave me such a confidence boost.

This is just the beginning of the project — I’ll keep adding to it and sharing what I learn along the way.

Let me know what you think or if you have suggestions! 🚀

Building My First BlackJack Game — DOM Manipulation Got Me Hyped!