A search bar is something that nearly every application needs at some point, and luckily creating one is surprisingly easy. In this tutorial I will show you how to create a search bar and also how to avoid the common pitfalls of a search bar.


Materials/References:

GitHub Code: https://github.com/WebDevSimplified/js-search-bar
JSON Placeholder API: https://jsonplaceholder.typicode.com
CSS Grid Video: https://youtu.be/9zBsdzdE4sM
Animated Card Video: https://youtu.be/h2x4YTI6WeE
Async Vs Defer Video: https://youtu.be/BMuFBYw91UQ
Async Vs Defer Article: https://blog.webdevsimplified.com/2019-12/javascript-loading-attributes-explained
Fetch Video: https://youtu.be/cuEtnrL9-H0
Map Video: https://youtu.be/R8rmfD9Y5-c?t=118
Map Article: https://blog.webdevsimplified.com/2021-11/js-array-map
Template Article: https://blog.webdevsimplified.com/2020-06/template-tag


Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:33 - HTML
02:00 - CSS
05:04 - JavaScript (Getting User Information)
10:00 - JavaScript (Search Bar)


#SearchBar #WDS #JavaScript