author | handle | source | date | likes | retweets | replies |
---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
June 22, 2022 10:39 AM |
89 |
30 |
16 |
Ajay Yadav 🎯 (@ATechAjay) - June 22, 2022 10:39 AM
9️⃣ / 5️⃣0️⃣ The Ultimate JavaScript Projects Series!
🎉 Search Bar Expanding And Collapsing
A Thread🧵↓ pic.twitter.com/TStGxwozZ9
💡 Here is the HTML code for this design!
◩ There are 2 elements inside the "parent" container.
◩ Which are the input and button elements.
◩ And, I have used the "fontawesome" search icon. pic.twitter.com/SUdvBGUk8Y
💡 We have to align both elements on each other, the button will be over the input element.
◩ That's why we have positioned both elements. pic.twitter.com/vrMFmt6lx1
💡 Initially, we have to set the same "width" on both elements.
◩ In this case, I have set 40px width in both of them. pic.twitter.com/ih4rXNGnfR
💡 And just we have toggle "active" class with JavaScript.
◩ If the "parent" element has a ".active" class then the "width" of the ".input" element will be 200px. pic.twitter.com/emnnOqDI07
◩ If the "parent" element has a ".active" class then the ".btn" element will be transform(move) to the x-direction to 210px. pic.twitter.com/tFbwwzdJvz
◩ And finally, we have to implement the JavaScrip part, Select all required HTML elements using JavaScript. pic.twitter.com/e19bBXBCbP
◩ When we click on the button then the ".active" class will be toggled.
💡 Also if the search bar is expanded then the cursor will be blinking in that field using the focus( ) method.
◩ The focus()
method sets focus on the specified element. pic.twitter.com/kXotluAHVY
🔔 One more thing, if you want to learn the awesome projects from this series then you should follow this Github repository.
🔔 Don't forget to give a star ⭐ to this repository, also if you didn't follow me on GitHub then consider following me.
😍Try it from here:
That's all for now, we will meet in the next thread😍
🔔 Follow Me @ATechAjay For:
🌐 Web Development ✨ JavaScript 📝 Writing Skill 🔥 Motivation 💹 Growth ⛔ But Not For Only Resources & Shitpost
Thank you so much for staying to the end of this thread💚