https://github.com/derektypist/dom-elements-by-tag-name
Document Object Model (DOM) - Investigation of the getElementsByTagName method. Count the number of items in a particular tag (e.g. li) as well as getting the random item in the particular tag.
https://github.com/derektypist/dom-elements-by-tag-name
bootstrap5 css3 documentobjectmodel dom getelementsbytagname google-fonts html5 javascript
Last synced: about 1 month ago
JSON representation
Document Object Model (DOM) - Investigation of the getElementsByTagName method. Count the number of items in a particular tag (e.g. li) as well as getting the random item in the particular tag.
- Host: GitHub
- URL: https://github.com/derektypist/dom-elements-by-tag-name
- Owner: derektypist
- Created: 2023-02-11T10:38:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-11T11:42:58.000Z (over 3 years ago)
- Last Synced: 2025-07-17T01:39:55.463Z (11 months ago)
- Topics: bootstrap5, css3, documentobjectmodel, dom, getelementsbytagname, google-fonts, html5, javascript
- Language: HTML
- Homepage: https://derektypist.github.io/dom-elements-by-tag-name
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Document Object Model (DOM) - Get Elements by Tag Name
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.
## UX
**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.
## Features
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.
## Technologies
Uses HTML5, CSS3, JavaScript, Google Fonts and Bootstrap 5.3.0-alpha1.
## Testing
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.
## Deployment
Deployed on [GitHub Pages](https://derektypist.github.io/dom-elements-by-tag-name) at the main branch.
## Credits
### Content
Written by me.
### Acknowledgements
- [w3Schools.com](https://www.w3schools.com)
- [IT Career Switch](https://www.itcareerswitch.co.uk)