app.js

//  💾DATA ------------------------------------------------------------
let animals = [
  {
    name: 'Ozzy',
    picture: '🦇',
    location: '🌲forest'
  },
  {
    name: 'Oslo',
    picture: '🦧',
    location: '🌲forest'
  },
  {
    name: 'Dr. Strange',
    picture: '🦒',
    location: '🌵desert'
  },
  {
    name: 'Tiny',
    picture: '🦏',
    location: '💦water'
  },
  {
    name: 'Scampi',
    picture: '🦐',
    location: '💦water'
  },
  {
    name: 'Kowalski',
    picture: '🐧',
    location: '⛄arctic'
  },
  {
    name: 'Thud',
    picture: '🦃',
    location: '🌋mtdoom'
  },
]

// 🧠⚡ LOGIC (functions that change data)---------------------------------

function calculateAnimalCountByLocation(desiredLocation) {
  console.log('🧮', desiredLocation)
  // debugger
  let animalCount = 0
  animals.forEach((animal) => {
    // debugger
    if (animal.location == desiredLocation) {
      console.log('in ', animal)
      animalCount += 1
    }
  })
  console.log('🔢', animalCount);
  return animalCount // return gives a *result* BACK to the function "caller"
}


function PARTY() {
  let partyLocations = ['🌲forest', '💦water', '🌋mtdoom', '🌵desert', '⛄arctic']
  animals.forEach((animal) => {
    let randomPosition = Math.floor(Math.random() * 5)
    animal.location = partyLocations[randomPosition]
  })
  drawAnimalsForLocation('🌲forest')
  drawAnimalsForLocation('🌵desert')
  drawAnimalsForLocation('💦water')
  drawAnimalsForLocation('⛄arctic')
  drawAnimalsForLocation('🌋mtdoom')
}


// 🎨🖌️ VISUALIZATIONS (functions that "draw" data to the screen)--------

let forestAnimalsElement = document.getElementById('🌲forest-animals')
let desertAnimalsElement = document.getElementById('🌵desert-animals')
let waterAnimalsElement = document.getElementById('💦water-animals')
let arcticAnimalsElement = document.getElementById('⛄arctic-animals')

function drawForestAnimals() {
  // create a "sub" array of animals that only have "forest" animals
  let forestAnimals = animals.filter((animal) => animal.location === '🌲forest')
  console.log('🌲', forestAnimals);

  // iterate over the sub array and draw it to the page
  forestAnimals.forEach((animal) => {
    console.log(animal.picture)
    forestAnimalsElement.innerHTML += `<span title="${animal.name}">${animal.picture}</span>`
  })

  // NOTE this doesn't work well with arrays that may change in size
  // forestAnimalsElement.innerHTML += `<span>${forestAnimals[0].name}</span>`
  // forestAnimalsElement.innerHTML += `<span>${forestAnimals[1].name}</span>`
}

function drawDesertAnimals() {
  // step 1 - get the animals in the desert
  let desertAnimals = animals.filter((animal) => animal.location === '🌵desert')
  console.log('🌵', desertAnimals)
  // step 2 - iterate over desert animals
  desertAnimals.forEach((animal) => {
    console.log(animal.picture)
    desertAnimalsElement.innerHTML += `<span title="${animal.name}">${animal.picture}</span>`
  })
  // step 2.5 - inside loop, add animals to page
}

// desiredLocation will be one of the locations are animals are at, this will be passed when the function runs = drawAnimalsForLocation('🌲forest') - draws the forest animals to the forest element
function drawAnimalsForLocation(desiredLocation) {
  console.log('🖌️ drawing for locations', desiredLocation)
  let desiredAnimals = animals.filter((animal) => animal.location == desiredLocation)
  console.log('✈️', desiredAnimals)
  console.log('getting element:', desiredLocation + '-animals')

  // NOTE we don't know which element we want to draw into when defining the function so we have to get it when the function runs
  let desiredElement = document.getElementById(desiredLocation + '-animals')
  let countElement = document.getElementById(desiredLocation + '-count')
  // debugger

  desiredElement.innerHTML = '' // dont forget to empty the element before you draw into it
  desiredAnimals.forEach((animal) => {
    console.log(animal.picture)
    desiredElement.innerHTML += `<span title="${animal.name}">${animal.picture}</span>`
  })
  // debugger
  // taking the desiredLocation from our own parameter and passing it along to out calculate function
  // we then capture the *return* result from our calculate and put it on the page
  let animalCount = calculateAnimalCountByLocation(desiredLocation)
  countElement.innerText = `${animalCount}`

}

// drawForestAnimals()
// drawDesertAnimals()
drawAnimalsForLocation('🌲forest')
drawAnimalsForLocation('🌵desert')
drawAnimalsForLocation('💦water')
drawAnimalsForLocation('⛄arctic')
drawAnimalsForLocation('🌋mtdoom')