<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search filter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<input type="text" class="search" id="search">
</div>
<div class="container2">
<div class="name" id="name1">
<p>Harry</p>
</div>
<div class="name" id="name2">
<p>Sheeta</p>
</div>
<div class="name" id="name3">
<p>Mosh</p>
</div>
<div class="name" id="name4">
<p>Aries</p>
</div>
<div class="name" id="name5">
<p>Bob</p>
</div>
<div class="name" id="name6">
<p>Lucky</p>
</div>
<div class="name" id="name7">
<p>Peter</p>
</div>
<div class="name" id="name8">
<p>Rohit</p>
</div>
<div class="name" id="name9">
<p>Raj</p>
</div>
<div class="name" id="name10">
<p>Rose</p>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS code:
body{
display: flex;
justify-content: center;
align-items: center;
}
.container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: black;
width: 50%;
border-radius: 20px;
margin-top: 30px;
}
.container1{
margin-top: 20px;
width: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.container1 input{
margin-top: 20px;
border: 2px solid gold;
border-radius: 10px;
font-size: 20px;
font-weight: 500;
color: white;
outline: none;
text-align: center;
background-color: black;
}
.container2{
width: 600px;
margin-top: 20px;
background-color: black;
color: white;
border-radius: 20px;
}
.name{
border: yellow;
background-color: green;
border-radius: 10px;
font-size: 24px;
text-align: center;
width: 500px;
margin: auto;
}
Javascript Code:
let search = document.getElementById('search');
search.addEventListener('input',()=>{
let search = document.getElementById('search').value.toLowerCase();
console.log(search);
let name = document.getElementsByClassName('name');
// console.log(name);
Array.from(name).forEach((element,index)=>{
let text = document.getElementsByTagName('p')[index].innerText.toLowerCase();
console.log(text);
if(text.includes(search)){
element.style.display = 'block'
}
else{
element.style.display = 'none'
}
})
})
No comments:
Post a Comment