🔴Live Search Filter from Scratch with HTML, CSS & JavaScript
Channel: Thapa Technical
Date: 08/02/2023

Welcome, In this video, we will be building a live search filter using HTML, CSS & JavaScript in Hindi. By the end of this tutorial, you will have a dynamic search feature on your website that updates the results in real-time as the user types in the search bar. 

We will cover the basics of HTML & CSS to structure and style the search bar, and dive into JavaScript to add interactivity and functionality to our search filter. Whether you are a beginner or have some experience with these technologies, this video is for you! Get ready to take your website to the next level with a live search filter

😊 Become Member, get access to perks, free Source code, & more..
https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join

👉 Free Source Code Link: https://www.thapatechnical.com/2023/02/create-live-search-filter-from-scratch.html

😍 Check my Instagram to Connect with me:     https://www.instagram.com/thapatechnical

👩‍💻 Discord Server Link for Programmer to Hangout: https://discord.gg/MdScmCsua6

✌ Website Link:  https://www.thapatechnical.com


----------- TIMELINE---------
0:00 Introduction
0:40 Prerequisites
1:05 Free Source Code
1:40 Folder structure
1:50 HTML Code
3:45 logic 
4:05 CSS top part styling
7:08 important CSS Tips
8:05 Input Search Styling
10:15 User List Styling
11:10 getting user references
12:08 Github user using AsyncAwait
13:50 adding JS file in HTML
14:35 Map & add data in Li Tag
17:00 HTML data 
17:50 add dynamic data
20:50 styling dynamic data 
25:05 let's tackle loading 
25:50 Logic behind search
27:05 search functionality 
34:00 More Tips



************* 😍 Must Watch Videos For Web Development 😍 *************

➡️ Complete Reactjs in One video here  https://youtu.be/43IbFDSVdB0

➡️ HTML in One Video: https://youtu.be/pN7BFLfSjFw


➡️ CSS in One video:  https://youtu.be/hkQv0NIxKQY


➡️ CSS FlexBox in 30 Minutes: https://youtu.be/6L-PAmZajfA


➡️ JavaScript in One video:   https://youtu.be/PODgPW-hbfU


➡️  ECMAScript 6 in One Video:  https://youtu.be/Iek4DtRobLA


➡️ HTML5 in one video:  https://youtu.be/4V0-YpO-KZo


➡️ CSS3 in one video:  https://youtu.be/TFrFx7H5ZI8


➡️ Bootstrap4 in One video:   https://youtu.be/yZnNnvXO8HI


➡️ Jquery in One video:  https://youtu.be/PNvyPEQ0y-I


➡️ JSON in one video:  https://youtu.be/bMqevPKAPD4


➡️ ReactJS in one video:  https://youtu.be/43IbFDSVdB0


➡️ PHP in One Video:  https://youtu.be/3024Kc6SDJ0


➡️ NodeJS in one video:  https://youtu.be/ipnWAKoiBt


➡️ MySQL in one video:   https://youtu.be/5bFxbwjN-Gk


 ➡️ Advanced JavaScript in Hindi Playlist: https://www.youtube.com/playlist?list=PLwGdqUZWnOp0hSGwasCjbrWSPrEKqB_kz&disable_polymer=true


➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: https://youtu.be/Iek4DtRobLA


➡️ JavaScript Game Development Series in 2020: https://www.youtube.com/playlist?list=PLwGdqUZWnOp1Ub0K1CBuLxLOEN6wTq2bg