teaching machines

CS 347: Lab 16 – Acrostic Generator

October 27, 2020 by Chris Johnson. Filed under fall-2020, labs, webdev.

Welcome to lab. By now you have already watched the lecture videos on your own. Now we will apply the ideas from those videos in an exercise, which you will complete in small groups.

Within your breakout room, designate one of your team to be the screen sharer. Screen sharer, share your screen and claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number.

Team, complete the assigned task below. Screen sharer, be careful not to dominate. All members should contribute ideas.

Task

Screen sharer, follow these steps:

1. Visit this lab’s repl on repl.it.
2. Log in.
3. Click Fork to make a copy of the repl that you and your team can edit.
4. Click Share and copy the join link to your room’s chat.

All team members should join the repl.

Reverse engineer the following app in your repl:

Follow these guidelines in your solution:

• Use just two components: the existing App component and a new component named Row.
• The Row component is responsible for a single row of the acrostic. It has no state. The text the user types in appears, but nothing is done with it.
• The App component is responsible for the theme input, the clear button, and a collection of Row instances.
• The App manages a single piece of state: the theme of the acrostic.
• Only after the core functionality is in place should you try to match the style.

Screen sharer, when your group is done or when time is up, submit your group’s repl URL on Crowdsource.