Fruit Thief

UNSHIFT / SPLICE Array Method practice

by trentHarlem

HTML

<p>Click the button to "remove elements from the array". You know... Like a Crime...</p>

<button onclick="fruitThief()">Snatch fruit</button>

<p id="fruits"></p><br>
<p id="snatched"></p>

CSS

body,html {
  background-color: dodgerblue;
  font-family: system-ui;
}
button {
  cursor: grab;
}

JavaScript

// .splice (index start position, # of indexs to be removed, followed by items to add in any)
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Grapes", "Pears"];
const fruitDisplay = document.getElementById("fruits")
const snatched = document.getElementById("snatched")
fruitDisplay.innerHTML = `'Fruits' ${fruits}`;
snatched.innerHTML += `'Snatched!'`
let snatch = []

function fruitThief() {
  //fruits.splice(0, 1,)
  let items = fruits.splice(0, 2,);
  snatch.unshift(items)
  //snatch.unshift(fruits[0])
  //fruits.shift()
  //fruits.pop()
  fruitDisplay.innerHTML = `'Fruits' ${fruits}<br>`;
  snatched.innerHTML = `'Snatched!' ${snatch}`;
  if (fruits.length === 0) {
    fruitDisplay.innerHTML = 'STOP THIEF!'
    snatched.innerHTML = 'RUN!!!'
  }
}