반응형
Implementaion
First, let's add a search bar and a button in the HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<!-- custom style -->
<link rel="stylesheet" href="main.css" />
<script defer src="index.js"></script>
</head>
<body>
<div class="input-box">
<input type="text" class="search">
<i class="fas fa-search fa-2x magnifier"></i>
</div>
</body>
</html>
Add basic styles in the CSS
/* main.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightcoral;
}
.input-box {
position: relative;
}
input {
height: 50px;
width: 50px;
border-radius: 15px;
transition: 0.4s ease;
font-size: 1.7rem;
border: none;
}
input:focus {
outline: none;
}
input.expand {
width: 250px;
padding: 0 50px 0 10px;
}
.magnifier {
height: 50px;
width: 50px;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.magnifier::before {
height: 50px;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
Finally, add a click event that toggles the expanding class in the JS
// index.js
const magnifier = document.querySelector('.magnifier')
const searchBar = document.querySelector('.search')
magnifier.addEventListener('click', () => {
searchBar.classList.toggle('expand')
})
Well done!
Project Source
728x90
반응형
'Frontend > JavaScript' 카테고리의 다른 글
Data Request (1) | 2023.03.24 |
---|---|
Day / Night Mode with JavaScript (1) | 2023.03.24 |
How to Tell PC from Mobile in A Responsive APP (1) | 2023.03.23 |
Modal (0) | 2023.03.14 |
Infinite Scrolling (0) | 2023.03.14 |