Introduction
Live user filter is a web-based project that displays a bunch of random users. Live user filter project is coded in HTML5, CSS3 & JavaScript.
Live user filter project is a simple web project. We are building a simple search filter that searches and filter random users. The project is easy to use and implement. We are using a random user dot me API to fetch a bunch of random users.
It has a simple mobile-like layout with a search bar. If the user searches it shows the person’s name, avatar, and location. When you type the letters on the search bar it displays the user according to your input. It is a beginner-level project. Have a look at the screenshot below.
Building the project
HTML5, CSS3, and JavaScript are used to build this live user filter project. HTML is used for placing elements on the browser. CSS is used for styling the HTML content. CSS styles the structure layout of the project. JavaScript is implemented to make the search functionality. CSS is used for making the box-shadow layout where the user is displayed.
Using API we get a bunch of users. So, you can scroll down for more users. You can either search by name or by location. If you search by location, you will get users with the specific location only. It executes without error. Download the project and get experienced by yourself.
How to use this project?
- Download the project.
- Extract the zip file & get the folder.
- Set up an editor or IDE. (vs code, sublime text, atom)
- Open the project folder on the editor. (Google Chrome, Mozilla Firefox)
- Launch the program in the browser.
- Search the user.
- Enjoy & Share.
Click the button below to get the source code for this project.