made changes

index.css

@@ -32,6 +32,7 @@ body {
 }
 .description {
     font-style: oblique;
+    align-items: center;
 }
 .search_wrapper {
     border: 0.125rem solid rgb(23, 23, 23);

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}`;
         }

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.

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)

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;
+}

multisearch/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="in-en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Multisearch</title>
+        <link rel="icon" href="favicon.ico">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <link rel="stylesheet" href="index.css">
+    </head>
+    <body>
+        <div class="container">
+            <span class="heading">Multisearch</span>
+            <span class="description">Start typing to choose a search engine</span>
+            <div class="search_wrapper">
+                <img src="google.png" alt="Google Icon" class="search_icon">
+                <input class="search_input" type="text" name="search" alt="Search box" required pattern=".*\S+.*" id="input">
+                <label class="search_label" for="search">Search</label>
+            </div>
+            <button class="search_button" type="submit">Search <span class="material-icons">arrow_forward</span> </button>
+        </div>
+        <script src="index.js"></script>
+    </body>
+</html>

multisearch/index.js

@@ -0,0 +1,67 @@
+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(1,).join(' ');
+    switch(search_engine){
+        case 'google':
+        case 'youtube':
+        case 'docs':
+        case 'spotify':
+        case 'sheets':
+        case 'drive':
+            break;
+        default: search_engine = 'google';
+        search_query = input;
+    }
+    if(search_engine !== current_search) {
+        current_search = search_engine;
+        const image = document.querySelector('.search_icon');
+        switch(search_engine){
+            case 'google':
+                image.src = 'google.png';
+                image.alt = 'Google icon';
+                break;
+            case 'youtube':
+                image.src = 'youtube.png';
+                image.alt = 'YouTube icon';
+                break;
+            case 'docs':
+                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')
+        switch(search_engine) {
+            case 'docs':
+                window.location = `https://docs.google.com/document/?q=${search_query}`;
+                break;
+            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}`;
+        }
+});