From 87c88a1bc4dc92671394dbc2d2c489b25608ce61 Mon Sep 17 00:00:00 2001 From: BrajRaj89 Date: Mon, 15 Jul 2024 21:31:49 +0530 Subject: [PATCH 1/5] Added Animated Searchbar --- .../Word_dictionary/Animated Searchbar/app.js | 8 ++ .../Animated Searchbar/index.html | 26 +++++++ .../Animated Searchbar/style.css | 76 +++++++++++++++++++ public/Word_dictionary/app.js | 1 + 4 files changed, 111 insertions(+) create mode 100644 public/Word_dictionary/Animated Searchbar/app.js create mode 100644 public/Word_dictionary/Animated Searchbar/index.html create mode 100644 public/Word_dictionary/Animated Searchbar/style.css diff --git a/public/Word_dictionary/Animated Searchbar/app.js b/public/Word_dictionary/Animated Searchbar/app.js new file mode 100644 index 00000000..d1f5b0e0 --- /dev/null +++ b/public/Word_dictionary/Animated Searchbar/app.js @@ -0,0 +1,8 @@ +const searchContainer = document.querySelector(".container"); +const mic = document.querySelector(".mic-icon"); +const magnifier = document.querySelector(".magnifier"); + +magnifier.addEventListener("click", () => { + searchContainer.classList.toggle("active"); + mic.classList.toggle("hidden"); +}); \ No newline at end of file diff --git a/public/Word_dictionary/Animated Searchbar/index.html b/public/Word_dictionary/Animated Searchbar/index.html new file mode 100644 index 00000000..2e5da12a --- /dev/null +++ b/public/Word_dictionary/Animated Searchbar/index.html @@ -0,0 +1,26 @@ + + + + + + + Animated Search Bar + + + + +
+ + + +
+ + + + diff --git a/public/Word_dictionary/Animated Searchbar/style.css b/public/Word_dictionary/Animated Searchbar/style.css new file mode 100644 index 00000000..6f38daa7 --- /dev/null +++ b/public/Word_dictionary/Animated Searchbar/style.css @@ -0,0 +1,76 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; + } + + body { + height: 100vh; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + background: #1b1b1b; + } + + .container{ + display: flex; + align-items: center; + background: #292929; + padding: 5px; + width: 300px; + height: 50px; + border-radius: 50px; + box-shadow: 1px 1px 5px #292929; + margin: 10px; + position: relative; + transition: width 1.5s; + } + + .input { + margin: 10px 50px; + width: 100%; + color: #fff; + border: none; + background: transparent; + outline: none; + transition-delay: 0.5s; + } + + .magnifier { + position: absolute; + left: 15px; + width: 25px; + text-align: center; + margin: 0 auto; + cursor: pointer; + color: #ffa31a; + } + + .mic-icon { + position: absolute; + right: 10px; + width: 30px; + transition: width 0.4s; + transition-delay: 0.5s; + color: #ffa31a; + } + + /* JavaScript */ + .active.container { + width: 50px; + display: flex; + } + + .active .input { + width: 0; + } + + .active .mic-icon { + width: 0; + } + + .hidden { + visibility: hidden; + } \ No newline at end of file diff --git a/public/Word_dictionary/app.js b/public/Word_dictionary/app.js index dbf9faf0..e7fc031b 100644 --- a/public/Word_dictionary/app.js +++ b/public/Word_dictionary/app.js @@ -124,3 +124,4 @@ async function getData(word) { wordBox.appendChild(meaning); wordBox.appendChild(br); } + From 00262e01e56971adebe5abe6ec2435c90f4c353f Mon Sep 17 00:00:00 2001 From: BrajRaj89 Date: Tue, 16 Jul 2024 07:36:42 +0530 Subject: [PATCH 2/5] changes --- .../Animated Searchbar/app.js | 0 .../Animated Searchbar/index.html | 0 public/Animated Searchbar/style.css | 76 +++++++++++++++++++ .../Animated Searchbar/style.css | 76 ------------------- public/Word_dictionary/index.html | 27 +++---- 5 files changed, 88 insertions(+), 91 deletions(-) rename public/{Word_dictionary => }/Animated Searchbar/app.js (100%) rename public/{Word_dictionary => }/Animated Searchbar/index.html (100%) create mode 100644 public/Animated Searchbar/style.css delete mode 100644 public/Word_dictionary/Animated Searchbar/style.css diff --git a/public/Word_dictionary/Animated Searchbar/app.js b/public/Animated Searchbar/app.js similarity index 100% rename from public/Word_dictionary/Animated Searchbar/app.js rename to public/Animated Searchbar/app.js diff --git a/public/Word_dictionary/Animated Searchbar/index.html b/public/Animated Searchbar/index.html similarity index 100% rename from public/Word_dictionary/Animated Searchbar/index.html rename to public/Animated Searchbar/index.html diff --git a/public/Animated Searchbar/style.css b/public/Animated Searchbar/style.css new file mode 100644 index 00000000..1f00abe7 --- /dev/null +++ b/public/Animated Searchbar/style.css @@ -0,0 +1,76 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +body { + height: 100vh; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + background: #1b1b1b; +} + +.container{ + display: flex; + align-items: center; + background: #292929; + padding: 5px; + width: 300px; + height: 50px; + border-radius: 50px; + box-shadow: 1px 1px 5px #292929; + margin: 10px; + position: relative; + transition: width 1.5s; +} + +.input { + margin: 10px 50px; + width: 100%; + color: #fff; + border: none; + background: transparent; + outline: none; + transition-delay: 0.5s; +} + +.magnifier { + position: absolute; + left: 15px; + width: 25px; + text-align: center; + margin: 0 auto; + cursor: pointer; + color: #ffa31a; +} + +.mic-icon { + position: absolute; + right: 10px; + width: 30px; + transition: width 0.4s; + transition-delay: 0.5s; + color: #ffa31a; +} + +/* JavaScript */ +.active.container { + width: 50px; + display: flex; +} + +.active .input { + width: 0; +} + +.active .mic-icon { + width: 0; +} + +.hidden { + visibility: hidden; +} \ No newline at end of file diff --git a/public/Word_dictionary/Animated Searchbar/style.css b/public/Word_dictionary/Animated Searchbar/style.css deleted file mode 100644 index 6f38daa7..00000000 --- a/public/Word_dictionary/Animated Searchbar/style.css +++ /dev/null @@ -1,76 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: sans-serif; - } - - body { - height: 100vh; - margin: 0; - display: flex; - justify-content: center; - align-items: center; - background: #1b1b1b; - } - - .container{ - display: flex; - align-items: center; - background: #292929; - padding: 5px; - width: 300px; - height: 50px; - border-radius: 50px; - box-shadow: 1px 1px 5px #292929; - margin: 10px; - position: relative; - transition: width 1.5s; - } - - .input { - margin: 10px 50px; - width: 100%; - color: #fff; - border: none; - background: transparent; - outline: none; - transition-delay: 0.5s; - } - - .magnifier { - position: absolute; - left: 15px; - width: 25px; - text-align: center; - margin: 0 auto; - cursor: pointer; - color: #ffa31a; - } - - .mic-icon { - position: absolute; - right: 10px; - width: 30px; - transition: width 0.4s; - transition-delay: 0.5s; - color: #ffa31a; - } - - /* JavaScript */ - .active.container { - width: 50px; - display: flex; - } - - .active .input { - width: 0; - } - - .active .mic-icon { - width: 0; - } - - .hidden { - visibility: hidden; - } \ No newline at end of file diff --git a/public/Word_dictionary/index.html b/public/Word_dictionary/index.html index 4dab65b7..23cb966c 100644 --- a/public/Word_dictionary/index.html +++ b/public/Word_dictionary/index.html @@ -4,7 +4,7 @@ - Dictionary app + Dictionary App @@ -17,22 +17,20 @@

Word Dictionary

-

Find any word exist in the world

-
-
- - - - - +

Find any word that exists in the world

+
+
+ + + + +
-
-
- -
+
+
Loading... @@ -40,10 +38,9 @@

Find any word exist in the world

-
- \ No newline at end of file + From 8b4dabc7332aabbfc00892b64aa389733ba41f5d Mon Sep 17 00:00:00 2001 From: BrajRaj89 Date: Tue, 16 Jul 2024 12:32:39 +0530 Subject: [PATCH 3/5] added the Animated Searchbar project as Day76 --- public/index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index d793b73a..6a6acf86 100644 --- a/public/index.html +++ b/public/index.html @@ -439,7 +439,11 @@
Insect-Catch_Game
Demo - +
+
Day 76
+
Animated Searchbar
+ Demo +