Exercise Set 12

Exercise 1 of 6

Watch the dictionary video. Add the fruit and number to the dictionary when the button is clicked.

HTML

<input type="text" placeholder="fruit" value="apple" id="addFruitInput">
<input type="text" placeholder="number" value="2" id="addNumberInput">
<button id="addButton">Add fruit</button>
<p id="addParagraph">Fruits: {}</p>

JavaScript

let addFruitInput = document.getElementById(`addFruitInput`)
let addNumberInput = document.getElementById(`addNumberInput`)
let addButton = document.getElementById(`addButton`)
let addParagraph = document.getElementById(`addParagraph`)

let fruits = {}

addButton.addEventListener(`click`, addFruit)

function addFruit() {
  // your code will appear here
  addParagraph.innerHTML = `Fruits: ${JSON.stringify(fruits)}`
}

Your code

Test your code

Fruits: {}

Exercise 2 of 6

Show the number of the specified fruit when the button is clicked.

HTML

<input type="text" placeholder="fruit" value="apple" id="showFruitInput">
<button id="showButton">Show number of fruit</button>
<p id="showParagraph"></p>

JavaScript

let showFruitInput = document.getElementById(`showFruitInput`)
let showButton = document.getElementById(`showButton`)
let showParagraph = document.getElementById(`showParagraph`)

let fruits = {
  apple: 2,
  orange: 3,
  banana: 5
}

showButton.addEventListener(`click`, showFruit)

function showFruit() {
  // your code will appear here
}

Your code

Test your code

Exercise 3 of 6

Write a condition to check if the fruit is not in the dictionary.

HTML

<input type="text" placeholder="fruit" value="strawberry" id="checkFruitInput">
<button id="checkButton">Check fruit in dictionary</button>
<p id="checkParagraph"></p>

JavaScript

let checkFruitInput = document.getElementById(`checkFruitInput`)
let checkButton = document.getElementById(`checkButton`)
let checkParagraph = document.getElementById(`checkParagraph`)

let fruits = {
  apple: 2,
  orange: 3,
  banana: 5
}

checkButton.addEventListener(`click`, checkFruit)

function checkFruit() {
  if (// your code will appear here) {
    checkParagraph.innerHTML = `That fruit is not in the dictionary`
  }
  else {
    checkParagraph.innerHTML = `That fruit is in the dictionary`
  }
}

Your code

Test your code

Exercise 4 of 6

Increase the fruit number by 1 when the button is clicked.

HTML

<input type="text" placeholder="fruit" value="apple" id="increaseFruitInput">
<button id="increaseButton">Increase fruit</button>
<p id="increaseParagraph">Fruits: {"apple":2,"orange":3,"banana":5}</p>

JavaScript

let increaseFruitInput = document.getElementById(`increaseFruitInput`)
let increaseButton = document.getElementById(`increaseButton`)
let increaseParagraph = document.getElementById(`increaseParagraph`)

let fruits = {
  apple: 2,
  orange: 3,
  banana: 5
}

increaseButton.addEventListener(`click`, increaseFruit)

function increaseFruit() {
  // your code will appear here
  increaseParagraph.innerHTML = `Fruits: ${JSON.stringify(fruits)}`
}

Your code

Test your code

Fruits: {"apple":2,"orange":3,"banana":5}

Exercise 5 of 6

Write a for...in loop to show every fruit and number of fruits.

HTML

<button id="fruitsButton">Show fruits</button>
<div id="fruitsDiv"></div>

JavaScript

let fruitsButton = document.getElementById(`fruitsButton`)
let fruitsDiv = document.getElementById(`fruitsDiv`)

let fruits = {
  apple: 2,
  orange: 3,
  banana: 5
}

fruitsButton.addEventListener(`click`, showFruits)

function showFruits() {
  fruitsDiv.innerHTML = ``

  for (// your code will appear here) {
    let fruitParagraph = document.createElement(`p`)
    fruitParagraph.innerHTML = `${fruit}: ${fruits[fruit]}`
    fruitsDiv.appendChild(fruitParagraph)
  }
}

Your code

Test your code

Exercise 6 of 6

Show every capital when the button is clicked.

HTML

<button id="capitalsButton">Show capitals</button>
<div id="capitalsDiv"></div>

JavaScript

let capitalsButton = document.getElementById(`capitalsButton`)
let capitalsDiv = document.getElementById(`capitalsDiv`)

let states = {
  California: `Sacramento`,
  Oregon: `Salem`,
  Washington: `Olympia`
}

capitalsButton.addEventListener(`click`, showCapitals)

function showCapitals() {
  capitalsDiv.innerHTML = ``

  for (let state in states) {
    let capitalParagraph = document.createElement(`p`)
    // your code will appear here
    capitalsDiv.appendChild(capitalParagraph)
  }
}

Your code

Test your code