Goal: Practice using Array.prototype.forEach() to solve the problems below.

Remember, understanding is the goal here. You're absolutely not expected to complete everything listed on this page. In fact, there is often intentionally more content than can reasonably be completed in a single day. (This allows students an opportunity to later review concepts without having to repeat exercises they've previously done). Focus on understanding the concepts, not on speed.

Code

---

Groceries

• Create a form that allows a user to input items they need at the store.
• When the user submits the form, hide the form and display the list of items in alphabetical order, all uppercased.

Hint: To do this, build an array of the inputted items. (Make sure you don't include any blank fields.) Sort the array in alphabetical order. Make a new array with each entry uppercased (don't just uppercase them when you display them). Then, display the sorted list of things as list items inside a <ul>.

Explore the arrays entry of the Mozilla Developer Network JavaScript documentation to research what method might be used to sort arrays.

Word Play

• Create a form where users may enter a sentence.
• Turn that sentence into an array using the split method.
• Then, loop through this array to build a new array out of every word in the sentence that is 3 or more characters in length.
• Finally, reverse the order of the new array, join it back together into a string, and display it to the user.

Build a Deck

• Use a Array.prototype.forEach() loop within another Array.prototype.forEach() loop to build an array representing a deck of cards. A deck consists of 52 cards - 13 ranks in each of 4 suits.
• Then display a list of every card in the deck. (Hint: Each element of the array should read something like "ace of spades" or "4 of hearts".)

The start of your output should look something like this:

Further Exploration

Word Order

Create a website that lets users input a block of text. The application will then return a list of all the unique words and how many times they appeared.

For example, if the user inputs "hello world world", the page should show:

• hello 1
• world 2

If you finish, and feel comfortable with Array.prototype.forEach() loops, try to complete the above exercise but instead order the list by the number of appearances - greatest to least. This is challenging - but a great way to exercise your problem-solving skills.

Further challenge: for words that appear the same amount of times, order by which word appeared first.

Peer Code Review

---

• Is the JavaScript business logic separate from the user interface logic?
• Are variable names descriptive and easy to understand?
• Is code properly indented throughout?
• Are loops being used correctly? What about mapping?