Test your skills: Loops

Some of the questions below require you to write some DOM manipulation code to complete them — such as creating new HTML elements, setting their text contents to equal specific string values, and nesting them inside existing elements on the page — all via JavaScript.

We haven't explicitly taught this yet in the course, but you'll have seen some examples that make use of it, and we'd like you to do some research into what DOM APIs you need to successfully answer the questions. A good starting place is our DOM scripting introduction tutorial.

In our first looping task we want you to create a basic loop.

To complete the task:

1. Click "Play" in the code block below to edit the example in the MDN Playground.
2. Write a loop that iterates through all the items in the provided myArray and prints them out on the screen inside list items (<li> elements). They should be appended to the provided list.

If you make a mistake, you can clear your work using the Reset button in the MDN Playground. If you get really stuck, you can view the solution below the live output.

<section></section>

* {
  box-sizing: border-box;
}

p {
  color: purple;
  margin: 0.5em 0;
}

const myArray = ["tomatoes", "chick peas", "onions", "rice", "black beans"];
const list = document.createElement("ul");
const section = document.querySelector("section");
section.appendChild(list);

// Don't edit the code above here!

// Add your code here

// ...
// Don't edit the code above here!

for (let item of myArray) {
  const listItem = document.createElement("li");
  listItem.textContent = item;
  list.appendChild(listItem);
}

In this next task, we want you to write a simple program that, given a name, searches an array of objects containing names and phone numbers and, if it finds the name, outputs the name and phone number into a paragraph.

You are given three variables to begin with:

• name: Contains a name to search for.
• para: Contains a reference to a paragraph, which will be used to report the results.
• phonebook: Contains the phonebook entries to search.

To complete the task:

1. Click "Play" in the code block below to edit the example in the MDN Playground.
2. Write a loop that iterates through the (phonebook) array and searches for the provided name. You should use a type of loop that you've not used in the previous task.
3. If the name is found, write it and the associated number into the textContent of the provided paragraph (para), in the form "<name>'s number is <number>." After that, exit the loop before it has run its course.
4. If none of the objects contain the name, print "Name not found in the phonebook" into the textContent of the provided paragraph.

If you make a mistake, you can clear your work using the Reset button in the MDN Playground. If you get really stuck, you can view the solution below the live output.

const name = "Mustafa";
const para = document.createElement("p");

const phonebook = [
  { name: "Chris", number: "1549" },
  { name: "Li Kang", number: "9634" },
  { name: "Anne", number: "9065" },
  { name: "Francesca", number: "3001" },
  { name: "Mustafa", number: "6888" },
  { name: "Tina", number: "4312" },
  { name: "Bert", number: "7780" },
  { name: "Jada", number: "2282" },
];

const section = document.querySelector("section");
section.appendChild(para);

// Don't edit the code above here!

// Add your code here

// ...
// Don't edit the code above here!

for (let i = 0; i < phonebook.length; i++) {
  if (phonebook[i].name === name) {
    para.textContent = `${phonebook[i].name}'s number is ${phonebook[i].number}.`;
    break;
  }

  if (i === phonebook.length - 1) {
    para.textContent = "Name not found in the phonebook";
  }
}

In this final task, you will test every number from 500 down to 2 to see which ones are prime numbers, using the provided test function, printing out the primes.

You are provided with the following:

• i: Starts off with a value of 500; intended to be used as an iterator.
• para: Contains a reference to a paragraph, which will be used to report the results.
• isPrime(): A function that, when passed a number, returns true if the number is a prime number, and false if not.

To complete the task:

1. Click "Play" in the code block below to edit the example in the MDN Playground. You should use a type of loop that you've not used in the previous two tasks.
2. Write a loop that iterates through every number from 500 down to 2 (1 is not counted as a prime number), and runs the provided isPrime() function on each one.
3. For each number that isn't a prime number, continue on to the next loop iteration. For each one that is a prime number, add it to the paragraph's textContent along with some kind of separator.

If you make a mistake, you can clear your work using the Reset button in the MDN Playground. If you get really stuck, you can view the solution below the live output.

let i = 500;
const para = document.createElement("p");
const section = document.querySelector("section");
function isPrime(num) {
  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return true;
}
// Don't edit the code above here!

// Add your code here

// Don't edit the code below here!

section.appendChild(para);

// ...
// Don't edit the code above here!

do {
  if (isPrime(i)) {
    para.textContent += `${i}, `;
  }
  i--;
} while (i > 1);

// Don't edit the code below here!
// ...