Day 8 of learning JavaScript: Arrays and changes at the game

Today, the first thing I learned was something that counts overall. There is a better way to select an HTML element than document.getElementById():

// old way
document.getElementById("id")

//new way
document.querySelector("#id") //it's better, because you can also use it for classes and other elements

document.querySelector("#id") //id (you have to write "#" before the id)
document.querySelector(".class") //class (you have to write "." before the class)
document.querySelector("element") //element

//The Selectors are similar to the selectors in CSS.

Now I always use this new way of selecting an element because I can select different elements, IDs and classes.

After this, I moved on and built a new button that draws a new card. I did it the same way as the previous start button. I already explained this yesterday, if you want to know it, look at yesterday's post. The only thing that was a little bit different was the JavaScript function for it:

function newCard(){
    let card = 2 // new card
    sum += card // adds the new card to the sum
    startGame() // executes the startGame() function
}

This just changes the sum. And I realized that it would be more specific if I renamed the function startGame() to renderGame() because, at this point of the game, it's rendering, not starting.

I also recreated the startGame() function that just calls the renderGame() function:

function startGame(){
    renderGame()
}

function renderGame(){

    cardsEl.textContent = "Cards: " + firstCard + " " + secondCard
    sumEl.textContent = "Sum: " +sum

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

After doing these changes, I learned about a new data type: Arrays

An array is an ordered list of items and is called a complex data type. They are also 0-indexed, which means that the first element of an array is called with the integer index 0.

let cards[] = [firstCard, secondCard] //the Syntax to create an array. The content of the array are the both cards.

cards[0] //calls the first element of the array -> firstCard.

cards.length //gets you the number of elemnts that the array contains. Here: 2

cards.push(6) //adds the integer 6 as new element into the array

cards.pop() //deletes the last element of the array
cards.shift() //deletes the first element of the array

After I have learned these things about arrays, I started applying them to the Blackjack game. I created a new array cards[], that contains both cards that were created previously. Then I added a thing to the newCard() function. The new card that was created there should be added to the cards[] array. Therefore I used the cards.push(card) property. In the renderGame function, I also replaced firstCard and secondCard at the beginning with cards[0] and cards[1] because they're basically the same value:

let firstCard = 11
let secondCard = 8
let cards = [firstCard, secondCard]  //array
let sum = firstCard + secondCard
let hasBlackJack = false
let isAlive = true 
let message = ""
let messageEl = document.querySelector("#message-el")
let sumEl = document.querySelector("#sum-el")
let cardsEl = document.querySelector("#cards-el")

function startGame(){
    renderGame()
}

function renderGame(){

    cardsEl.textContent = "Cards: " + cards[0] + " " + cards[1] //replaced by selecting these elements trough the array
    sumEl.textContent = "Sum: " +sum

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


}

function newCard(){
    let card = 2
    sum += card
    cards.push(card) //pushes card as new element to the array.
    renderGame()

}

Now, the sum displays the value of all cards, including the new card, but you can still see only 2 cards on the card display. To fix this we need loops, which we cover next time. Now you should know the basics of arrays in JavaScript. I hope you learned something valuable