Dictionary

Level 4

Lesson

Exercise 1

Exercise 2

Let's say you have a fruit warehouse. To track how many of each fruit you have, use a dictionary. Example of making an empty dictionary and adding three items to it:

let fruits = {}

fruits[`apple`] = 2
fruits[`orange`] = 3
fruits[`banana`] = 5

Each fruit is called a key, and the number of that fruit is called a value. Together these are called key-value pairs. Example of getting the number of apples from the dictionary:

fruits[`apple`]

Example of incrementing the number of apples in the dictionary:

fruits[`apple`] += 1

To loop through a dictionary, use a for...in loop. Example of showing every key and value in the dictionary:

for (let fruit in fruits) {
  console.log(fruit, fruits[fruit])
}

Exercise 1 of 6

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

Last section Next section