app.js

console.log("howdy")

let secretCode = '🍕🍕🍱🍳🍢'
let string = ''
let inputElement = document.getElementById("user-input")
let secretImgElement = document.getElementById("secret-img")
console.log('inputElement', inputElement)
// console.warn(secreteCode == string)

function clickPizza() {
  string += '🍕'
  console.log('☝️🍕')
  drawUserInputString()
}


function clickBento() {
  string += '🍱'
  console.log('☝️🍱')
  drawUserInputString()
}

// NOTE foodItem is a parameter. A Block Scoped variable to this function that has no value
// foodItem doesn't have a value until it's called
// onclick="clickFoodButton('🫔')" : foodItem = '🫔'
function clickFoodButton(foodItem) {
  string += foodItem
  console.log('☝️', foodItem)
  drawUserInputString()
}




function checkCode() {
  console.warn(secretCode == string)
  // the comparison creates a BOOL for the if to check
  // True runs the block
  // False skips the block
  if (secretCode == string) {
    console.log("It's TRUE")
    secretImgElement.classList.remove('d-none')
    // secretImgElement.classList.add('d-none')
  } else {
    console.log("Else False")
    string = ''
    drawUserInputString()
  }
  // ! is NOT, so these are NOT equal
  // if (secreteCode !== string) {
  //   console.log("It's FALSE")
  // }
}



function drawUserInputString() {
  console.log("current user string", string)
  inputElement.innerText = string
}