Exercise Set 12

Exercise 1 of 6

Watch the dictionary video. Add the definition to the dictionary when the button is clicked.

HTML

<input type="text" placeholder="word" value="elephant" id="wordInput">
<input type="text" placeholder="definition" value="a big animal" id="definitionInput">
<button id="addWordButton">Add word</button>
<p id="wordParagraph"></p>

JavaScript

var wordInput = document.getElementById("wordInput");
var definitionInput = document.getElementById("definitionInput");
var addWordButton = document.getElementById("addWordButton");
var wordParagraph = document.getElementById("wordParagraph");

var dictionary = {};

addWordButton.addEventListener("click", addWord);

function addWord() {
  // your code will appear here
  wordParagraph.innerHTML = wordInput.value + ": " + dictionary[wordInput.value];
}

You must be signed in to type your code.

Exercise 2 of 6

Show the definition from the dictionary when the button is clicked.

HTML

<input type="text" placeholder="word" value="giraffe" id="wordInput2">
<input type="text" placeholder="definition" value="a tall animal" id="definitionInput2">
<button id="addWordButton2">Add word</button>
<p id="wordParagraph2"></p>

JavaScript

var wordInput2 = document.getElementById("wordInput2");
var definitionInput2 = document.getElementById("definitionInput2");
var addWordButton2 = document.getElementById("addWordButton2");
var wordParagraph2 = document.getElementById("wordParagraph2");

var dictionary2 = {};

addWordButton2.addEventListener("click", addWord2);

function addWord2() {
  dictionary2[wordInput2.value] = definitionInput2.value;
  // your code will appear here
}

You must be signed in to type your code.

Exercise 3 of 6

Write a condition to check if the word is in the dictionary.

HTML

<input type="text" placeholder="word" value="elephant" id="wordInput3">
<button id="checkWordButton">Check word</button>
<p id="resultParagraph"></p>

JavaScript

var wordInput3 = document.getElementById("wordInput3");
var checkWordButton = document.getElementById("checkWordButton");
var resultParagraph = document.getElementById("resultParagraph");

var dictionary3 = {
  elephant: "a big animal",
  giraffe: "a tall animal"
};

checkWordButton.addEventListener("click", checkWord);

function checkWord() {
  if (// your code will appear here) {
    resultParagraph.innerHTML = "The word " + wordInput3.value + " is in the dictionary.";
  }
  else {
    resultParagraph.innerHTML = "The word " + wordInput3.value + " is not in the dictionary.";
  }
}

You must be signed in to type your code.

Exercise 4 of 6

Write a for...in loop to show the words from the dictionary.

HTML

<button id="showWordsButton">Show words</button>
<div id="wordsDiv"></div>

JavaScript

var showWordsButton = document.getElementById("showWordsButton");
var wordsDiv = document.getElementById("wordsDiv");

var dictionary4 = {
  elephant: "a big animal",
  giraffe: "a tall animal",
  monkey: "a smart animal"
};

showWordsButton.addEventListener("click", showWords);

function showWords() {
  wordsDiv.innerHTML = "";

  for (// your code will appear here) {
    var wordParagraph = document.createElement("p");
    wordParagraph.innerHTML = word + ": " + dictionary4[word];
    wordsDiv.appendChild(wordParagraph);
  }
}

You must be signed in to type your code.

Exercise 5 of 6

Watch the creating object video. Show the square feet of the house when the button is clicked.

HTML

<button id="showSquareFeetButton">Show square feet</button>
<p id="squareFeetParagraph"></p>

JavaScript

var showSquareFeetButton = document.getElementById("showSquareFeetButton");
var squareFeetParagraph = document.getElementById("squareFeetParagraph");

var house = {
  numBedrooms: 4,
  numBathrooms: 3,
  squareFeet: 2000
};

showSquareFeetButton.addEventListener("click", showSquareFeet);

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

You must be signed in to type your code.

Exercise 6 of 6

Show the city of the house when the button is clicked.

HTML

<button id="showCityButton">Show city</button>
<p id="cityParagraph"></p>

JavaScript

var showCityButton = document.getElementById("showCityButton");
var cityParagraph = document.getElementById("cityParagraph");

var house2 = {
  numBedrooms: 4,
  numBathrooms: 3,
  squareFeet: 2000,
  address: {
    street: "123 Main St",
    city: "Sacramento",
    state: "CA"
  }
};

showCityButton.addEventListener("click", showCity);

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

You must be signed in to type your code.