Skip to content

Instantly share code, notes, and snippets.

@acidtone

acidtone/README.md

Last active February 15, 2022 13:02
Show Gist options
  • Save acidtone/24877bf2188f79d8b963116eed7449f5 to your computer and use it in GitHub Desktop.
Save acidtone/24877bf2188f79d8b963116eed7449f5 to your computer and use it in GitHub Desktop.
Download ZIP
JS Activity: for loop - Create a grammatically list of nouns
Raw
README.md

JS Activity: for loop - Create a comma-separated list of nouns

In this activity, you will generate a comma-separated list of nouns and display it on a web page.

For example, this array:

const nouns = [`one`, `two`, `three`];

Should be display on the page as a sentence in the following format:

One, Two and Three.

Instructions

  1. Declare an empty string variable named output or similar.
  2. Create a for loop so that i iterates through each index of the array:
    • initialized at i = 0;
    • increments by one with each iteration;
    • stops after i equals Array.length - 1.
  3. Inside the for loop, use the output variable and the addition assignment operator (+=) (or another method of your choice) to create a comma-separated of nouns so that (for example):
    • the first character of each noun is capitalized;
    • each noun is separated by a comma;
    • the last noun is separated by the word and.
  4. Finally, after the for loop finishes, use Element.innerHTML to assign your output string to a paragraph element.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List of Items</title>
<link rel="stylesheet" href="main.css">
<script src="nouns-list.js" defer></script>
</head>
<body>
<h1>List of Items</h1>
<p class="nouns">[noun list here]</p>
</body>
</html>
Raw
nouns-list.js
const nouns = [
"bush",
"shovel",
"cave",
"mouth",
"shell",
"tear",
"razor",
"nest",
"pad",
"fear",
"prize",
"power",
"pocket",
"cane",
"pump",
"mask",
"junk",
"kiss",
"photo",
"shower",
"slide",
"freedom"
];
// 1. Declare an empty string variable named output or similar.
// 2. Create a for loop that iterates through the above array.
// 3. Inside the for loop, build the output string using the addition assignment (+=) operator.
// 4. After the loop finishes, assign your output string to a paragraph element using `Element.innerHTML`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment