Welcome to the my TV Show DOM Project! In this assignment, I'll utilize mine JavaScript skills to create a web app that interacts with the TVMaze API, showcasing details of TV show episodes.Follow the steps below to complete the project and deploy your website on Netlify or GitHub Pages.
-
Create a New Repo:
- Initialize a new repository with the exact name:
tv-show-dom-project
.
- Initialize a new repository with the exact name:
-
Website Content:
-
Build a web app using HTML, CSS, and JavaScript.
-
Utilize the TVMaze API to fetch details about TV show episodes.
-
Display all episodes with the following information:
- Episode name
- Season number
- Episode number
- Medium-sized episode image
- Episode summary text
-
Generate an episode code by combining season and episode numbers.
-
-
Acknowledgment:
- Mention on your page that the data originates from TVMaze.com.
- Provide a link back to TVMaze or the specific episode on that site.
-
Live Search Input:
- Implement a live search input that filters episodes based on the summary or name.
- Ensure the search is case-insensitive.
- Display the number of episodes matching the current search.
- Update the display immediately after each keystroke.
-
Data Fetching Caution:
- If fetching episode data from the API, avoid frequent requests when using the search feature.
- Conduct the search through an in-memory copy of the episode list.
-
Multiple Movies:
- Extend your app to include details for more than one TV show.
-
Episode Selector:
- Enhance your app with an episode selector:
- Add a select input listing all episodes in the format: "S01E01 - Winter is Coming."
- Allow users to jump quickly to a selected episode.
- When a selection is made, navigate the user directly to that episode in the list.
- Enhance your app with an episode selector:
-
Bonus (Optional):
- Provide an option to show only the selected episode when the selector is used.
- Ensure users have a way to view all episodes again.
-
Publish Your Website:
- Deploy your website on either Netlify or GitHub Pages.
-
Netlify URL Format:
- If using Netlify, ensure your website URL follows this format:
https://aps-[[github-username]]-tv.netlify.app/
- If using Netlify, ensure your website URL follows this format:
Good luck with your project! If you encounter any issues or have questions, don't hesitate to ask for assistance.