The aim is to investigate the getElementsByTagName method. This can include the number of elements in a particular tag (e.g. li). Also to get a random item from the particular tag.

List Items will be used. The list items can be names of celebrities.

Getting Started

Select the Get Random Celebrity Button to get the number of list items (celebrities), list of celebrities and the celebrity selected at random. Select the Reset Button to clear the information or to start again.

User Stories

As a user, if I select the Get Random Celebrity Button, I can get the number of list items (celebrities), list of celebrities as well as the name of the celebrity (at random).

As a user, if I select the Reset Button, I can clear the information or start again.

Information Architecture

The list items (celebrities) are Anna Richardson, Joanna Gosling, Kate Garraway, Ruth Langsford, Susanna Reid and Victoria Beckham. All are strings. The random celebrity comes from one of these celebrities.

Allows the user to get the random celebrity from the list items. Other information include the number of list items (celebrities) as well as the array of celebrities.

Uses HTML5, CSS3, JavaScript, Google Fonts and Bootstrap 5.3.0-alpha1.

Ensure all user stories have been met. On the command line, type:

python3 -m http.server

Select Open Preview to preview. Select each of the buttons and check that the information meets the user story. For example, if I select the Reset Button, I expect the information to be cleared.

Deployed on GitHub Pages at the main branch.

Written by me.

• w3Schools.com
• IT Career Switch