Multisearch

.github/pull_request_template.md

@@ -1,9 +1,9 @@
 ## Checklist
 
 ### Required changes:
-- [ ] Center the description (Line 17 in HTML file) using a single change in CSS
-- [ ] Fix JS so that when the search is executed, the search engine is not present in query
-- [ ] Add Google Drive, Google Slides and Google Sheets as a provider
+- [x] Center the description (Line 17 in HTML file) using a single change in CSS
+- [x] Fix JS so that when the search is executed, the search engine is not present in query
+- [x] Add Google Drive, Google Slides and Google Sheets as a provider
 
 ### Optional changes:
 - [ ] Add other search providers (GitHub, Spotify, etc)

README.md

@@ -5,5 +5,8 @@ Supported providers (first_word):
 - Google (google) (Default)
 - YouTube (youtube)
 - Google Docs (docs)
+- Google slides (slides)
+- Google sheets (sheets)
+
 
 [Icons created by freepik on Flaticon](https://www.flaticon.com/authors/freepik)

index.css

@@ -1,21 +1,27 @@
 html, body {
     height: 100vh;
     width: 100vw;
+    background-image: url(bg.jpg);
+    background-size: cover;
+
 }
 body {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    font-family: 'Comfortaa', cursive;
+    font-family: 'JetBrains Mono', cursive;
     margin: 0;
 }
 .container {
     display: flex;
     flex-direction: column;
     max-width: min(100vw, 80rem);
     /* Hint */
+    margin: auto;
+    text-align: center;
+    justify-content:  center;
 }
 .container > * {
     margin: 0.5rem;
@@ -24,6 +30,7 @@ body {
     font-size: 5rem;
     margin: 1.5rem;
     font-weight: 500;
+    color: aliceblue;
 }
 @media screen and (max-width:540px) {
     .heading {
@@ -32,15 +39,18 @@ body {
 }
 .description {
     font-style: oblique;
+    color: aliceblue;
 }
 .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;
+    border-color: aliceblue;
     display: flex;
     align-items: center;
+    background-color:skyblue;
 }
 .search_label{
     transition: linear 0.25s;
@@ -68,7 +78,7 @@ body {
     background-color: transparent;
     flex-grow: 1;
     border: none;
-    font-family: 'Comfortaa', cursive;
+    font-family: 'JetBrains Mono', cursive;
     font-size: 1.5rem;
     padding: 0 0.5rem;
     outline: none;

index.js

@@ -2,11 +2,14 @@ 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 'drive': 
+        case 'slides':
+        case 'sheets': break;
         default: search_engine = 'google';
         search_query = input;
     }
@@ -26,6 +29,19 @@ document.querySelector('.search_input').addEventListener('keyup', e => {
                 image.src = 'docs.png';
                 image.alt = 'Google Docs icon';
                 break;
+            case 'drive':
+                image.src = 'drive.png';
+                image.alt = 'Google drive icon';
+                break;
+            case 'slides':
+                image.src = 'slides.png';
+                image.alt = 'Google slides icon';
+                break;
+            case 'sheets':
+                image.src = 'sheets.png';
+                image.alt = 'Google sheets 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 'drive':
+                window.location =`https://drive.google.com/drive/search?q=${search_query}`;
+                break;
+            case 'slides':
+                window.location =`https://docs.google.com/presentation/u/0/?tgif=d&q=${search_query}`;
+                break;
+            case 'sheets':
+                window.location =`https://docs.google.com/spreadsheets/u/0/?tgif=d&q=${search_query}`;
+                break;
             default: 
                 window.location = `https://www.google.com/search?q=${search_query}`;
         }