- Create a HTML document that shows a Pokédex for the first 20 Pokémon.
- Images and description for 20 Pokémon available on Owl.
- Use an unordered list to display each item and use CSS to visually group each item (e.g. boundary or a fill colour) without the typical bullet in a list.
- Credit source material with links at the bottom of the page (see References section).
- Display two search boxes at the top of the page. One to search for Pokémon by number and the other to search by name.
- Use JavaScript to validate input for the two search boxes. Box 1 should only accept numbers 1-20. Box 2 should only accept A-Z or a-z and no more than 20 characters.
- “Enter” key or the “Search” button on each box should display a pop-up message with names and descriptions of all matches (up to 5).
- Ensure that all CSS and JavaScript are in separate files.
- Use Git to keep track of your work and upload to Github as a private repository.
- Create a server on AWS and set up a HTTP server to deploy your HTML page via a public URL.
- Create a HTML document that shows a Pokédex for the first 20 Pokémon and shows two search boxes to search for Pokémon by name or number along with input validation as in step A-C of lab 1.
- Using JavaScript, modify the DOM of this page so that:
- Create a new content block (e.g. DIV) above the first Pokémon.
- Create a new list (any list) inside this block and add list elements for all of the search results (not limited as in lab 1). Each list element must have all the information that is present in the full list. E.g. image, description etc.
- Dynamically update this list as the user is typing new characters or deleting characters in the search box. E.g. when the user deletes all the characters, the new content block should disappear.
- Use JavaScript to create new elements.
- Style the new content block to be visually distinct from the full list.
- Using valid HTML - check with validator.w3.org and ensure no errors or warnings
- Using pure JavaScript without using any external library.