» CS 347: Lab 12 – Rhyme Search

CS 347: Lab 12 – Rhyme Search

October 4, 2021 by Chris Johnson. Filed under fall-2021, labs, webdev.

Dear students:

Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as much of the task below as you can. At the end of our time together, paste your HTML files into Crowdsource in order to receive credit.

Task 1

Reverse engineer the following page, which generates a list of rhymes as the user types:

Follow these guidelines in your solution:

Query for rhymes using Rhymebrain’s API. Ignore the form at the top of the page. Skip down to the section labeled RhymeBrain.com Advanced Access. The Rhyming box shows you how to access the endpoint and interpret the JSON it sends back.
Present the words in the order they are returned from Rhymebrain.
Size each word accordings to its score. Set the size directly using a style assignment and an arithmetic expression. Do not use classes.
Ensure the words all sit on the same baseline.
Notice there’s no button to trigger the search. If the user types Enter (or Return) in the input, which you can detect in a keydown event, fire off an immediate retrieval of the rhymes.
Create and attach new elements to the DOM directly. Avoid using innerHTML. This forces the browser to do an unnecessary parsing step.

Once you get this functionality working, complete this extra challenge:

Instead of waiting for the user to hit Enter/Return, schedule the rhymes to be pulled down 1 second after an input event. If another input happens before the retrieval task fires, cancel the previously scheduled task and schedule a new one for the new word. setTimeout is useful for scheduling tasks to run in the future.

What rhymes with future?

TODO

The next step of your learning is to complete the following tasks:

Read the chapter Server-side Scripting in All Over the Web. Be sure to follow along to the code samples. Recreate each exercise yourself.
Complete your peer reviews before the end of Tuesday.
Fix any issues identifier by your peers before the end of Thursday.
Research some aspect of web development on your own. Find articles and videos beyond what’s assigned. Summarize what you learn in a couple paragraphs of your own words and a snippet of source code in your next blog entry before Friday morning. Clearly put the date of the blog entry on your index page. If any of the requirements is not met, you will not receive full credit.

See you next time.

Sincerely,