This web application displays data of SpaceX launches, fetched from the SpaceX API. The application allows users to filter launches based on their success or failure status, adjust the number of displayed launches per page, and load more launches dynamically. The app also features a responsive design and robust error handling, ensuring a smooth user experience even when issues arise.
- Launch Data Display: View detailed information about SpaceX launches, including the name, details, status, and date.
- Filters: Filter launches based on success (
Success) or failure (Failure) status. - Pagination: Load more launches as the user clicks the "Load More" button.
- Limit Customization: Choose how many launches to display per page (10, 50, 100, 150, or 200).
- Responsive Design: The app adjusts to different screen sizes, ensuring a seamless experience across devices.
- Error Handling: Comprehensive error handling ensures the app remains functional even if the data fetch fails or an invalid operation occurs.
- HTML5: Markup and structure of the web application.
- CSS3: Styling with modern design principles, responsive design, and animations.
- JavaScript: Fetching dynamic data, applying filters, handling pagination, and error management.
- SpaceX API: Data source for SpaceX launch information (https://api.spacexdata.com/v4/launches).
To get started with the SpaceX Launches Data Display web application, follow these steps:
-
Clone the repository:
git clone https://github.com/Hemang2208/SpaceX.git -
Open the project: Navigate to the project directory and open the
index.htmlfile in your browser to start using the application. -
Run Locally: You can also run the app locally by opening the
index.htmlfile with any modern web browser (Chrome, Firefox, Safari, etc.).
-
Filters: Use the buttons to filter launches by:
All(shows all launches)Success(shows successful launches)Failure(shows failed launches)
-
Limit: Adjust the number of launches displayed per page using the dropdown selector. The available options are:
- 10
- 50
- 100
- 150
- 200
-
Load More: Click the "Load More" button to load additional launches if available. This will incrementally fetch more launches from the SpaceX API.
-
Responsive Layout: The application automatically adjusts for smaller screen sizes (mobile/tablet devices) to provide a user-friendly mobile experience.
This app includes robust error handling to provide feedback in case of issues, such as:
- Failed API fetch: If the SpaceX API is unreachable or the request fails, an error message is shown to the user.
- Filter Error: If an error occurs while applying the filter, the user is informed via a message.
- Invalid Inputs: If the user selects an invalid limit or there are issues with the pagination, error messages will be displayed.
We welcome contributions to improve the app. If you'd like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch). - Make your changes and commit them (
git commit -am 'Add new feature'). - Push to the branch (
git push origin feature-branch). - Open a pull request to the main repository.
For any questions or issues, please connect with me on LinkedIn.
- SpaceX for providing the publicly accessible API that powers this project.
- Open Source Community for the support and inspiration behind building this web app.