Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Animated Search-bar #291

Merged
merged 6 commits into from
Jul 16, 2024
Merged

Added Animated Search-bar #291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
87c88a1
Added Animated Searchbar
BrajRaj89 Jul 15, 2024
00262e0
changes
BrajRaj89 Jul 16, 2024
8b4dabc
added the Animated Searchbar project as Day76
BrajRaj89 Jul 16, 2024
fe02649
Merge branch 'Main' into Searchbar
BrajRaj89 Jul 16, 2024
7895387
added
BrajRaj89 Jul 16, 2024
d494f2a
Update index.html
dhairyagothi Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions public/Animated Searchbar/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
});
26 changes: 26 additions & 0 deletions public/Animated Searchbar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@

<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>Animated Search Bar</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<i class="fa-solid fa-magnifying-glass magnifier"> </i>
<input type="text" class="input" placeholder="Search..." />
<i class="fa-solid fa-microphone mic-icon"></i>
</div>

<script src="app.js"></script>
</body>
</html>
76 changes: 76 additions & 0 deletions public/Animated Searchbar/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions public/Word_dictionary/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,3 +126,4 @@ async function getData(word) {
wordBox.appendChild(meaning);
wordBox.appendChild(br);
}

27 changes: 12 additions & 15 deletions public/Word_dictionary/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dictionary app</title>
<title>Dictionary App</title>
<link rel="stylesheet" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
Expand All @@ -17,33 +17,30 @@ <h1>Word Dictionary</h1>
</nav>
<section class="input container">
<div id="box">
<h2>Find any word exist in the world</h2>
<div class="form__wrap">
<div class="input__wrap">
<input type="text" placeholder="Type a word" id="input">

<button id="start-btn">Start Speaking</button>
<button id="stop-btn">Stop</button>
<button id="search">Search</button>
<h2>Find any word that exists in the world</h2>
<div class="form__wrap">
<div class="input__wrap">
<input type="text" placeholder="Type a word" id="input">
<button id="start-btn" aria-label="Start Speaking">Start Speaking</button>
<button id="stop-btn" aria-label="Stop">Stop</button>
<button id="search" aria-label="Search">Search</button>
</div>
</div>
</div>
</div>
</section>
<section class="words_Meaning">


</section>
<section class="words_Meaning">
</section>

<section class="data container">
<span class="loading">Loading...</span>
<p class="def"></p>
<div class="audio"></div>
<div class="not__found"></div>
<div class="words_and_meaning">

</div>
</section>
<script src="./app.js"></script>
</body>

</html>
</html>
6 changes: 5 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,11 @@
<div class="project-name">code-space-game project</div>
<a href="/code-jump-space-game/index.html" class="demo-link">Demo</a>
</div>

<div class="table">
<div class="day-number">Day 77</div>
<div class="project-name">Animated Searchbar</div>
<a href="Animated Searchbar/index.html" class="demo-link">Demo</a>
</div>
<footer>
<div class="footer-container">
<div class="footer-left">
Expand Down