Display and Filter User Names in DOM #14
Description
User Story: Display and Filter User Names in DOM
Title
As a web developer, I want to display a list of user names in the DOM and implement a search functionality so that users can easily filter and find specific names in the list.
Acceptance Criteria
- The application should access the DOM and create list item (
<li>) elements for each user name - Each list item should be properly appended to an existing unordered list (
<ul>) in index.html - Dummy user names should be used initially (to be replaced with API data later)
- A search input field should be implemented in the UI
- The search functionality should use the
addEventListenermethod on the input element - The search should filter user names in real-time as the user types (using the "input" event)
- Only user names that match the search criteria should be displayed
- The search should be case-insensitive
- The implementation should follow modern JavaScript best practices
- The code should be well-commented to explain the DOM manipulation and event handling
Example Input and Output
Example: Implementing User List with Search Functionality
HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User List with Search</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>User Directory</h1>
<div class="search-container">
<input type="text" id="searchInput" placeholder="Search users...">
</div>
<ul id="userList">
<!-- User list items will be appended here -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>JavaScript Implementation:
// Dummy user data (will be replaced with API data later)
const users = [
"John Smith",
"Jane Doe",
"Robert Johnson",
"Emily Williams",
"Michael Brown",
"Sarah Davis",
"David Miller",
"Jessica Wilson"
];Output:
When the page loads, all user names will be displayed as list items. As the user types in the search box, the list will dynamically update to show only the names that contain the search term (case-insensitive).