Today I finished the blackjack app and I also learned two new fundamental things in JavaScript. First, I have learned about logical operators. "&&" stands for "and" and "||" stands for or. I applied this to the Blackjack app so that we can only trigger the newCard() function if we are alive and if we do not have Blackjack.

function newCard(){

    if(isAlive === true && hasBlackJack === false){ // the case gets executed if BOTH conditions are true
        let card = getRandomCard()
        sum += card
        cards.push(card)
        renderGame()
    }

}

// if we would have "||" as logical operator, then the case would be executed if one of both conditions are true

After I learned this, the Blackjack app was nearly finished. The only thing I needed to add was my name and my coins. And that is where I learned about objects. An object is a complex data type where you can store data, just like arrays.

let person = { // that's how you define an object (curly braces)
    name: "My Name", // the syntax within the object is different then outside
    coins: "200", // the properties that you create are kept apart through commas
    sayHello: function(){ // you can also define functions in an object. Such a function is called method.
        console.log("Hello")
    }
}

person.sayHello() // you call the properties through object.property

That is how you create an object. I wanted to use this on the Blackjack app, so I created an empty paragraph in the HTML with the id = "player-el". Then the properties I created should be shown in the paragraph:

let player = { //object
     name :"Sven", //properties
     chips : 200
}

let cards = [] 
let sum = 0
let hasBlackJack = false
let isAlive = false 
let message = ""
let messageEl = document.querySelector("#message-el")
let sumEl = document.querySelector("#sum-el")
let cardsEl = document.querySelector("#cards-el")





let playerEl = document.querySelector("#player-el") // get Element
playerEl.textContent = player.name + ": $" + player.chips // change content of the element to the desired properties etc.

After that, the Blackjack app was finished and I learned very much JavaScript with this project. Here are the final codes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Blackjack</title>
    <link rel="stylesheet" href="style.css" >
  </head>
  <body>
      <h1>Blackjack</h1>
      <p id="message-el">Want to play a round?</p>
      <p id="cards-el">Cards:</p>
      <p id="sum-el">Sum:</p>
      <button id="start-btn" onclick="startGame()">Start Game</button>
      <button id="newCard-btn" onclick="newCard()">New Card</button>
      <p id="player-el"></p>
      <script src="index.js"></script>
  </body>
</html>

body{
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    background-image: url("images/table.jpg");
    background-size: cover;
    font-weight: bold;
}

h1{
    color: goldenrod;
}

#message-el {
    font-style: italic;
}

button{
    width: 150px;
    color: #016f32;
    background-color: goldenrod;
    padding: 0.25rem;
    border: none;
    border-radius: 3rem;
    font-weight: bold;
    margin-bottom: 2px;
    margin-top: 2px;
}

let player = {
     name :"Sven",
     chips : 200
}

let cards = [] 
let sum = 0
let hasBlackJack = false
let isAlive = false 
let message = ""
let messageEl = document.querySelector("#message-el")
let sumEl = document.querySelector("#sum-el")
let cardsEl = document.querySelector("#cards-el")





let playerEl = document.querySelector("#player-el")
playerEl.textContent = player.name + ": $" + player.chips

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
    let firstCard = getRandomCard()
    let secondCard = getRandomCard()
    cards = [firstCard, secondCard] 
    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(){

    if(isAlive === true && hasBlackJack === false){
        let card = getRandomCard()
        sum += card
        cards.push(card)
        renderGame()
    }

}

I hope you also learned valuable information with this project!

Day 11 of learning JavaScript: Objects and logical operators

Subscribe to my newsletter

Sven Willhauk

Sven Willhauk