- Familiarisation with standard functions in JavaScript
- Accessing and updating the Document Object Model
-
Preparation: look through the lists of methods JavaScript provides through the String, Math and Array objects.
-
Have a look at the file button.html included in this directory of the repository. You are going to explore what happens when you change the file, and write a question about the effect of the change on PeerWise. If you haven't already registered for PeerWise then have a look at the practical on HTML and CSS which includes instructions. You should already have a local copy of the forked version of the repository, if not then follow the instructions there. You will have to include any changes made from the original repository by
git pull upstream main
Now make a change to the file that has a useful, interesting, beautiful or surprising result. Ideally this would be in its own issue branch. Commit and push your change to your forked repository, then make a pull request to the original repo. Add a PeerWise question about the effect of your change. Answer some questions other people have written too.
- Write an HTML page with associated client-side JavaScript to generate a random sentence in English (or another language if you prefer). The sentence should take the form
The adjective noun verb adverb.
or the equivalent structure in the language you choose. Here adjective should be randomly selected from a list of adjectives (e.g. blue, tall, furry) that you define in your JavaScript code. You should also define a list of nouns, verbs and adverbs to choose from. If you want help choosing some words you could look at https://www.wordsapi.com/ or https://randomwordgenerator.com/. An example generated sentence would be
The blue dog eats lazily.
Your page should include a button which, when clicked, causes the sentence text to appear inside another part of the page (which starts off being empty). Use the addEventListener method to add a method that is called when the button gets a click event. You will need to identify the button element using an id attribute. Then you can select the button element via its id with either the getElementById method or the more general querySelector method.
To place the sentence in another part of the page, define a div element that starts off with no content, and update its content via JavaScript by selecting it (again with getElementById or querySelector) and setting the innerHTML property.
To choose a random element of your array you can use Math.random combined with Math.floor. Some JavaScript libraries e.g. lodash provide methods for doing things like this easily (in this case with sample). It's a matter of taste whether you prefer to work with native functions like Math.random or write shorter code with libraries that need to be imported.
Remember to check the JavaScript console in your browser to look for any error messages. If your code is not working as expected you can debug it using messages via console.log or alert.
-
Adapt your example so that instead of having the words predefined in the JavaScript code, they are typed in by the user. Do this with four separate textarea inputs: one for adjectives; one for nouns; etc. You will need to give each textarea a different id. You can access the value in most form elements (like textarea) using the value property (a bit like the innerHTML property we used before). You will need to take the string input by the user and break it into an array of words - there is a method in the String prototype which does this for you.
-
Extend your work to generate a poem (maybe a haiku or a limerick). You could also take inspiration from https://www.poem-generator.org.uk or https://www.song-lyrics-generator.org.uk/. Generate it randomly in your JavaScript. Maybe you could make the page look pretty too with good HTML and CSS.