diff --git a/drive.png b/drive.png
new file mode 100644
index 0000000..4a47b6d
Binary files /dev/null and b/drive.png differ
diff --git a/index.css b/index.css
index 09dae3a..39b616d 100644
--- a/index.css
+++ b/index.css
@@ -32,6 +32,7 @@ body {
}
.description {
font-style: oblique;
+ align-items: center;
}
.search_wrapper {
border: 0.125rem solid rgb(23, 23, 23);
diff --git a/index.js b/index.js
index ba99abc..4e82924 100644
--- a/index.js
+++ b/index.js
@@ -2,11 +2,15 @@ let current_search = 'google'
document.querySelector('.search_input').addEventListener('keyup', e => {
const input = e.target.value;
let search_engine = input.split(' ')[0].toLowerCase();
- let search_query = input.split(' ').splice(0).join(' ');
+ let search_query = input.split(' ').splice(1,).join(' ');
switch(search_engine){
case 'google':
case 'youtube':
- case 'docs': break;
+ case 'docs':
+ case 'spotify':
+ case 'sheets':
+ case 'drive':
+ break;
default: search_engine = 'google';
search_query = input;
}
@@ -26,6 +30,18 @@ document.querySelector('.search_input').addEventListener('keyup', e => {
image.src = 'docs.png';
image.alt = 'Google Docs icon';
break;
+ case 'spotify':
+ image.src='spotify.png';
+ image.alt= 'Spotify icon';
+ break;
+ case 'sheets':
+ image.src='sheets.png';
+ image.alt= 'Sheets icon';
+ break;
+ case 'drive':
+ image.src='drive.png';
+ image.alt= 'Drive icon';
+ break;
}
}
if(e.key === 'Enter')
@@ -36,6 +52,15 @@ document.querySelector('.search_input').addEventListener('keyup', e => {
case 'youtube':
window.location = `https://www.youtube.com/results?search_query=${search_query}`;
break;
+ case 'spotify':
+ window.location = `https://open.spotify.com/search/${search_query}`;
+ break;
+ case 'drive':
+ window.location = `https://drive.google.com/drive/u/0/search?q=${search_query}`;
+ break;
+ case 'sheets':
+ window.location = `https://docs.google.com/spreadsheets/u/0/?q=${search_query}`;
+ break;
default:
window.location = `https://www.google.com/search?q=${search_query}`;
}
diff --git a/multisearch/LICENSE b/multisearch/LICENSE
new file mode 100644
index 0000000..bd9dbd2
--- /dev/null
+++ b/multisearch/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Hrishikesh Patil
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/multisearch/README.md b/multisearch/README.md
new file mode 100644
index 0000000..1cedcab
--- /dev/null
+++ b/multisearch/README.md
@@ -0,0 +1,10 @@
+# Multisearch
+Vanilla Web implementation of a single site to search from multiple providers
+
+Supported providers (first_word):
+- Google (google) (Default)
+- YouTube (youtube)
+- Google Docs (docs)
+- spotify (spotify)
+
+[Icons created by freepik on Flaticon](https://www.flaticon.com/authors/freepik)
\ No newline at end of file
diff --git a/multisearch/docs.png b/multisearch/docs.png
new file mode 100644
index 0000000..c3c99a5
Binary files /dev/null and b/multisearch/docs.png differ
diff --git a/multisearch/drive.png b/multisearch/drive.png
new file mode 100644
index 0000000..4a47b6d
Binary files /dev/null and b/multisearch/drive.png differ
diff --git a/multisearch/favicon.ico b/multisearch/favicon.ico
new file mode 100644
index 0000000..237f5b9
Binary files /dev/null and b/multisearch/favicon.ico differ
diff --git a/multisearch/google.png b/multisearch/google.png
new file mode 100644
index 0000000..a308dc4
Binary files /dev/null and b/multisearch/google.png differ
diff --git a/multisearch/index.css b/multisearch/index.css
new file mode 100644
index 0000000..39b616d
--- /dev/null
+++ b/multisearch/index.css
@@ -0,0 +1,92 @@
+html, body {
+ height: 100vh;
+ width: 100vw;
+}
+body {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ font-family: 'Comfortaa', cursive;
+ margin: 0;
+}
+.container {
+ display: flex;
+ flex-direction: column;
+ max-width: min(100vw, 80rem);
+ /* Hint */
+}
+.container > * {
+ margin: 0.5rem;
+}
+.heading {
+ font-size: 5rem;
+ margin: 1.5rem;
+ font-weight: 500;
+}
+@media screen and (max-width:540px) {
+ .heading {
+ font-size: 2.5rem;
+ }
+}
+.description {
+ font-style: oblique;
+ align-items: center;
+}
+.search_wrapper {
+ border: 0.125rem solid rgb(23, 23, 23);
+ height: 3rem;
+ padding: 0.25rem 0.75rem;
+ box-sizing: border-box;
+ border-radius: 0.5rem;
+ display: flex;
+ align-items: center;
+}
+.search_label{
+ transition: linear 0.25s;
+ transform: none;
+ position: absolute;
+ font-size: 1.25rem;
+ transform-origin: left;
+ background-color: white;
+ padding: 0 0.5rem;
+ z-index: -1;
+ margin-left: 1.5rem;
+}
+.search_wrapper:focus-within {
+ border-color: #303F9F;
+}
+.search_wrapper:focus-within > .search_label,
+.search_input:valid + .search_label {
+ transform: translateY(-1.5rem) scale(0.75);
+ transition: linear 0.25s;
+ z-index: 1;
+ color: #303F9F;
+}
+.search_input,
+.search_input:focus-visible {
+ background-color: transparent;
+ flex-grow: 1;
+ border: none;
+ font-family: 'Comfortaa', cursive;
+ font-size: 1.5rem;
+ padding: 0 0.5rem;
+ outline: none;
+ max-width: calc(100% - 2rem);
+}
+.search_button {
+ width: max-content;
+ display: flex;
+ align-items: center;
+ align-self: flex-end;
+ color: white;
+ background-color: #3F51B5;
+ border-radius: 0.25rem;
+ border: none;
+ padding: 0.5rem 0.75rem;
+}
+.search_icon {
+ width: 1.5rem;
+ height: 1.5rem;
+}
\ No newline at end of file
diff --git a/multisearch/index.html b/multisearch/index.html
new file mode 100644
index 0000000..2d93f25
--- /dev/null
+++ b/multisearch/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Multisearch
+
+
+
+
+
+
+
+
+
+
Multisearch
+
Start typing to choose a search engine
+
+
+
+
+
+
+