JavaScript Search

JavaScript Search

8573 次观看 · 2022-09-07 UI 设计
We offer free trials - learn JavaScript, CSS, and HTML with us!
Letting users search through data in your application or website is a great UX feature. Building out this type of functionality isn't as hard as you may think. With some basic JavaScript, we can tackle the filtering and searching of data. Follow along as I add a search feature with vanilla JavaScript that allows the user to search for a specific author in a list of authors. Start your free trial to learn more! https://trhouse.co/3owCAaQ

Blog article:
https://trhouse.co/3owCAaQ

Topics discussed:
JavaScript forEach method (MDN Docs)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Treehouse content on the forEach method:
https://trhouse.co/42815J2

Treehouse content on other array iteration methods:
https://trhouse.co/3ovGZLe

Treehouse content on DOM interaction:
https://trhouse.co/3MTM35u

0:00 Intro
0:59 Getting started
1:50 Search event listener
3:25 Grab DOM elements to search
4:15 forEach loop and conditional
5:46 Working search functionality
6:17 Card animations (CSS)
7:22 Card animations (JavaScript)
9:04 Outro

#javascript #frontend #css #html
---
Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.

Follow Us!
Twitter: https://twitter.com/treehouse
Instagram: https://instagram.com/teamtreehouse
LinkedIn: https://www.linkedin.com/school/treehouse-island-inc-/
Facebook: https://www.facebook.com/teamtreehouse/