From 86154a00621b953443b4c830d7a12cbe914e8bc4 Mon Sep 17 00:00:00 2001
From: Jia <sinjh1097@gmail.com>
Date: Mon, 19 Feb 2024 16:06:50 +0800
Subject: [PATCH 01/10] created deck and shuffle functions

---
 script.js | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 95 insertions(+), 3 deletions(-)

diff --git a/script.js b/script.js
index bbe8a293..084d598f 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,96 @@
-var main = function (input) {
-  var myOutputValue = 'hello world';
-  return myOutputValue;
+//This ia a game of Blacjack!
+//Assumes two users, player vs. dealer
+//Allows player and dealer to hit or stand
+//Calculates Blackjack win
+
+//2 users
+var player = "Player";
+var dealer = "Dealer";
+var playerHand = [];
+var dealerHand = [];
+var gameDeck = [];
+
+//Modes to run the game
+//1) Start game, 2) Draw cards, 3) Player decides hit or stand 4) Dealer decides hit or stand, 5) Show results
+var modeGameStart = "start game";
+var modeDrawCards = "draw cards";
+var modePlayerHitStand = "player hit or stand";
+var modeDealerHitStand = "dealer hit or stand";
+var modeShowResults = "show results";
+
+//Start the game
+var gameMode = modeGameStart;
+
+//Function to create a deck of cards
+var createDeck = function () {
+  var suits = ["Hearts", "Diamonds", "Clubs", "Spades"];
+  var ranks = [
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "J",
+    "Q",
+    "K",
+    "A",
+  ];
+  var deck = [];
+
+  for (var suitIndex = 0; suitIndex < suits.length; suitIndex++) {
+    for (var rankIndex = 0; rankIndex < ranks.length; rankIndex++) {
+      var card = {
+        rank: ranks[rankIndex],
+        suit: suits[suitIndex],
+      };
+
+      //Assign value to the card
+      //Ace is assigned value of 11 unless total score becomes > 21, then assume value of 1
+      if (
+        ranks[rankIndex] === "J" ||
+        ranks[rankIndex] === "Q" ||
+        ranks[rankIndex] === "K"
+      ) {
+        card.value = 10;
+      } else if (ranks[rankIndex] === "A") {
+        card.value = 11;
+      } else {
+        card.value = parseInt(ranks[rankIndex]);
+      }
+
+      deck.push(card);
+    }
+  }
+
+  return deck;
+};
+
+//Function to shuffle deck that is created by swapping card's position with another card in the deck, loops through the entire deck until all cards are shuffled
+
+var shuffleDeck = function (shuffle) {
+  // n is defined as the number of cards in the deck
+  var n = shuffle.length;
+  while (n > 1) {
+    // Generate a random index between 0 and n (n > 1 so that while loop continues as long as n is greater than 1)
+    // Math.random times n gives random number between 0 (inclusive) and n (exclusive), Math.floor to round down to integer
+    //Then, n-- decrements the value of n after it's been used, ensuring that the random index will always be between 0 and n-1.
+    var randomIndex = Math.floor(Math.random() * n--);
+    //Temporarily stores the card at position 'n'
+    var temp = shuffle[n];
+    //Swap the current card with the card at the random index
+    shuffle[n] = shuffle[randomIndex];
+    shuffle[randomIndex] = temp;
+  }
+  return shuffle;
+};
+
+//Function to create AND shuffle deck
+var prepareDeck = function () {
+  var myDeck = createDeck();
+  var shuffledDeck = shuffleDeck(myDeck);
+  return shuffledDeck;
 };

From f55c274faa9d1b9c8ea5c7eef324d5880419b6b8 Mon Sep 17 00:00:00 2001
From: Jia <sinjh1097@gmail.com>
Date: Mon, 19 Feb 2024 18:18:35 +0800
Subject: [PATCH 02/10] added game functions

---
 script.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 75 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 084d598f..3d4a0452 100644
--- a/script.js
+++ b/script.js
@@ -3,7 +3,7 @@
 //Allows player and dealer to hit or stand
 //Calculates Blackjack win
 
-//2 users
+//2 users; player vs. dealer (computer)
 var player = "Player";
 var dealer = "Dealer";
 var playerHand = [];
@@ -21,6 +21,8 @@ var modeShowResults = "show results";
 //Start the game
 var gameMode = modeGameStart;
 
+//<----- DECK FUNCTIONS ----->
+
 //Function to create a deck of cards
 var createDeck = function () {
   var suits = ["Hearts", "Diamonds", "Clubs", "Spades"];
@@ -49,7 +51,6 @@ var createDeck = function () {
       };
 
       //Assign value to the card
-      //Ace is assigned value of 11 unless total score becomes > 21, then assume value of 1
       if (
         ranks[rankIndex] === "J" ||
         ranks[rankIndex] === "Q" ||
@@ -94,3 +95,75 @@ var prepareDeck = function () {
   var shuffledDeck = shuffleDeck(myDeck);
   return shuffledDeck;
 };
+
+//<----- GAME FUNCTIONS ----->
+
+//Check for Blackjack scenario first, because if player or dealer has Blackjack, automatically wins the game
+var checkForBlackjack = function (handArray) {
+  var userCardOne = handArray[0];
+  var userCardTwo = handArray[1];
+  var isBlackjack = false;
+
+  var isTenCard = function (rank) {
+    return rank === "10" || rank === "J" || rank === "Q" || rank === "K";
+  };
+
+  if (
+    (userCardOne.rank === "A" && isTenCard(userCardTwo.rank)) ||
+    (userCardTwo.rank === "A" && isTenCard(userCardOne.rank))
+  ) {
+    isBlackJack = true;
+  }
+  return isBlackjack;
+};
+
+//Calculate total value of hand
+//Ace has assigned value of 11 unless total score becomes > 21, then assume value of 1
+
+var calculateHandValue = function (handArray) {
+  var handValue = 0;
+  var hasAce = false;
+
+  // Calculate the initial hand value
+  for (var i = 0; i < handArray.length; i++) {
+    var cardValue = handArray[i].value;
+    handValue += cardValue;
+    if (handArray[i].rank === "A") {
+      hasAce = true;
+    }
+  }
+
+  // If hand value exceeds 21 and there's an Ace, reduce Ace's value from 11 to 1
+  if (handValue > 21 && hasAce) {
+    handValue -= 10;
+  }
+
+  return handValue;
+};
+
+//Function to show player and dealer's hands respectively
+
+var displayHands = function (playerHandArray, dealerHandArray) {
+  var playerCardOne = playerHandArray[0];
+  var playerCardTwo = playerHandArray[1];
+  var dealerCardOne = dealerHandArray[0];
+  var dealerCardTwo = dealerHandArray[1];
+
+  var playerHand = `Player's hand:<br>${playerCardOne.rank} of ${playerCardOne.suit}<br>${playerCardTwo.rank} of ${playerCardTwo.suit}<br>`;
+  var dealerHand = `Dealer's hand:<br>${dealerCardOne.rank} of ${dealerCardOne.suit}<br>${dealerCardTwo.rank} of ${dealerCardTwo.suit}<br>`;
+
+  return playerHand + dealerHand;
+};
+
+//Function to show player and dealer's values respectively
+
+var displayValue = function (playerHandArray, dealerHandArray) {
+  var playerValue = `Player's value: ${calculateHandValue(
+    playerHandArray
+  )}<br>`;
+  var dealerValue = `Dealer's value: ${calculateHandValue(
+    dealerHandArray
+  )}<br>`;
+
+  return playerValue + dealerValue;
+};

From cf69c5f8819df11857b1893a80c3e1050174a194 Mon Sep 17 00:00:00 2001
From: Jia <sinjh1097@gmail.com>
Date: Mon, 19 Feb 2024 21:33:40 +0800
Subject: [PATCH 03/10] state before breaking up player and dealer view

---
 script.js | 120 ++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 103 insertions(+), 17 deletions(-)

diff --git a/script.js b/script.js
index 3d4a0452..ee01964d 100644
--- a/script.js
+++ b/script.js
@@ -11,15 +11,14 @@ var dealerHand = [];
 var gameDeck = [];
 
 //Modes to run the game
-//1) Start game, 2) Draw cards, 3) Player decides hit or stand 4) Dealer decides hit or stand, 5) Show results
+//1) Start game, 2) Calculate cards, 3) Player decides hit or stand, 4) Show results
 var modeGameStart = "start game";
-var modeDrawCards = "draw cards";
+var modeCalculateCards = "calculate cards";
 var modePlayerHitStand = "player hit or stand";
-var modeDealerHitStand = "dealer hit or stand";
 var modeShowResults = "show results";
 
 //Start the game
-var gameMode = modeGameStart;
+var currentGameMode = modeGameStart;
 
 //<----- DECK FUNCTIONS ----->
 
@@ -96,6 +95,15 @@ var prepareDeck = function () {
   return shuffledDeck;
 };
 
+//Function to deal cards
+//Use pop to hand out cards from deck (gameDeck)
+//Use push to add to respective arrays (hand)
+var dealCards = function (hand, numCards) {
+  for (var i = 0; i < numCards; i++) {
+    hand.push(gameDeck.pop());
+  }
+};
+
 //<----- GAME FUNCTIONS ----->
 
 //Check for Blackjack scenario first, because if player or dealer has Blackjack, automatically wins the game
@@ -142,28 +150,106 @@ var calculateHandValue = function (handArray) {
 };
 
 //Function to show player and dealer's hands respectively
-
 var displayHands = function (playerHandArray, dealerHandArray) {
   var playerCardOne = playerHandArray[0];
   var playerCardTwo = playerHandArray[1];
   var dealerCardOne = dealerHandArray[0];
   var dealerCardTwo = dealerHandArray[1];
 
-  var playerHand = `Player's hand:<br>${playerCardOne.rank} of ${playerCardOne.suit}<br>${playerCardTwo.rank} of ${playerCardTwo.suit}<br>`;
-  var dealerHand = `Dealer's hand:<br>${dealerCardOne.rank} of ${dealerCardOne.suit}<br>${dealerCardTwo.rank} of ${dealerCardTwo.suit}<br>`;
+  var playerHandMessage = `Player's hand:<br>${playerCardOne.rank} of ${playerCardOne.suit}<br>${playerCardTwo.rank} of ${playerCardTwo.suit}<br><br>`;
+  var dealerHandMessage = `Dealer's hand:<br>${dealerCardOne.rank} of ${dealerCardOne.suit}<br>${dealerCardTwo.rank} of ${dealerCardTwo.suit}<br>`;
 
-  return playerHand + dealerHand;
+  return playerHandMessage + dealerHandMessage;
 };
 
 //Function to show player and dealer's values respectively
-
 var displayValue = function (playerHandArray, dealerHandArray) {
-  var playerValue = `Player's value: ${calculateHandValue(
-    playerHandArray
-  )}<br>`;
-  var dealerValue = `Dealer's value: ${calculateHandValue(
-    dealerHandArray
-  )}<br>`;
-
-  return playerValue + dealerValue;
+  var playerValue = calculateHandValue(playerHandArray);
+  var dealerValue = calculateHandValue(dealerHandArray);
+
+  var playerValueMessage = `Players's value: ${playerValue}`;
+  var dealerValueMessage = `Dealer's value: ${dealerValue}`;
+  return playerValueMessage + dealerValueMessage;
+};
+
+//<----- MAIN FUNCTION (YAY!) ----->
+
+var main = function (input) {
+  var outputMessage = "";
+
+  //Create and shuffle deck of cards
+  if (currentGameMode === modeGameStart) {
+    gameDeck = prepareDeck();
+    //Deal cards
+    dealCards(playerHand, 2);
+    dealCards(dealerHand, 2);
+
+    currentGameMode = modeCalculateCards;
+
+    outputMessage =
+      "Two cards have been dealt. Click again to view and evaluate your cards.";
+    return outputMessage;
+  }
+
+  //Run cards for Blackjack first
+  if (currentGameMode === modeCalculateCards) {
+    var playerBlackjack = checkForBlackjack(playerHand);
+    var dealerBlackjack = checkForBlackjack(dealerHand);
+    var handsMessage = displayHands(playerHand, dealerHand);
+    var valueMessage = displayValue(playerHand, dealerHand);
+
+    //console.log: check if either user has Blackjack
+    console.log("Player hit Blackjack? " + playerBlackjack);
+    console.log("Dealer hit Blackjack? " + dealerBlackjack);
+
+    //if only player has Blackjack, player wins
+    if (playerBlackjack && !dealerBlackjack) {
+      outputMessage =
+        handsMessage + valueMessage + "<br> Player has Blackjack! Player wins!";
+    }
+    //if only dealer has Blackjack, dealer wins
+    else if (!playerBlackjack && dealerBlackjack) {
+      outputMessage =
+        handsMessage + valueMessage + "<br> Dealer has Blackjack! Dealer wins!";
+    }
+    //if both has Blackjack, it's a tie
+    else if (playerBlackjack && dealerBlackjack) {
+      outputMessage =
+        handsMessage +
+        valueMessage +
+        "<br> It's a tie! Both of dealer and player has Blackjack!";
+    }
+
+    //if neither has Blackjack, continue to hit or stand
+    else {
+      outputMessage =
+        handsMessage +
+        valueMessage +
+        "<br> No one has Blackjack.<br>Please enter 'hit' or 'stand'.";
+      currentGameMode = modePlayerHitStand;
+    }
+    return outputMessage;
+  }
+
+  //Let player decide to hit or stand
+  if (currentGameMode === modePlayerHitStand) {
+    if (input == "hit") {
+      playerHand.push(gameDeck.pop());
+      outputMessage =
+        handsMessage +
+        "<br> You drew another card. Input 'hit' for another card or else, input 'stand' to end your turn.";
+    }
+    //If player chooses to "stand", then dealer's turn to decide push or stand
+    //Dealer to draw extra card if value is 16 and below
+    else if (input == "stand") {
+      while (dealerValue <= 16) {
+        dealerHand.push(gameDeck.pop());
+      }
+      //Once dealer's hand value is 17 or higher, the dealer stansd
+      var playerFinalValue = calculateHandValue(playerHand);
+      var dealerFinalValue = calculateHandValue(dealerHand);
+    }
+  }
+  //Time to decide a winner!
+  //If player wins
 };

From 4d5b9d9ff1ca58e5778a6481dc930509692afe9c Mon Sep 17 00:00:00 2001
From: Jia <sinjh1097@gmail.com>
Date: Mon, 19 Feb 2024 22:11:54 +0800
Subject: [PATCH 04/10] fixed player and dealer message function

---
 script.js | 48 ++++++++++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/script.js b/script.js
index ee01964d..385778af 100644
--- a/script.js
+++ b/script.js
@@ -149,27 +149,28 @@ var calculateHandValue = function (handArray) {
   return handValue;
 };
 
-//Function to show player and dealer's hands respectively
-var displayHands = function (playerHandArray, dealerHandArray) {
+//Function to show player's hands and value
+var displayPlayerHandValue = function (playerHandArray) {
   var playerCardOne = playerHandArray[0];
   var playerCardTwo = playerHandArray[1];
-  var dealerCardOne = dealerHandArray[0];
-  var dealerCardTwo = dealerHandArray[1];
+  var playerValue = calculateHandValue(playerHandArray);
 
   var playerHandMessage = `Player's hand:<br>${playerCardOne.rank} of ${playerCardOne.suit}<br>${playerCardTwo.rank} of ${playerCardTwo.suit}<br><br>`;
-  var dealerHandMessage = `Dealer's hand:<br>${dealerCardOne.rank} of ${dealerCardOne.suit}<br>${dealerCardTwo.rank} of ${dealerCardTwo.suit}<br>`;
+  var playerValueMessage = `Players's value: ${playerValue} <br>`;
 
-  return playerHandMessage + dealerHandMessage;
+  return playerHandMessage + playerValueMessage;
 };
 
-//Function to show player and dealer's values respectively
-var displayValue = function (playerHandArray, dealerHandArray) {
-  var playerValue = calculateHandValue(playerHandArray);
+//Function to show dealer's hands and values
+var displayDealerHandValue = function (dealerHandArray) {
+  var dealerCardOne = dealerHandArray[0];
+  var dealerCardTwo = dealerHandArray[1];
   var dealerValue = calculateHandValue(dealerHandArray);
 
-  var playerValueMessage = `Players's value: ${playerValue}`;
+  var dealerHandMessage = `Dealer's hand:<br>${dealerCardOne.rank} of ${dealerCardOne.suit}<br>${dealerCardTwo.rank} of ${dealerCardTwo.suit}<br>`;
   var dealerValueMessage = `Dealer's value: ${dealerValue}`;
-  return playerValueMessage + dealerValueMessage;
+
+  return dealerHandMessage + dealerValueMessage;
 };
 
 //<----- MAIN FUNCTION (YAY!) ----->
@@ -195,8 +196,8 @@ var main = function (input) {
   if (currentGameMode === modeCalculateCards) {
     var playerBlackjack = checkForBlackjack(playerHand);
     var dealerBlackjack = checkForBlackjack(dealerHand);
-    var handsMessage = displayHands(playerHand, dealerHand);
-    var valueMessage = displayValue(playerHand, dealerHand);
+    var playerMessage = displayPlayerHandValue(playerHand);
+    var dealerMessage = displayDealerHandValue(dealerHand);
 
     //console.log: check if either user has Blackjack
     console.log("Player hit Blackjack? " + playerBlackjack);
@@ -205,27 +206,30 @@ var main = function (input) {
     //if only player has Blackjack, player wins
     if (playerBlackjack && !dealerBlackjack) {
       outputMessage =
-        handsMessage + valueMessage + "<br> Player has Blackjack! Player wins!";
+        playerMessage +
+        dealerMessage +
+        "<br> Player has Blackjack! Player wins!";
     }
     //if only dealer has Blackjack, dealer wins
     else if (!playerBlackjack && dealerBlackjack) {
       outputMessage =
-        handsMessage + valueMessage + "<br> Dealer has Blackjack! Dealer wins!";
+        playerMessage +
+        dealerMessage +
+        "<br> Dealer has Blackjack! Dealer wins!";
     }
     //if both has Blackjack, it's a tie
     else if (playerBlackjack && dealerBlackjack) {
       outputMessage =
-        handsMessage +
-        valueMessage +
+        playerMessage +
+        dealerMessage +
         "<br> It's a tie! Both of dealer and player has Blackjack!";
     }
 
-    //if neither has Blackjack, continue to hit or stand
+    //if neither has Blackjack, player will only get to view his cards to decide
     else {
       outputMessage =
-        handsMessage +
-        valueMessage +
-        "<br> No one has Blackjack.<br>Please enter 'hit' or 'stand'.";
+        playerMessage +
+        "<br> No one has Blackjack. The game continues! <br>Please input 'hit' for another card or else, input 'stand' to end your turn.";
       currentGameMode = modePlayerHitStand;
     }
     return outputMessage;
@@ -237,7 +241,7 @@ var main = function (input) {
       playerHand.push(gameDeck.pop());
       outputMessage =
         handsMessage +
-        "<br> You drew another card. Input 'hit' for another card or else, input 'stand' to end your turn.";
+        "<br> You drew another card.<br> Please input 'hit' for another card or else, input 'stand' to end your turn.";
     }
     //If player chooses to "stand", then dealer's turn to decide push or stand
     //Dealer to draw extra card if value is 16 and below

From 75d4cdeecc571b9fa1e4f124d0b24776006bfeb3 Mon Sep 17 00:00:00 2001
From: Jia <sinjh1097@gmail.com>
Date: Tue, 20 Feb 2024 00:09:39 +0800
Subject: [PATCH 05/10] a working Blackjackgit add script.jsgit add
 script.jsgit add script.js

---
 script.js | 118 +++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 94 insertions(+), 24 deletions(-)

diff --git a/script.js b/script.js
index 385778af..b5654672 100644
--- a/script.js
+++ b/script.js
@@ -13,7 +13,7 @@ var gameDeck = [];
 //Modes to run the game
 //1) Start game, 2) Calculate cards, 3) Player decides hit or stand, 4) Show results
 var modeGameStart = "start game";
-var modeCalculateCards = "calculate cards";
+var modeCalculateValues = "calculate values of cards";
 var modePlayerHitStand = "player hit or stand";
 var modeShowResults = "show results";
 
@@ -151,26 +151,36 @@ var calculateHandValue = function (handArray) {
 
 //Function to show player's hands and value
 var displayPlayerHandValue = function (playerHandArray) {
-  var playerCardOne = playerHandArray[0];
-  var playerCardTwo = playerHandArray[1];
-  var playerValue = calculateHandValue(playerHandArray);
-
-  var playerHandMessage = `Player's hand:<br>${playerCardOne.rank} of ${playerCardOne.suit}<br>${playerCardTwo.rank} of ${playerCardTwo.suit}<br><br>`;
-  var playerValueMessage = `Players's value: ${playerValue} <br>`;
+  var playerHandMessage = "Player's hand:<br>";
+  var playerValue = 0;
+
+  // Loop through each card in the player's hand
+  for (var i = 0; i < playerHandArray.length; i++) {
+    var card = playerHandArray[i];
+    playerHandMessage += `${card.rank} of ${card.suit}<br>`;
+    playerValue += card.value;
+  }
+  // Calculate total value of hand
+  var playerValueMessage = `Player's value: ${playerValue}<br>`;
 
-  return playerHandMessage + playerValueMessage;
+  return playerHandMessage + "<br>" + playerValueMessage + "<br>";
 };
 
 //Function to show dealer's hands and values
 var displayDealerHandValue = function (dealerHandArray) {
-  var dealerCardOne = dealerHandArray[0];
-  var dealerCardTwo = dealerHandArray[1];
-  var dealerValue = calculateHandValue(dealerHandArray);
-
-  var dealerHandMessage = `Dealer's hand:<br>${dealerCardOne.rank} of ${dealerCardOne.suit}<br>${dealerCardTwo.rank} of ${dealerCardTwo.suit}<br>`;
+  var dealerHandMessage = "Dealer's hand:<br>";
+  var dealerValue = 0;
+
+  // Loop through each card in the dealer's hand
+  for (var i = 0; i < dealerHandArray.length; i++) {
+    var card = dealerHandArray[i];
+    dealerHandMessage += `${card.rank} of ${card.suit}<br>`;
+    dealerValue += card.value;
+  }
+  //Calculate total value of hand
   var dealerValueMessage = `Dealer's value: ${dealerValue}`;
 
-  return dealerHandMessage + dealerValueMessage;
+  return dealerHandMessage + "<br>" + dealerValueMessage;
 };
 
 //<----- MAIN FUNCTION (YAY!) ----->
@@ -178,6 +188,19 @@ var displayDealerHandValue = function (dealerHandArray) {
 var main = function (input) {
   var outputMessage = "";
 
+  // Check if user inputs "reset" to restart the game
+  if (input.toLowerCase() === "reset") {
+    // Reset all game variables to their initial values
+    gameDeck = [];
+    playerHand = [];
+    dealerHand = [];
+    currentGameMode = modeGameStart;
+
+    // Inform the player that the game has been reset
+    outputMessage = "Game has been reset. Please click to start a new game.";
+    return outputMessage;
+  }
+
   //Create and shuffle deck of cards
   if (currentGameMode === modeGameStart) {
     gameDeck = prepareDeck();
@@ -185,7 +208,7 @@ var main = function (input) {
     dealCards(playerHand, 2);
     dealCards(dealerHand, 2);
 
-    currentGameMode = modeCalculateCards;
+    currentGameMode = modeCalculateValues;
 
     outputMessage =
       "Two cards have been dealt. Click again to view and evaluate your cards.";
@@ -193,7 +216,7 @@ var main = function (input) {
   }
 
   //Run cards for Blackjack first
-  if (currentGameMode === modeCalculateCards) {
+  if (currentGameMode === modeCalculateValues) {
     var playerBlackjack = checkForBlackjack(playerHand);
     var dealerBlackjack = checkForBlackjack(dealerHand);
     var playerMessage = displayPlayerHandValue(playerHand);
@@ -229,7 +252,7 @@ var main = function (input) {
     else {
       outputMessage =
         playerMessage +
-        "<br> No one has Blackjack. The game continues! <br>Please input 'hit' for another card or else, input 'stand' to end your turn.";
+        "<br> No one has Blackjack. The game continues! <br> Please input 'hit' for another card or else, input 'stand' to end your turn and see the results of this game.";
       currentGameMode = modePlayerHitStand;
     }
     return outputMessage;
@@ -237,23 +260,70 @@ var main = function (input) {
 
   //Let player decide to hit or stand
   if (currentGameMode === modePlayerHitStand) {
-    if (input == "hit") {
+    input = input.toLowerCase();
+    var playerMessage = displayPlayerHandValue(playerHand);
+    if (input === "hit") {
       playerHand.push(gameDeck.pop());
+      playerMessage = displayPlayerHandValue(playerHand);
       outputMessage =
-        handsMessage +
-        "<br> You drew another card.<br> Please input 'hit' for another card or else, input 'stand' to end your turn.";
+        playerMessage +
+        "<br> You drew another card.<br> Please input 'hit' for another card or else, input 'stand' to end your turn and see the results of this game.";
+      return outputMessage;
     }
     //If player chooses to "stand", then dealer's turn to decide push or stand
     //Dealer to draw extra card if value is 16 and below
-    else if (input == "stand") {
-      while (dealerValue <= 16) {
+    else if (input === "stand") {
+      while (calculateHandValue(dealerHand) < 17) {
         dealerHand.push(gameDeck.pop());
+        dealerMessage = displayDealerHandValue(dealerHand);
+        //console.log check dealer's hand as of now
+        console.log(dealerMessage);
       }
-      //Once dealer's hand value is 17 or higher, the dealer stansd
+      //Once dealer's value is 17 or higher, the dealer stands
+      currentGameMode = modeShowResults;
       var playerFinalValue = calculateHandValue(playerHand);
       var dealerFinalValue = calculateHandValue(dealerHand);
     }
   }
+  //Check for bust (more than 21 in value)
+  if (currentGameMode === modeShowResults) {
+    var playerBust = playerFinalValue > 21;
+    var dealerBust = dealerFinalValue > 21;
+
+    // Check if both player and dealer bust
+    if (playerBust && dealerBust) {
+      return (
+        "It's a tie! Both player and dealer bust.<br> Please input 'reset' to restart the game!<br><br>" +
+        playerMessage +
+        dealerMessage
+      );
+    } else if (playerBust) {
+      return (
+        "Dealer wins! Player busts. <br> Please input 'reset' to restart the game!<br><br>" +
+        playerMessage +
+        dealerMessage
+      );
+    } else if (dealerBust) {
+      return (
+        "Player wins! Dealer busts. <br> Please input 'reset' to restart the game!<br><br>" +
+        playerMessage +
+        dealerMessage
+      );
+    }
+  }
   //Time to decide a winner!
-  //If player wins
+  if (playerFinalValue == dealerFinalValue) {
+    outputMessage =
+      "It's a tie! Both player and dealer has the same value. <br> Please input 'reset' to restart the game!<br><br>" +
+      playerMessage +
+      dealerMessage;
+  } else if (playerFinalValue < dealerFinalValue) {
+    outputMessage =
+      "Dealer wins! Dealer has a higher value than player. <br> Please input 'reset' to restart the game!<br><br>" +
+      playerMessage +
+      dealerMessage;
+  } else {
+    outputMessage =
+      "Player wins! Player has a higher value than dealer. <br> Please input 'reset' to restart the game!<br>";
+  }
 };

From 490792e43c84183942dd9e82ad58f8f05e268833 Mon Sep 17 00:00:00 2001
From: Jia <sinjh1097@gmail.com>
Date: Tue, 20 Feb 2024 00:33:49 +0800
Subject: [PATCH 06/10] added emojis

---
 script.js | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/script.js b/script.js
index b5654672..1ecf6217 100644
--- a/script.js
+++ b/script.js
@@ -157,7 +157,18 @@ var displayPlayerHandValue = function (playerHandArray) {
   // Loop through each card in the player's hand
   for (var i = 0; i < playerHandArray.length; i++) {
     var card = playerHandArray[i];
-    playerHandMessage += `${card.rank} of ${card.suit}<br>`;
+    playerHandMessage += `${card.rank} of ${card.suit}`;
+    // Add emoji based on the suit
+    if (card.suit === "Hearts") {
+      playerHandMessage += "❤️";
+    } else if (card.suit === "Diamonds") {
+      playerHandMessage += "💎";
+    } else if (card.suit === "Clubs") {
+      playerHandMessage += "🍀";
+    } else if (card.suit === "Spades") {
+      playerHandMessage += "🧹";
+    }
+    playerHandMessage += "<br>";
     playerValue += card.value;
   }
   // Calculate total value of hand
@@ -174,7 +185,18 @@ var displayDealerHandValue = function (dealerHandArray) {
   // Loop through each card in the dealer's hand
   for (var i = 0; i < dealerHandArray.length; i++) {
     var card = dealerHandArray[i];
-    dealerHandMessage += `${card.rank} of ${card.suit}<br>`;
+    dealerHandMessage += `${card.rank} of ${card.suit}`;
+    // Add emoji based on the suit
+    if (card.suit === "Hearts") {
+      dealerHandMessage += " ❤️";
+    } else if (card.suit === "Diamonds") {
+      dealerHandMessage += "💎";
+    } else if (card.suit === "Clubs") {
+      dealerHandMessage += "🍀";
+    } else if (card.suit === "Spades") {
+      dealerHandMessage += "🧹";
+    }
+    dealerHandMessage += "<br>";
     dealerValue += card.value;
   }
   //Calculate total value of hand
@@ -273,7 +295,7 @@ var main = function (input) {
     //If player chooses to "stand", then dealer's turn to decide push or stand
     //Dealer to draw extra card if value is 16 and below
     else if (input === "stand") {
-      while (calculateHandValue(dealerHand) < 17) {
+      while (calculateHandValue(dealerHand) <= 16) {
         dealerHand.push(gameDeck.pop());
         dealerMessage = displayDealerHandValue(dealerHand);
         //console.log check dealer's hand as of now

From 7af2599f5e35615c35e475119196bab554a91211 Mon Sep 17 00:00:00 2001
From: Jia <sinjh1097@gmail.com>
Date: Tue, 20 Feb 2024 00:35:56 +0800
Subject: [PATCH 07/10] added input validation. it's finalgit add script.js!

---
 script.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/script.js b/script.js
index 1ecf6217..18c9082d 100644
--- a/script.js
+++ b/script.js
@@ -251,30 +251,26 @@ var main = function (input) {
     //if only player has Blackjack, player wins
     if (playerBlackjack && !dealerBlackjack) {
       outputMessage =
-        playerMessage +
-        dealerMessage +
-        "<br> Player has Blackjack! Player wins!";
+        playerMessage + dealerMessage + "Player has Blackjack! Player wins!";
     }
     //if only dealer has Blackjack, dealer wins
     else if (!playerBlackjack && dealerBlackjack) {
       outputMessage =
-        playerMessage +
-        dealerMessage +
-        "<br> Dealer has Blackjack! Dealer wins!";
+        playerMessage + dealerMessage + "Dealer has Blackjack! Dealer wins!";
     }
     //if both has Blackjack, it's a tie
     else if (playerBlackjack && dealerBlackjack) {
       outputMessage =
         playerMessage +
         dealerMessage +
-        "<br> It's a tie! Both of dealer and player has Blackjack!";
+        "It's a tie! Both of dealer and player has Blackjack!";
     }
 
     //if neither has Blackjack, player will only get to view his cards to decide
     else {
       outputMessage =
         playerMessage +
-        "<br> No one has Blackjack. The game continues! <br> Please input 'hit' for another card or else, input 'stand' to end your turn and see the results of this game.";
+        "No one has Blackjack. The game continues! <br> Please input 'hit' for another card or else, input 'stand' to end your turn and see the results of this game.";
       currentGameMode = modePlayerHitStand;
     }
     return outputMessage;
@@ -283,6 +279,12 @@ var main = function (input) {
   //Let player decide to hit or stand
   if (currentGameMode === modePlayerHitStand) {
     input = input.toLowerCase();
+
+    // Check if input is empty or not "hit" or "stand"
+    if (!input || (input !== "hit" && input !== "stand")) {
+      outputMessage = "Invalid input. Please input 'hit' or 'stand'.";
+      return outputMessage;
+    }
     var playerMessage = displayPlayerHandValue(playerHand);
     if (input === "hit") {
       playerHand.push(gameDeck.pop());

From 77b78a05c6fdad84cc04d1f6cbebda6bb97ed119 Mon Sep 17 00:00:00 2001
From: Jia <sinjh1097@gmail.com>
Date: Tue, 20 Feb 2024 02:26:31 +0800
Subject: [PATCH 08/10] final - no more changes

---
 script.js | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/script.js b/script.js
index 18c9082d..df35e94d 100644
--- a/script.js
+++ b/script.js
@@ -120,7 +120,7 @@ var checkForBlackjack = function (handArray) {
     (userCardOne.rank === "A" && isTenCard(userCardTwo.rank)) ||
     (userCardTwo.rank === "A" && isTenCard(userCardOne.rank))
   ) {
-    isBlackJack = true;
+    isBlackjack = true;
   }
   return isBlackjack;
 };
@@ -219,7 +219,8 @@ var main = function (input) {
     currentGameMode = modeGameStart;
 
     // Inform the player that the game has been reset
-    outputMessage = "Game has been reset. Please click to start a new game.";
+    outputMessage =
+      "Game has been reset. Please click 'submit' to start a new game.";
     return outputMessage;
   }
 
@@ -251,19 +252,23 @@ var main = function (input) {
     //if only player has Blackjack, player wins
     if (playerBlackjack && !dealerBlackjack) {
       outputMessage =
-        playerMessage + dealerMessage + "Player has Blackjack! Player wins!";
+        "Player has Blackjack! Player wins! <br>" +
+        playerMessage +
+        dealerMessage;
     }
     //if only dealer has Blackjack, dealer wins
     else if (!playerBlackjack && dealerBlackjack) {
       outputMessage =
-        playerMessage + dealerMessage + "Dealer has Blackjack! Dealer wins!";
+        "Dealer has Blackjack! Dealer wins! <br>" +
+        playerMessage +
+        dealerMessage;
     }
     //if both has Blackjack, it's a tie
     else if (playerBlackjack && dealerBlackjack) {
       outputMessage =
+        "It's a tie! Both of dealer and player has Blackjack! <br>" +
         playerMessage +
-        dealerMessage +
-        "It's a tie! Both of dealer and player has Blackjack!";
+        dealerMessage;
     }
 
     //if neither has Blackjack, player will only get to view his cards to decide
@@ -291,13 +296,13 @@ var main = function (input) {
       playerMessage = displayPlayerHandValue(playerHand);
       outputMessage =
         playerMessage +
-        "<br> You drew another card.<br> Please input 'hit' for another card or else, input 'stand' to end your turn and see the results of this game.";
+        "You drew another card.<br> Please input 'hit' for another card or else, input 'stand' to end your turn and see the results of this game.";
       return outputMessage;
     }
     //If player chooses to "stand", then dealer's turn to decide push or stand
     //Dealer to draw extra card if value is 16 and below
     else if (input === "stand") {
-      while (calculateHandValue(dealerHand) <= 16) {
+      while (calculateHandValue(dealerHand) < 17) {
         dealerHand.push(gameDeck.pop());
         dealerMessage = displayDealerHandValue(dealerHand);
         //console.log check dealer's hand as of now

From 8c653ec316d7440d708711cf7045446e90718a06 Mon Sep 17 00:00:00 2001
From: Jia <sinjh1097@gmail.com>
Date: Tue, 20 Feb 2024 03:51:40 +0800
Subject: [PATCH 09/10] this is finalgit add script.jsgit add script.js

---
 script.js | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/script.js b/script.js
index df35e94d..3d02bba2 100644
--- a/script.js
+++ b/script.js
@@ -152,7 +152,7 @@ var calculateHandValue = function (handArray) {
 //Function to show player's hands and value
 var displayPlayerHandValue = function (playerHandArray) {
   var playerHandMessage = "Player's hand:<br>";
-  var playerValue = 0;
+  var playerValue = calculateHandValue(playerHandArray);
 
   // Loop through each card in the player's hand
   for (var i = 0; i < playerHandArray.length; i++) {
@@ -169,9 +169,8 @@ var displayPlayerHandValue = function (playerHandArray) {
       playerHandMessage += "🧹";
     }
     playerHandMessage += "<br>";
-    playerValue += card.value;
   }
-  // Calculate total value of hand
+  // Shows total value of hand
   var playerValueMessage = `Player's value: ${playerValue}<br>`;
 
   return playerHandMessage + "<br>" + playerValueMessage + "<br>";
@@ -180,7 +179,7 @@ var displayPlayerHandValue = function (playerHandArray) {
 //Function to show dealer's hands and values
 var displayDealerHandValue = function (dealerHandArray) {
   var dealerHandMessage = "Dealer's hand:<br>";
-  var dealerValue = 0;
+  var dealerValue = calculateHandValue(dealerHandArray);
 
   // Loop through each card in the dealer's hand
   for (var i = 0; i < dealerHandArray.length; i++) {
@@ -197,9 +196,8 @@ var displayDealerHandValue = function (dealerHandArray) {
       dealerHandMessage += "🧹";
     }
     dealerHandMessage += "<br>";
-    dealerValue += card.value;
   }
-  //Calculate total value of hand
+  //Shows total value of hand
   var dealerValueMessage = `Dealer's value: ${dealerValue}`;
 
   return dealerHandMessage + "<br>" + dealerValueMessage;
@@ -291,6 +289,8 @@ var main = function (input) {
       return outputMessage;
     }
     var playerMessage = displayPlayerHandValue(playerHand);
+    var dealerMessage = displayDealerHandValue(dealerHand);
+
     if (input === "hit") {
       playerHand.push(gameDeck.pop());
       playerMessage = displayPlayerHandValue(playerHand);
@@ -301,17 +301,19 @@ var main = function (input) {
     }
     //If player chooses to "stand", then dealer's turn to decide push or stand
     //Dealer to draw extra card if value is 16 and below
+    //Once dealer's value is 17 or higher, the dealer stands
     else if (input === "stand") {
       while (calculateHandValue(dealerHand) < 17) {
         dealerHand.push(gameDeck.pop());
         dealerMessage = displayDealerHandValue(dealerHand);
-        //console.log check dealer's hand as of now
-        console.log(dealerMessage);
       }
-      //Once dealer's value is 17 or higher, the dealer stands
-      currentGameMode = modeShowResults;
+      // Calculate final values after each draw
       var playerFinalValue = calculateHandValue(playerHand);
       var dealerFinalValue = calculateHandValue(dealerHand);
+      console.log("Player's final value:" + playerFinalValue);
+      console.log("Dealer's final value:" + dealerFinalValue);
+
+      currentGameMode = modeShowResults;
     }
   }
   //Check for bust (more than 21 in value)
@@ -341,7 +343,7 @@ var main = function (input) {
     }
   }
   //Time to decide a winner!
-  if (playerFinalValue == dealerFinalValue) {
+  if (playerFinalValue === dealerFinalValue) {
     outputMessage =
       "It's a tie! Both player and dealer has the same value. <br> Please input 'reset' to restart the game!<br><br>" +
       playerMessage +
@@ -353,6 +355,9 @@ var main = function (input) {
       dealerMessage;
   } else {
     outputMessage =
-      "Player wins! Player has a higher value than dealer. <br> Please input 'reset' to restart the game!<br>";
+      "Player wins! Player has a higher value than dealer. <br> Please input 'reset' to restart the game!<br>" +
+      playerMessage +
+      dealerMessage;
   }
+  return outputMessage;
 };

From f14b009ce9933168a10ed87e8a1b309f052c6e3e Mon Sep 17 00:00:00 2001
From: Jia <sinjh1097@gmail.com>
Date: Tue, 20 Feb 2024 12:43:45 +0800
Subject: [PATCH 10/10] edited HTML code

---
 index.html | 158 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 108 insertions(+), 50 deletions(-)

diff --git a/index.html b/index.html
index bbc7dffd..744c7694 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -8,41 +7,52 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Favicon configuration -->
-    <link rel="apple-touch-icon" sizes="180x180" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/apple-touch-icon.png?v=2">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-32x32.png?v=2">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-16x16.png?v=2">
-    <link rel="manifest" href="/site.webmanifest?v=2">
-    <link rel="mask-icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/safari-pinned-tab.svg?v=2" color="#e73c3e">
-    <link rel="shortcut icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon.ico?v=2">
-    <meta name="apple-mobile-web-app-title" content="Rocket Academy">
-    <meta name="application-name" content="Rocket Academy">
-    <meta name="msapplication-TileColor" content="#2b5797">
-    <meta name="theme-color" content="#ffffff">
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/apple-touch-icon.png?v=2"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-32x32.png?v=2"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-16x16.png?v=2"
+    />
+    <link rel="manifest" href="/site.webmanifest?v=2" />
+    <link
+      rel="mask-icon"
+      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/safari-pinned-tab.svg?v=2"
+      color="#e73c3e"
+    />
+    <link
+      rel="shortcut icon"
+      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon.ico?v=2"
+    />
+    <meta name="apple-mobile-web-app-title" content="Rocket Academy" />
+    <meta name="application-name" content="Rocket Academy" />
+    <meta name="msapplication-TileColor" content="#2b5797" />
+    <meta name="theme-color" content="#ffffff" />
 
     <!-- sharing configuration -->
     <!-- Primary Meta Tags -->
     <title>Blackjack - Basics - Rocket Academy</title>
-    <meta name="title" content="YOURNAME's BlackJack Game!">
-    <meta name="description" content="A fun card game I made myself! 😄💪🌈">
-
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
-    <meta property="og:title" content="YOURNAME's BlackJack Game!">
-    <meta property="og:description" content="A fun card game I made myself! 😄💪🌈">
-    <meta property="og:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
-
-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
-    <meta name="twitter:title" content="YOURNAME's BlackJack Game!">
-    <meta name="twitter:description" content="A fun card game I made myself! 😄💪🌈">
-    <meta name="twitter:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
-    <meta name="twitter:site" content="@rocketacademyco">
-    <meta name="twitter:creator" content="@rocketacademyco">
+    <meta name="title" content="Jia Hui's BlackJack Game!" />
+    <meta
+      name="description"
+      content="A miracle product with the help of Google and Stack Overflow 🥲🙏✨"
+    />
 
     <!-- fonts -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Jost"
+    />
 
     <!-- CSS -->
     <style>
@@ -51,21 +61,21 @@
       }
 
       body {
-        font-family: 'Open Sans', sans-serif;
+        font-family: "Jost";
         margin-left: 30px;
         margin-right: 30px;
-        background-color:white;
-        color: black; /* sets the font color */
+        background-color: rgb(100, 0, 0);
+        color: rgb(255, 255, 255); /* sets the font color */
         background-image: url(""); /* The image used */
         background-position: center; /* Center the image */
         background-repeat: no-repeat; /* Do not repeat the image */
         background-size: cover; /* Resize the background image to cover the entire container */
       }
 
-      #output-div img{
-        display:block;
-        max-width:100%;
-        max-height:200px;
+      #output-div img {
+        display: block;
+        max-width: 100%;
+        max-height: 200px;
       }
       .header {
         text-align: center;
@@ -73,15 +83,19 @@
         margin-bottom: 3rem;
       }
 
+      h4 {
+        text-align: center;
+      }
+
       #container {
-        background-color: pink;
+        background-color: rgba(11, 65, 32, 0.842);
         margin: 40px auto;
         max-width: 800px;
         padding: 38px 31px;
       }
 
       input {
-        font-size: 21px;
+        font-size: 24px;
         line-height: 33px;
         margin: 0 0 23px 0;
         padding: 0 9px;
@@ -89,17 +103,21 @@
       }
 
       button {
-        font-size: 21px;
+        font-size: 19px;
         line-height: 33px;
         margin: 0 0 23px 0;
         padding: 0 6px;
       }
 
       #output-div {
-        background-color: lightgrey;
+        background-color: rgb(208, 248, 221);
+        color: black;
         margin: 20px auto;
         padding: 20px;
         width: 100%;
+      } 
+      #output-div::before {
+        content: attr(data-placeholder); 
       }
 
       .logo-img {
@@ -115,24 +133,58 @@
         }
       }
     </style>
-
   </head>
 
   <body>
-    <h1 class="header">
-      <img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
-      Rocket Academy
-      <img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
-    </h1>
-    <h1 class="header">♣️ Basics - Blackjack ♠️</h1>
+    <h1 class="header"></h1>
+    <h1 class="header">♠♣ Blackjack ♦♥</h1>
+    <h4>POV: You had one job, but still forgot to bring your deck</h4>
+     <center><img src= "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeTd4ejVrOWhmc3lmdnZrMHNhNzB3bWt0NmlvZG90ZXc4YjU1YWtlbSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/8Iv5lqKwKsZ2g/giphy.gif" alt="cheers" height="160"></center> 
+    </div>
     <div id="container">
       <p>Input:</p>
-      <input id="input-field" />
+      <input
+        input
+        id="input-field"
+        type="text"
+        placeholder="Huat do you think?"
+        style="
+          font-size: 21px;
+          line-height: 33px;
+          margin: 0 0 23px 0;
+          padding: 0 9px;
+          width: 100%;
+        "
+      />
       <br />
-      <button id="submit-button">Submit</button>
+       <button id="submit-button">Submit</button>
       <p>Output:</p>
       <div id="output-div"></div>
     </div>
+    <style>
+      .centered-text {
+        text-align: center;
+      }
+      .hidden-text {
+        display: none;
+      }
+    </style>
+    <div id="gameInstructions" class="centered-text">
+      <p class="instruction-text">Hello! Here's your automated game of Blackjack! 🎰</p>
+      <p class="instruction-text">
+        The goal is to reach 21 points, or be as close as possible.
+        Each player, including the dealer, is first dealt 2 cards each. 
+      </p>
+      <p class="instruction-text">
+       Then, draw extra cards if you need.
+        However, your points cannot be lower than 16 before the game ends. 
+      </p>
+      <p class="instruction-text">
+         So sit tight, play smart, and have fun! 🤑
+         </p>
+         <p class="instruction-text">
+         Press "submit" to receive your cards. 👆
+      </p>
     <!-- Import program logic -->
     <script src="script.js"></script>
     <!-- Define button click functionality -->
@@ -149,6 +201,12 @@ <h1 class="header">♣️ Basics - Blackjack ♠️</h1>
 
         // Reset input value
         input.value = "";
+
+         // Hide game instructions text once the game starts
+        var instructions = document.querySelectorAll(".instruction-text");
+        for (var i = 0; i < instructions.length; i += 1) {
+        instructions[i].classList.add("hidden-text");
+        }
       });
     </script>
   </body>