» CS 347: Lab 15 – The People’s Dictionary Continued

CS 347: Lab 15 – The People’s Dictionary Continued

October 6, 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 files into Crowdsource in order to receive credit.

Task 1

Your first task in this lab is to sketch out the interface of a dictionary app that consumes the web service you started last time. The client should do at least the following:

Show a simple text input field for entering a search term.
When the user hits Enter/Return in the input field, the dictionary is searched.
The results from a search should be rendered as a definition list, with its definitions in an ordered list. The word should be prominent. Each definition should show its like count and a delete button for that definition. Additionally, the user must offered a way to add a new definition.

Show your sketch to your instructor before moving on.

Task 2

Your second task in this lab is to implement your client using HTML, CSS, and JavaScript.

After you get this core functionality working, add these extra features:

As the user enters text in the input field, each input event should schedule a search of the dictionary service to be executed in 500 milliseconds. Any previously scheduled but incomplete search should first be canceled.
Instead of showing the definitions on input events, use the words of the search result to automatically suggest matching words from the dictionary. Investigate datalist as a vehicle for defining possible matches. Its content will have to be dynamically populated.

TODO

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

Read the chapter Sharing a Database in All Over the Web. Be sure to follow along with the code samples. Recreate each exercise yourself.
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.
Start thinking about your API for project 2, which will be due around the end of October.

See you next time.

Sincerely,