diff --git a/cardbacking.png b/cardbacking.png
new file mode 100644
index 00000000..103e47ba
Binary files /dev/null and b/cardbacking.png differ
diff --git a/depreciated functions.js b/depreciated functions.js
new file mode 100644
index 00000000..c4e55e95
--- /dev/null
+++ b/depreciated functions.js	
@@ -0,0 +1,44 @@
+const dealCardBtn = () => {
+  // button is placed in overall container only FYI
+  const btnEl = document.createElement('button');
+  btnEl.innerText = 'Deal Cards';
+  btnEl.classList.add('btn-deal-cards', 'btn');
+  overallContainer.appendChild(btnEl);
+  btnEl.addEventListener('click', () => {
+    for (let i = 0; i < 5; i += 1) {
+      const card = deck.pop();
+      card.holdStatus = false;
+      userHand.push(card);
+
+      console.log(`${userHand[i].name} of ${userHand[i].suit} dealt`);
+      const cardEl = makeCard(userHand[i]);
+
+      // adds the index of the card to saved card array on 1st click
+      let clickedTimes = 0;
+      cardEl.addEventListener('click', () => {
+        cardEl.classList.toggle('clicked');
+        console.log(`cardname: ${card.name}`);
+
+        if (clickedTimes % 2 === 0) {
+          // console.log('clickedTimes = 0');
+          savedCardsArray.splice(i, 0, i);
+          console.log(`array of card: ${i}`);
+          // removes index of card from array on 2nd click
+        } else if (clickedTimes % 2 === 1) {
+          if (i >= savedCardsArray.length) {
+            savedCardsArray.splice(-1, 1);
+            console.log('last');
+          } else {
+            savedCardsArray.splice(i, 1);
+          }
+          console.log(`splicing: ${i}`);
+          // console.log('clickedTimes = 1');
+        }
+        clickedTimes += 1;
+        console.log(savedCardsArray);
+      });
+
+      gameContainer.appendChild(cardEl);
+    }
+  });
+};
diff --git a/eventListeners.js b/eventListeners.js
new file mode 100644
index 00000000..afef66bf
--- /dev/null
+++ b/eventListeners.js
@@ -0,0 +1,173 @@
+/**
+ * function to bet one credit
+ */
+betOneBtn.addEventListener('click', () => {
+  gameContainer.innerText = '';
+  gameContainer.appendChild(image0);
+  gameContainer.appendChild(image1);
+  gameContainer.appendChild(image2);
+  gameContainer.appendChild(image3);
+  gameContainer.appendChild(image4);
+
+  if (gameMode === 'bet' || gameMode === 'deal') {
+    if (betAmount < 5) {
+      credits -= 1;
+      betAmount += 1;
+      updateCredits();
+      outputContainer.innerText = 'Come on, you can bet more! 💸';
+      gameMode = 'deal';
+      betFiveBtn.disabled = true;
+    }
+    if (betAmount === 5) {
+      gameMode = 'deal';
+      outputContainer.innerText = "That's the way to play! Good luck! 😁";
+      betOneBtn.disabled = true;
+      betFiveBtn.disabled = true;
+    }
+  }
+
+  // highlight the pointsBoard that corresponds to the betAmount
+  let highLight0 = document.querySelector('.board0');
+  let highLight1 = document.querySelector('.board1');
+  let highLight2 = document.querySelector('.board2');
+  let highLight3 = document.querySelector('.board3');
+  let highLight4 = document.querySelector('.board4');
+
+  switch (betAmount) {
+    case 1:
+      highLight0.classList.add('highLightBoard');
+      break;
+    case 2:
+      highLight0.classList.remove('highLightBoard');
+      highLight1.classList.add('highLightBoard');
+      break;
+    case 3:
+      highLight1.classList.remove('highLightBoard');
+      highLight2.classList.add('highLightBoard');
+      break;
+    case 4:
+      highLight2.classList.remove('highLightBoard');
+      highLight3.classList.add('highLightBoard');
+      break;
+    case 5:
+      highLight3.classList.remove('highLightBoard');
+      highLight4.classList.add('highLightBoard');
+      break;
+  }
+
+  dealCardsBtn.disabled = false;
+});
+
+/**
+ * function to bet five credits
+ */
+betFiveBtn.addEventListener('click', () => {
+  gameContainer.innerText = '';
+  gameContainer.appendChild(image0);
+  gameContainer.appendChild(image1);
+  gameContainer.appendChild(image2);
+  gameContainer.appendChild(image3);
+  gameContainer.appendChild(image4);
+  if (gameMode === 'bet') {
+    credits -= 5;
+    betAmount = 5;
+    updateCredits();
+    gameMode = 'deal';
+    outputContainer.innerText = 'All the best to ya boss! 😎';
+  }
+
+  let highlight4 = document.querySelector('.board4');
+  highlight4.classList.add('highLightBoard');
+
+  dealCardsBtn.disabled = false;
+  betFiveBtn.disabled = true;
+  betOneBtn.disabled = true;
+});
+
+/**
+ * function to create a button to deal shuffled cards
+ * also displays cards in gameContainer
+ */
+dealCardsBtn.addEventListener('click', () => {
+  if (gameMode === 'deal') {
+    // empties user hand array
+    userHand = [];
+
+    gameContainer.innerText = '';
+    for (let i = 0; i < 5; i += 1) {
+      const card = deck.pop();
+      card.holdStatus = false;
+      userHand.push(card);
+
+      console.log(`${userHand[i].name} of ${userHand[i].suit} dealt`);
+      const cardEl = makeCard(userHand[i]);
+
+      // adds the index of the card to saved card array on 1st click
+      let clickedTimes = 0;
+      cardEl.addEventListener('click', () => {
+        cardEl.classList.toggle('clicked');
+        console.log(`cardname: ${card.name}`);
+
+        if (clickedTimes % 2 === 0) {
+          // console.log('clickedTimes = 0');
+          card.holdStatus = true;
+          // removes index of card from array on 2nd click
+        } else if (clickedTimes % 2 === 1) {
+          card.holdStatus = false;
+          // console.log('clickedTimes = 1');
+        }
+        clickedTimes += 1;
+      });
+      gameContainer.appendChild(cardEl);
+      outputContainer.innerText =
+        'Looks good! Click on the cards you want to hold. ✋';
+    }
+    // calcHandScore(userHand);
+    gameMode = 'swap';
+    betOneBtn.disabled = true;
+    betFiveBtn.disabled = true;
+    swapCardsBtn.disabled = false;
+    dealCardsBtn.disabled = true;
+  }
+});
+
+/**
+ * function to swap cards that are not under holdStatus true
+ */
+swapCardsBtn.addEventListener('click', () => {
+  if (gameMode === 'swap') {
+    // saves cards on 'hold' status to an array
+    savedCardsArray = userHand.filter((x) => x.holdStatus === true);
+    console.log(savedCardsArray);
+    const amtOfCardsToFillHand = 5 - savedCardsArray.length;
+    console.log(`amt of cards needed = ${amtOfCardsToFillHand}`);
+    // add x amt of cards into saved hand array to make it 5
+    for (let i = 0; i < amtOfCardsToFillHand; i += 1) {
+      const newCard = deck.pop();
+      savedCardsArray.push(newCard);
+    }
+    // makeCards this new array and deal
+    gameContainer.innerText = '';
+    for (let i = 0; i < savedCardsArray.length; i += 1) {
+      const card = savedCardsArray[i];
+      const cardEl = makeCard(card);
+      gameContainer.appendChild(cardEl);
+    }
+    // calculate the score of this card
+    calcHandScore(savedCardsArray);
+    // empties savedCardsArray
+    savedCardsArray = [];
+    // calculates credits & add them to credits
+    calcPointsToAdd();
+    // updates credits in HTML
+    updateCredits();
+    gameMode = 'bet';
+  }
+  betOneBtn.disabled = false;
+  betFiveBtn.disabled = false;
+  swapCardsBtn.disabled = true;
+  dealCardsBtn.disabled = true;
+
+  gameContainer.style.fontSize = '1.5rem';
+  // gameContainer.innerHTML = 'Start betting to play again!';
+});
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..669fbc67
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="styles.css" />
+    <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>Video Poker!</title>
+  </head>
+  <body>
+    <script src="init.js"></script>
+    <script src="eventListeners.js"></script>
+    <script src="makeDeck.js"></script>
+    <script src="script.js"></script>
+    <!-- <script src="testHands.js"></script> -->
+  </body>
+</html>
diff --git a/init.js b/init.js
new file mode 100644
index 00000000..65c97be8
--- /dev/null
+++ b/init.js
@@ -0,0 +1,139 @@
+let overallContainer; // contains all assets
+let gameContainer;
+let cardComboContainer;
+let statusContainer;
+let outputContainer;
+let inputContainer;
+let buttonsContainer;
+let betOneBtn;
+let betFiveBtn;
+let swapCardsBtn;
+let dealCardsBtn;
+
+let output;
+let input;
+
+// add images
+const image0 = document.createElement('img');
+const image1 = document.createElement('img');
+const image2 = document.createElement('img');
+const image3 = document.createElement('img');
+const image4 = document.createElement('img');
+image0.src = 'cardbacking.png';
+image1.src = 'cardbacking.png';
+image2.src = 'cardbacking.png';
+image3.src = 'cardbacking.png';
+image4.src = 'cardbacking.png';
+
+const initGame = () => {
+  // create overall container
+  overallContainer = document.createElement('div');
+  overallContainer.classList.add('overall-container');
+  document.body.appendChild(overallContainer);
+
+  // create card combination container
+  cardComboContainer = document.createElement('div');
+  // cardComboContainer.innerText = 'VIDEO POKER';
+  cardComboContainer.classList.add('card-combo-container', 'section');
+  overallContainer.appendChild(cardComboContainer);
+
+  // create card display container
+  gameContainer = document.createElement('div');
+  gameContainer.innerHTML = '♥♦ Video Poker ♠♣';
+  gameContainer.classList.add('game-container', 'section');
+  overallContainer.appendChild(gameContainer);
+
+  // create output container
+  outputContainer = document.createElement('div');
+  outputContainer.innerText = '💰PLACE YOUR BETS!💰';
+  outputContainer.classList.add('output-container', 'section');
+  overallContainer.appendChild(outputContainer);
+
+  // create status container
+  // tracks credits, bet amount
+  statusContainer = document.createElement('div');
+  statusContainer.classList.add('status-container', 'section');
+  statusContainer.innerText = 'Total Credits: 100';
+  overallContainer.appendChild(statusContainer);
+
+  // buttonsContainer
+  buttonsContainer = document.createElement('div');
+  buttonsContainer.classList.add('buttons-container');
+  overallContainer.appendChild(buttonsContainer);
+
+  // create bet one button
+  betOneBtn = document.createElement('button');
+  betOneBtn.classList.add('btn', 'betOneBtn');
+  betOneBtn.innerText = 'Bet One';
+  buttonsContainer.appendChild(betOneBtn);
+
+  // create bet five button
+  betFiveBtn = document.createElement('button');
+  betFiveBtn.classList.add('btn', 'betFiveBtn');
+  betFiveBtn.innerText = 'Bet Five';
+  buttonsContainer.appendChild(betFiveBtn);
+
+  // create deal cards button
+  dealCardsBtn = document.createElement('button');
+  dealCardsBtn.innerText = 'DEAL';
+  dealCardsBtn.classList.add('btn-deal-cards', 'btn', 'play');
+  buttonsContainer.appendChild(dealCardsBtn);
+  dealCardsBtn.disabled = true;
+
+  // create swap cards button
+  swapCardsBtn = document.createElement('button');
+  swapCardsBtn.innerText = 'SWAP';
+  swapCardsBtn.classList.add('btn-swap-cards', 'btn', 'play');
+  buttonsContainer.appendChild(swapCardsBtn);
+  swapCardsBtn.disabled = true;
+
+  /**
+   * Variables & functions that make the betting slider function
+   */
+  const rangeInput = document.querySelector('.input-bet');
+  const rangeOutput = document.querySelector('.output');
+
+  // add scoreBoard & card names DOING
+  const scoreBoardName = document.createElement('div');
+  scoreBoardName.classList.add('score-board', 'hand');
+  // scoreBoardName.innerText = 'Video Poker';
+  scoreBoardName.innerHTML =
+    'Royal Flush<br>Straight Flush<br>Four of a Kind<br>Full House<br>Flush<br>Straight<br>Three of a Kind<br>Two Pair';
+  cardComboContainer.appendChild(scoreBoardName);
+  const scoreBoard = document.createElement('div');
+  scoreBoard.classList.add('score-board');
+
+  ////////////////INPUT SLIDER (DEPRECIATED)
+  // // create input container, bet input and submit
+  // inputContainer = document.createElement('div');
+  // inputContainer.classList.add('input-container');
+  // buttonsContainer.appendChild(inputContainer);
+
+  /** removed input slider */
+  // bet input slider
+  // input = document.createElement('input');
+  // input.type = 'range';
+  // input.name = 'quantity';
+  // input.classList.add('input-bet');
+  // input.min = 0;
+  // input.max = 100;
+  // inputContainer.appendChild(input);
+  // // output for slider
+  // output = document.createElement('output');
+  // output.classList.add('output');
+  // output.setAttribute('for', 'quantity');
+  // inputContainer.appendChild(output);
+
+  /** logic for input slider */
+  // const outputDefaultState = () => {
+  //   rangeOutput.value = rangeInput.value;
+  // };
+  // rangeInput.addEventListener('input', function () {
+  //   rangeOutput.value = this.value;
+  // });
+  // document.addEventListener('DOMContentLoaded', function () {
+  //   outputDefaultState();
+  // });
+};
+
+initGame();
diff --git a/makeDeck.js b/makeDeck.js
new file mode 100644
index 00000000..5667b28d
--- /dev/null
+++ b/makeDeck.js
@@ -0,0 +1,98 @@
+/**
+ * function that makes a standard deck of cards
+ */
+const makeDeck = () => {
+  // 4 suits - diamond, clubs, heart, spades
+  // 13 cards per suit
+  // create a loop that generates 52 cards of 4 suits
+  let newDeck = [];
+  const suits = ['diamonds', 'clubs', 'hearts', 'spades'];
+  for (let i = 0; i < suits.length; i += 1) {
+    const suitSymbol = ['♦', '♣', '♥', '♠'];
+    let currentSuitSymbol = suitSymbol[i];
+
+    for (let j = 1; j < 14; j += 1) {
+      let cardSuits = suits[i];
+      let suitColor;
+      let cardName = j;
+      let currentDisplayName = j;
+
+      if (j === 1) {
+        cardName = 'ace';
+        currentDisplayName = 'A';
+      } else if (j === 11) {
+        cardName = 'jack';
+        currentDisplayName = 'J';
+      } else if (j === 12) {
+        cardName = 'queen';
+        currentDisplayName = 'Q';
+      } else if (j === 13) {
+        cardName = 'king';
+        currentDisplayName = 'K';
+      }
+      if (cardSuits === 'diamonds' || cardSuits === 'hearts') {
+        suitColor = 'red';
+      } else {
+        suitColor = 'black';
+      }
+      let currentCard = {
+        name: cardName,
+        suit: cardSuits,
+        rank: j,
+        color: suitColor,
+        suitSymbol: currentSuitSymbol,
+        displayName: currentDisplayName,
+      };
+      newDeck.push(currentCard);
+    }
+  }
+  return newDeck;
+};
+
+/**
+ * Function that shuffles the deck
+ * @param {array} deck array of deck
+ */
+const shuffleDeck = (cards) => {
+  for (let i = 0; i < cards.length; i += 1) {
+    let randomIndex = randomNumberGenerator(cards.length);
+    let currentCard = cards[i];
+    let randomCard = cards[randomIndex];
+    cards[i] = randomCard;
+    cards[randomIndex] = currentCard;
+  }
+  return cards;
+};
+
+/**
+ * function that gives a random number depending on deck size
+ * @param {number} deckLength length of deck
+ * @returns a random number from 0 - 51
+ */
+const randomNumberGenerator = (deckLength) => {
+  return Math.floor(Math.random() * deckLength);
+};
+
+/**
+ * function that takes a card object and returns a div to display card
+ * adds a function that saves the card to an array when clicked
+ * @param {object} cardInfo contains info of the attributes of 1 card
+ * @returns a card div containing the attributes of the  card
+ */
+const makeCard = (cardInfo) => {
+  const card = document.createElement('div');
+  const cardName = document.createElement('div');
+  const cardSuit = document.createElement('div');
+
+  card.classList.add('card');
+  cardName.classList.add('name', cardInfo.color);
+  cardSuit.classList.add('suit', cardInfo.color);
+
+  cardName.innerHTML = cardInfo.displayName;
+  cardSuit.innerHTML = cardInfo.suitSymbol;
+
+  card.appendChild(cardName);
+  card.appendChild(cardSuit);
+
+  return card;
+};
diff --git a/script.js b/script.js
new file mode 100644
index 00000000..5eb44ab2
--- /dev/null
+++ b/script.js
@@ -0,0 +1,291 @@
+/**
+ * Global variables
+ */
+let savedCardsArray = [];
+let userHand = [];
+let gameMode = 'bet';
+
+let betAmount = 0;
+
+const combosMet = {
+  royalFlush: 0,
+  straightFlush: 0,
+  quads: 0,
+  fullHouse: 0,
+  flush: 0,
+  straights: 0,
+  thriples: 0,
+  twoPair: 0,
+  pairs: 0,
+  highCard: 1,
+};
+
+let credits = 100;
+let deck = [];
+
+// An object that contains the points system of the game
+const comboPoints = {
+  // do differently
+  royalFlush: [250, 500, 750, 1000, 4000],
+  straightFlush: [50, 100, 150, 200, 250],
+  quads: [25, 50, 75, 100, 125],
+  fullHouse: [9, 18, 27, 36, 45],
+  flush: [6, 12, 18, 24, 30],
+  straights: [4, 8, 12, 16, 20],
+  thriples: [3, 6, 9, 12, 15],
+  twoPair: [2, 4, 6, 8, 10],
+  pairs: [0, 0, 0, 0, 0],
+  highCard: [0, 0, 0, 0, 0],
+};
+
+///////////////////////////////////
+// Calculate handscore functions //
+///////////////////////////////////
+
+/**
+ * function that sums returns the sum of the playing hand
+ * @param {array} cardHand the user's current playing hand
+ */
+
+const calcHandScore = (cardHand) => {
+  // biggest challenge faced
+  checkForStraight(cardHand);
+  checkForFlush(cardHand);
+  checkForRoyalFlush(cardHand);
+  quadsThriplesPairsFullHouse(cardHand);
+  checkForStraightFlush(cardHand);
+
+  checkIfHitCombo(); // logs the combo hit in console
+};
+
+const checkForRoyalFlush = (cardHand) => {
+  // check if suits are the same
+  let rank = cardHand.rank;
+
+  let ace = 0;
+  let king = 0;
+  let queen = 0;
+  let jack = 0;
+  let numTen = 0;
+
+  if (combosMet.flush === 1) {
+    // check if A, K, J, 10, 9 are in the hand (bruteforce)
+    for (let [i, { rank }] of Object.entries(cardHand)) {
+      if (rank === 1) {
+        ace = 1;
+      }
+      if (rank === 13) {
+        king = 1;
+      }
+      if (rank === 12) {
+        queen = 1;
+      }
+      if (rank === 11) {
+        jack = 1;
+      }
+      if (rank === 10) {
+        numTen = 1;
+      }
+    }
+    if (ace === 1 && king === 1 && queen === 1 && jack === 1 && numTen === 1) {
+      combosMet.royalFlush = 1;
+    }
+  }
+};
+
+const checkForStraightFlush = () => {
+  // check if straight and flush are true;
+
+  if (combosMet.straights === 1 && combosMet.flush === 1) {
+    combosMet.straightFlush = 1;
+  }
+};
+
+const checkForFlush = (cardHand) => {
+  // check if all the suits are the same
+  let suitTally = {};
+  for (const [i, { suit }] of Object.entries(cardHand)) {
+    // check if all the suits are the same
+    if (suit in suitTally) {
+      suitTally[suit] += 1;
+    } else {
+      suitTally[suit] = 1;
+    }
+  }
+  if (Object.keys(suitTally).length === 1) {
+    combosMet.flush = 1;
+    return true;
+  }
+};
+
+const checkForStraight = (cardHand) => {
+  // check if the cards are in running order
+
+  // sort the cards to be in descending order
+  const sortedHand = [...cardHand].sort((a, b) => b.rank - a.rank);
+  // console.log(sortedHand);
+
+  // loop through the sortedHand to check if the difference between
+  // each card is 1
+  let counter = 0;
+  for (let i = 0; i < sortedHand.length - 1; i += 1) {
+    if (sortedHand[i].rank - sortedHand[i + 1].rank === 1) {
+      counter += 1;
+      if (counter === 4) {
+        combosMet.straights = 1;
+      }
+    }
+  }
+};
+
+const quadsThriplesPairsFullHouse = (cardHand) => {
+  let cardTally = {};
+  for (const [i, { rank, suit }] of Object.entries(cardHand)) {
+    if (rank in cardTally) {
+      cardTally[rank] += 1;
+    } else {
+      cardTally[rank] = 1;
+    }
+  }
+  // console.log(cardTally);
+
+  let card4x = false;
+  let card3x = false;
+  let card2x = false;
+  let card3x2x = false;
+
+  // for (const i of Object.keys(cardTally)) {
+  let counterForPairs = 0;
+  for (const j of Object.values(cardTally)) {
+    console.log(j);
+    if (j === 4) {
+      card4x = true;
+    }
+    if (j === 2) {
+      card2x = true;
+      counterForPairs += 1;
+      if (counterForPairs === 2) {
+        combosMet.twoPair = 1;
+      }
+    }
+    if (j === 3) {
+      card3x = true;
+    }
+    if (card3x === true && card2x === true) {
+      card3x2x = true;
+    }
+  }
+  // }
+  if (card4x === true) {
+    combosMet.quads = 1;
+  } else if (card3x2x === true) {
+    combosMet.fullHouse = 1;
+  } else if (card3x === true) {
+    combosMet.thriples = 1;
+  } else if (card2x === true) {
+    combosMet.pairs = 1;
+  }
+  // console.log(
+  //   `card4x: ${card4x}, card3x: ${card3x}, card2x: ${card2x}, card3x2x: ${card3x2x}`
+  // );
+};
+
+/*
+const comboPoints = {
+  royalFlush: [250, 500, 750, 1000, 4000],
+  straightFlush: [50, 100, 150, 200, 250],
+  quads: [25, 50, 75, 100, 125],
+  fullHouse: [9, 18, 27, 36, 45],
+  flush: [6, 12, 18, 24, 30],
+  straights: [4, 8, 12, 16, 20],
+  thriples: [3, 6, 9, 12, 15],
+  twoPair: [2, 4, 6, 8, 10],
+  pairs: [0, 0, 0, 0, 0],
+  highCard: [0, 0, 0, 0, 0],
+}; */
+
+///////////////////////
+// create scoreboard //
+///////////////////////
+// create 5 boxes with scores for each bet (1-5). // what went well
+let index = 0;
+for (let i = 0; i < 5; i += 1) {
+  // create a div for each bet amt
+  const pointsBoard = document.createElement('div');
+  pointsBoard.classList.add('pointsBoard', `board${index}`);
+  cardComboContainer.appendChild(pointsBoard);
+  // iterate through the comboPoints obj
+  for (const [comboName, points] of Object.entries(comboPoints)) {
+    // skip iteration of pairs and highcard in comboPoints
+    if (comboName === 'pairs' || comboName === 'highCard') {
+    } else {
+      // add the points of that combo to the div
+      let pointsDisplay = points[index];
+      pointsBoard.innerHTML += `${pointsDisplay}<br>`;
+    }
+  }
+  index += 1;
+}
+
+//////////////////////
+// helper functions //
+//////////////////////
+
+/**
+ * function to check the highest ranked combo attained
+ * @returns the highest combo
+ */
+const bestComboAchieved = () => {
+  for (let [combo, j] of Object.entries(combosMet)) {
+    // check against combosMet obj in high to low rank
+    if (j === 1) {
+      // if any combo === 1, returns that combo
+      return combo;
+    }
+  }
+};
+
+/**
+ * function that determines the amt of credits to add
+ * @returns the amt of credits to add to user's current pool
+ */
+const calcPointsToAdd = () => {
+  // check which is the highest combo attained
+  const bestCombo = bestComboAchieved();
+  // console.log(`bestCombo: ${bestCombo}`);
+
+  // outputs the relevant text to HTML based on combo
+  if (bestCombo === 'highCard' || bestCombo === 'pairs') {
+    outputContainer.innerText = 'Aww, try again for another chance to win! 💔';
+  } else {
+    outputContainer.innerText = `You got ${bestCombo}, congrats! 🎉🍾🎊`;
+  }
+  // check betAmount
+  const bet = betAmount - 1;
+
+  // search the comboPoints object using combo name and betAmount as the array index
+  const pointsToAdd = comboPoints[bestCombo][bet];
+  // console.log(bestCombo);
+  // console.log(pointsToAdd);
+
+  // updates credits with winnings
+  credits += pointsToAdd;
+  return pointsToAdd;
+};
+
+/**
+ * function to update credits in HTML
+ */
+const updateCredits = (points) => {
+  const creditsContainer = document.querySelector('.status-container');
+  creditsContainer.innerText = `Total Credits: ${credits}`;
+};
+
+const checkIfHitCombo = () => {
+  console.log(combosMet);
+};
+
+/**
+ * creates deck and shuffles deck
+ */
+deck = shuffleDeck(makeDeck());
diff --git a/styles.css b/styles.css
new file mode 100644
index 00000000..c0a0ce74
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,129 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #736b5e;
+  font-family: monospace;
+  font-size: 1.15rem;
+}
+
+.overall-container {
+  max-width: 600px;
+  margin: 20px auto;
+  padding: 10px;
+  /* border: 3px solid black; */
+}
+
+.section {
+  display: flex;
+  background-color: darkgrey;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  margin: 20px auto;
+  padding: 10px;
+  border: 1px solid black;
+}
+
+.card-combo-container {
+  font-size: 1.1rem; /* changed from 3rem */
+  height: 250px; /* changed from 150px */
+  border: 3px solid darkred;
+  justify-content: space-around;
+  /* font-weight: bold; */
+}
+
+.game-container {
+  height: 250px;
+  /* width: 500px; */
+  background-color: darkgreen;
+  border-radius: 150px;
+  font-size: 3rem;
+  color: darkorange;
+  text-align: center;
+}
+
+.output-container {
+  height: 60px;
+  /* border: 3px solid darkred; */
+}
+/* 
+.score-board {
+  border: 3px solid orange;
+} */
+
+.btn {
+  /* border-radius: 20%; */
+  font-family: monospace;
+  cursor: pointer;
+  width: 90px;
+  height: 45px;
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.input-container {
+  display: inline-block;
+}
+
+.buttons-container {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.status-container {
+  font-size: 1rem;
+  /* border: 3px solid darkred; */
+}
+
+.card {
+  display: inline-block;
+  margin: 10px;
+  padding: 10px;
+  background-color: white;
+  border-radius: 15px;
+  border: 1px solid black;
+  text-align: center;
+  width: 50px;
+}
+
+.clicked {
+  border: 3px solid orange;
+}
+
+.suit {
+  margin: 5px;
+  font-size: 20px;
+  align-items: center;
+}
+
+.name {
+  margin: 5px;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.red {
+  color: red;
+}
+
+.black {
+  color: black;
+}
+
+.card:hover {
+  border: 3px solid orange;
+}
+
+.highLightBoard {
+  color: red;
+}
+
+img {
+  width: 50px;
+  border-radius: 5px;
+  margin: 10px;
+}
diff --git a/testHands.js b/testHands.js
new file mode 100644
index 00000000..8bca602a
--- /dev/null
+++ b/testHands.js
@@ -0,0 +1,9 @@
+const playerHand = [
+  { rank: 5, suit: 'hearts', name: '2' },
+  { rank: 13, suit: 'hearts', name: '2' },
+  { rank: 3, suit: 'hearts', name: '2' },
+  { rank: 6, suit: 'hearts', name: '2' },
+  { rank: 6, suit: 'hearts', name: '2' },
+];
+
+const pointsForHand = calcHandScore(playerHand);