This documentation provides an overview of the movie library website, which is developed using HTML5, CSS, and JavaScript. The website integrates an open-source free API database of movies, allowing users to browse and search for movies. The API includes details such as release date, genre, plot, writer, actors, and ratings for each movie.
-
Movie Database Integration The movie website utilizes an API database to fetch movie information, including titles, genres, release dates, ratings, and descriptions. The API endpoints are accessed via JavaScript's fetch function, and the data is dynamically displayed on the website.
-
Theme Changing Feature The website includes a theme-changing feature that allows users to switch between different visual themes. This feature is implemented using CSS variables, and JavaScript is used to handle the theme-switching functionality. Users can select their preferred theme from a predefined set of options.
-
Dynamic Arrow Navigators To enhance user navigation, the website incorporates dynamic arrow navigators. These navigators appear when there is content to scroll horizontally, such as movie carousels or slideshows. Users can click the arrow buttons to navigate through the content.
-
Search Bar The website provides a search bar that allows users to search for movies based on keywords or specific criteria. The search functionality is implemented using JavaScript, which sends requests to the API database and displays the search results dynamically on the webpage.
-
HTML5: A markup language for creating the website's structure and content.
-
CSS: Styling language used to design the website's layout and appearance.
-
JavaScript: A programming language for adding interactivity and dynamic functionality to the website.
-
API Database: An external movie database API is integrated to fetch movie information.
The project's folder structure is organized as follows:
-
html/
- index.html # main html file for the home page
- result.html # html file for a webpage containing movie information
-
css/
- styles.css # CSS styles for the website
- result.css # CSS styles for the webpage containing information on movies
-
js/
- script.js # JavaScript code for dynamic functionality
- result.js
-
img/ # Directory for storing website images
To use the movie website, follow these steps:
- Download or clone the project repository to your local machine.
- Open the index.html file in a web browser.
- Browse and search for movies using the provided interface.
- Enjoy exploring different movie themes, navigating through content using the arrow buttons, and utilizing the search bar.
The website is compatible with modern web browsers, including:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
![Screenshot 2023-06-24 at 8 33 20 PM](https://private-user-images.githubusercontent.com/102133817/248490601-c2497244-ee05-4d52-9436-9f56576df675.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3MzQ3NjksIm5iZiI6MTcyNDczNDQ2OSwicGF0aCI6Ii8xMDIxMzM4MTcvMjQ4NDkwNjAxLWMyNDk3MjQ0LWVlMDUtNGQ1Mi05NDM2LTlmNTY1NzZkZjY3NS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyN1QwNDU0MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kNTMwYjM4OWNjMzIwMWZjOTRkYjQyOTQ0OGY3YmJjMjVmNDY4YWJmZmYyMTUzZjQyYTRiOTg2ZjBhMTk2YWMxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.f4_Uky8LA1DfEsl4CD-nMunYj47GpaI-SuaubgtP5VE)
![Screenshot 2023-06-24 at 8 33 53 PM](https://private-user-images.githubusercontent.com/102133817/248490614-63e7090b-1b01-4a54-971d-8c8daa6ef28a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3MzQ3NjksIm5iZiI6MTcyNDczNDQ2OSwicGF0aCI6Ii8xMDIxMzM4MTcvMjQ4NDkwNjE0LTYzZTcwOTBiLTFiMDEtNGE1NC05NzFkLThjOGRhYTZlZjI4YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyN1QwNDU0MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kYTc2ODkxOWRhMDAyZDAyZjVlYjEyODI4YzIwNmEzNDk0ZDBhYTk2YWU5NjQxOWVkNDJmNTFkMTM1ZTgwYWY2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.BdxHwIrflNLWJWI5CR93VAbuqR_OmGRxoMHcwXwCcBw)
![Screenshot 2023-06-24 at 8 34 13 PM](https://private-user-images.githubusercontent.com/102133817/248490629-e36dfb9c-8cce-4c5a-ae89-7cb76085bb5b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3MzQ3NjksIm5iZiI6MTcyNDczNDQ2OSwicGF0aCI6Ii8xMDIxMzM4MTcvMjQ4NDkwNjI5LWUzNmRmYjljLThjY2UtNGM1YS1hZTg5LTdjYjc2MDg1YmI1Yi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyN1QwNDU0MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01NTFjYTk1MmFjYjNlYWQ2MzEyODlhZDNiZTBiNDM3ZmQyNTMwNjVmMDQyODlkZmUyNTM0NjNmNmFjMWE3OWIwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.1Jp_O-3HCHeRtni_vCQ58zgNm4BNyKn8uK7WERfJKBA)