Day 10 of learning JavaScript: Generate random numbers and random cards

Today I learned how to generate random numbers in JavaScript. I needed to know this so that when every round of Blackjack starts, the numbers are not the same but always different.

There are a few important things I have learned:

Math.random() // creates a random number between 0 and 1 (0.000 - 0.999...)

Math.random() * 6 // creates a random number between 0 and 6 (0.000 - 5.999....)

(Math.random() * 6) + 1 // creates a random number between 1.000 and 6.9999

Math.floor(Math.random()*6) // cuts the decimals (possible numbers: 0,1,2,3,4,5)

After this, I knew how to create random numbers. Last time I also learned how to return a value from a function. So then I started to create the getRandomCard() function which we will always use if we need a new random Card. I had a few conditions. If the card was an ace, which means that it could have the value 1, then it should be changed to the other value the ace could have (11). And every card with a value higher than 10 (King, Queen, etc.) should be changed to the value 10. Otherwise, it would be too complicated in the beginning. The function also should return the random number.

function getRandomCard(){
    let randomNumber = Math.floor( Math.random() * 13) +1; // generating random number between 1 and 13
    if(randomNumber === 1){ // if the generated number is equal to 1, change it to 11
        randomNumber = 11
    }
    else if (randomNumber > 10){ // else if number is higher than 10, change it to 10
        randomNumber = 10
    }

    return randomNumber // return the value of the random number

}

Then I replaced every hardcoded value that is a card with the function. At the start of the game, I also changed the value of isAlive to false, because the player should only be alive when he started the game. So then I set isAlive to true in the startGame() function. The first two cards should also be generated when clicking the start button and not before. So I declared the variables firstCard and secondCard in the startGame() function and deleted them from outside the function.

let cards = [] // array is empty, because there are no cards in the beginning
let sum = 0
let hasBlackJack = false
let isAlive = false // player only is alive when he started the game
let message = ""
let messageEl = document.querySelector("#message-el")
let sumEl = document.querySelector("#sum-el")
let cardsEl = document.querySelector("#cards-el")



function getRandomCard(){
    let randomNumber = Math.floor( Math.random() * 13) +1;
    if(randomNumber === 1){
        randomNumber = 11
    }
    else if (randomNumber > 10){
        randomNumber = 10
    }

    return randomNumber

}


function startGame(){
    isAlive = true // player started game and is now alive
    let firstCard = getRandomCard() // first two cards are getting created
    let secondCard = getRandomCard()
    cards = [firstCard, secondCard] // first two cards are getting moved into the array
    sum = firstCard + secondCard
    renderGame()
}

function renderGame(){

    cardsEl.textContent = "Cards: "
    for(let i = 0; i<cards.length; i++){
        cardsEl.textContent += cards[i] + " "
    }

    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 = getRandomCard() // set values of the cards to getRandomCard() function
    sum += card
    cards.push(card)
    renderGame()

}

This was much progress in the blackjack app today. I hope you learned something valuable.