feat: day 4

solygambas · solygambas · commit 79aafa6acd62 · 2025-06-17T06:52:00.000+02:00
diff --git a/004-hidden search widget/index.html b/004-hidden search widget/index.html
@@ -13,8 +13,10 @@
   </head>
   <body>
     <div class="search">
-      <input type="text" class="input" placeholder="Search..." />
-      <button class="btn"><i class="fas fa-search"></i></button>
+      <!-- Change Placeholder Text -->
+      <input type="text" class="input" placeholder="Type and hit enter..." />
+      <!-- Change the Search Icon -->
+      <button class="btn"><i class="fas fa-search-plus"></i></button>
     </div>
     <script src="script.js"></script>
   </body>
diff --git a/004-hidden search widget/script.js b/004-hidden search widget/script.js
@@ -1,8 +1,12 @@
 const search = document.querySelector(".search");
 const btn = document.querySelector(".btn");
 const input = document.querySelector(".input");
+// Animate Button Icon Change
+const icon = document.querySelector(".fas");
 
 btn.addEventListener("click", () => {
   search.classList.toggle("active");
+  icon.classList.toggle("fa-search-plus", !search.classList.contains("active"));
+  icon.classList.toggle("fa-times", search.classList.contains("active"));
   input.focus();
 });
diff --git a/004-hidden search widget/style.css b/004-hidden search widget/style.css
@@ -48,10 +48,17 @@ body {
   outline: none;
 }
 
+/* Change Background Color on Hover */
+
+.input:focus {
+  background-color: #f0f0f0;
+}
+
 .search.active .input {
-  width: 200px;
+  /* Modify Expansion Width */
+  width: 300px;
 }
 
 .search.active .btn {
-  transform: translateX(198px);
+  transform: translateX(248px);
 }

Original file line number	Diff line number	Diff line change
`@@ -48,10 +48,17 @@ body {`
`48`	`48`	`outline: none;`
`49`	`49`	`}`
`50`	`50`
	`51`	`+/* Change Background Color on Hover */`
	`52`	`+`
	`53`	`+.input:focus {`
	`54`	`+ background-color: #f0f0f0;`
	`55`	`+}`
	`56`	`+`
`51`	`57`	`.search.active .input {`
`52`		`- width: 200px;`
	`58`	`+ /* Modify Expansion Width */`
	`59`	`+ width: 300px;`
`53`	`60`	`}`
`54`	`61`
`55`	`62`	`.search.active .btn {`
`56`		`- transform: translateX(198px);`
	`63`	`+ transform: translateX(248px);`
`57`	`64`	`}`