A web application for displaying user information retrieved via a REST API. Users can view a list of users, filter and sort them, and update the user list on demand.
The application consists of a user interface designed with HTML and styled with CSS. JavaScript is used to implement functionality such as fetching data from the REST API, rendering the user data dynamically, and enabling filtering and sorting options. Bootstrap is utilized for responsive design and layout components.
- HTML: Markup language for structuring the web page.
- CSS: Styling language used for designing the user interface.
- JavaScript: Programming language for implementing interactive features.
- Bootstrap: CSS framework for styling and layout.
- REST API: Used to fetch user data from an external server.
Frist thing that user sees
What happens after "Request" button click
Filtering
Sorting by username
Adaptivity
Other features can be checked while using it by yourself
- Fetches user data from a REST API endpoint and dynamically renders it on the web page.
- Utilizes JavaScript to asynchronously fetch data, ensuring a smooth user experience without page reloads.
- Provides flexible filtering options allowing users to filter data based on different parameters, such as name, username, email, phone, and address.
- Enables real-time filtering as users type in the filter input field, instantly updating the displayed data to match the entered criteria.
- Supports sorting of user data by various columns, enhancing data organization and accessibility.
- Enables users to sort the table by clicking on column headers, with the table automatically reordering according to the selected column.
- Implements responsive design using Bootstrap, ensuring optimal viewing experience across a wide range of devices and screen sizes.
- Adapts the layout and styling to provide consistency and readability on both desktop and mobile devices.
- Utilizes a clean and modern design with carefully chosen colors and typography to enhance visual appeal and readability.
- Applies subtle animations and hover effects to interactive elements, providing visual feedback and improving user engagement.
- Ensures accessibility and usability by maintaining clear contrast ratios and intuitive interface elements.
- Organizes JavaScript code into modular functions for fetching, rendering, filtering, and sorting user data, promoting maintainability and scalability.
- Separates HTML structure, CSS styling, and JavaScript functionality to maintain a clean and structured codebase.
- Comments code extensively to facilitate understanding and collaboration among developers.
Simply open the index.html file in a web browser to start using the application. No installation or setup is required.
This project is licensed under the MIT License - see the LICENSE file for details.