DEV Community: benoah

stripe out the data and store them in variabels

benoah — Wed, 27 Apr 2022 16:13:24 +0000

CHALLENGE

-Strip out the data (element id, name, avatar,
health and dice score) and store them in variables

Write a renderCharacter() function that accepts the 5 new variables as paramaters and renders out a character with this data
Call renderCharacter() twice. Once with the hero variables and once with the monster variables to that both are rendered

const heroElementId = "hero"
const heroName = "Wizard"
const heroAvatar = "images/wizard.png"
const heroHealth = "60"
const heroDiceRoll = 6

const monsterElementId = "monster"
const monsterName = "Orc"
const monsterAvatar = "images/orc.png"
const monsterHealth = "10"
const monsterDiceRoll = 4

function renderCharacter(elementId, name, avatar, health, diceRoll){
  document.getElementById(elementId).innerHTML = 
    `<div class="character-card">
        <h4 class="name"> ${name} </h4>
        <img class="avatar" src="${avatar}"/>
        <p class="health">health: <b> ${health}</b></p>
        <div class="dice-container"><div class="dice"> ${diceRoll} </div></div>
    </div>`;   
}

renderCharacter(heroElementId, heroName, heroAvatar, heroHealth, heroDiceRoll)
renderCharacter(monsterElementId, monsterName, monsterAvatar, monsterHealth, monsterDiceRoll

Rendering

benoah — Wed, 27 Apr 2022 16:09:27 +0000

Challenge

Take the hard-coded HTML, bring it into index.js and then inject it back into its div with js.

const heroDiv = document.getElementById('hero')

heroDiv.innerHTML = `
    <div class="character-card">
        <h4 class="name"> Wizard </h4>
        <img class="avatar" src="images/wizard.png"/>
        <p class="health">health: <b> 60 </b></p>
        <div class="dice-container"><div class="dice"> 6 </div></div>
    </div>   
`

We can also do it this way :

document.getElementById('hero').innerHTML = `
    <div class="character-card">
        <h4 class="name"> Wizard </h4>
        <img class="avatar" src="images/wizard.png"/>
        <p class="health">health: <b> 60 </b></p>
        <div class="dice-container"><div class="dice"> 6 </div></div>
    </div>

How to build Blackjack

benoah — Thu, 02 Dec 2021 15:00:44 +0000

Did use js,html and some css to build a blackljack game.

// object
let player = {
  name: "ben",
  chips: 200,
  sayHello: function () {
    console.log("Heisann!");
  },
};

player.sayHello();

let cards = []; // array -ordered list of item
let sum = 0;
let hasBlackJack = false;
let isAlive = false;
let message = "";

let messageEl = document.getElementById("message-el");
let sumEl = document.querySelector("#sum-el");
let cardsEl = document.querySelector("#cards-el");

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

// Create a function, getRandomCard(), that always returns the number 5

// FLOR REMOVE DECIMALS

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

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? 🙂";
  } else if (sum === 21) {
    message = "Wohoo! You've got Blackjack! 🥳";
    hasBlackJack = true;
  } else {
    message = "You're out of the game! 😭";
    isAlive = false;
  }
  messageEl.textContent = message;
}

function newCard() {
  // Only allow the player to get a new card if she IS alive and does NOT have Blackjack
  if (isAlive === true && hasBlackJack === false) {
    let card = getRandomCard();
    sum += card;
    cards.push(card);
    renderGame();
  }
}

    ```

What I did learn from Scrimba Js Course

benoah — Thu, 02 Dec 2021 14:51:24 +0000

After been taking some time from coding Js I needed to go back to the fundamentals.

I started to build a blackjack with help from the tutorial and did learn how to work with math.floor() and math.random().

What is The Math.floor() its a method that rounds a number down to the nearest integer, and returns the result.And Math.random() method returns a random number from 0 (inclusive) up to but not including 1 (exclusive).

Both of them have a value can be important too generate Auth and also be used in Casino games and etc

Here is a code example:

function getRandomCard() {
  // if 1     -> return 11
  // if 11-13 -> return 10
  let randomNumer = Math.floor(Math.random() * 13) + 1;
  if (randomNumer > 10) {
    return 10;
  } else if (randomNumer === 1) {
    return 11;
  } else {
    return randomNumer;
  }
}
    ```