The aim this laboratory is to familiarise yourself with AJAX and jQuery.
Work through the W3Schools AJAX tutorial and then the W3Schools JQuery tutorial.
By now you should have a webpage that allows a user to make guesses at a hidden word. In this exercise you should replace the hidden word in javascript (which is easy to find in the source code), with a hidden word on the server.
If you put the url https://drtnf.net/wordle_guess?guess=GUESS into your browser address bar,
your browser should display a JSON object with one field, outcome which is an array of five integers,
0 (meaning the ith letter is not present), 1 (meaning the ith letter is misplaced) or 2 (meaning the ith letter is correct).
You will need to use javascript to send a HTTP GET request to the address (replaceing GUESS with the user's guess),
extract the array from the response, and use the array to render your HTML.
To assist with debugging, the secret word changes every two minutes.
You can access the time remaining by sending a HTTP GET request to https://drtnf.net/wordle_time_left
which will return a JSON object with a single field time_left which is the number of second remaining until the word changes.
AJAX requires a webserver to run. Down the track, we will use Flask to create and serve web applications, but for now,
we will use the VSCode extension Live Server.
Live Server runs a small web server on your computer, and will host and serve the code you develop in
VSCode.
Set up live server in your VSCode environment, and then try working through the more advanced AJAX tutorial below.
A more advance AJAX tutorial is available that walks you through applying AJAX with JQuery. Work through these exercises.