Exercise 3: JavaScript

The aims of this lab are:

Start working on your Project layout

Decide on the key pages of your site, design the layout and navigation flow. You can scatch this on a piece of paper first and feel free to consult with your lab facilitator.


Getting started with JavaScript

Work through the W3Schools Javascript tutorial. There is a lot there, and you can skip some sections, but you should do most of the exercises up to the Forms topic. You should also come back to this tutorial as we go through the semester as the later sections will help with some of our more advanced material.

You can experiment with basic JS functions and commands in either the console of a webpage (see Lab 0: Dev Environment; Get to know your browsers), or by running a NodeJS server.

Making a Wordle clone

Write a JavaScript function function wordle(target, guess) with the following specification: The function should take two five letter words and report which of the of the letters in guess appear in the word in the correct location, which latters appear in the word in a different location, and which letters do not appear in the word. It should print an error message if both words do not have five letters, or are otherwise the incorrect type. For example:
wordle(scope, scoop) should produce the output:
The first letter is in the correct position, the second letter is in the correct position, the third letter is in the correct position, the fourth letter doesn't appear in the word twice, the fifth letter apears in the word, but in a different position. Note the twice for the fourth letter is optional, but this reflects the nature of the feedback given by Wordle.

Make you webpage interactive using JS and Forms

There are many ways to use JS to make a webpage interactive, for example: you could use forms to take information from a user and provide an output to the user; or you could have a user click on a button to make CSS or content changes. See this W3Schools page for some information on how to take data from a form.

Make your webpage interactive by adding a JS function. Some example functions: