diff --git a/README.md b/README.md index 97ffa26..2a95325 100644 --- a/README.md +++ b/README.md @@ -5,5 +5,11 @@ Supported providers (first_word): - Google (google) (Default) - YouTube (youtube) - Google Docs (docs) +- Google Sheets (sheets) +- Google Slides (slides) +- Github (github) +- Bing (bing) +- Spotify (spotify) +- Amazon (amazon) -[Icons created by freepik on Flaticon](https://www.flaticon.com/authors/freepik) \ No newline at end of file +[Icons created by freepik on Flaticon](https://www.flaticon.com/authors/freepik) diff --git a/amazon.png b/amazon.png new file mode 100644 index 0000000..63994d8 Binary files /dev/null and b/amazon.png differ diff --git a/background.png b/background.png new file mode 100644 index 0000000..633a782 Binary files /dev/null and b/background.png differ diff --git a/bing.png b/bing.png new file mode 100644 index 0000000..94aeddf Binary files /dev/null and b/bing.png differ diff --git a/docs.png b/docs.png index c3c99a5..05fc674 100644 Binary files a/docs.png and b/docs.png differ diff --git a/drive.png b/drive.png new file mode 100644 index 0000000..c2584a0 Binary files /dev/null and b/drive.png differ diff --git a/github.png b/github.png new file mode 100644 index 0000000..9490ffc Binary files /dev/null and b/github.png differ diff --git a/google.png b/google.png index a308dc4..d4912f5 100644 Binary files a/google.png and b/google.png differ diff --git a/index.css b/index.css index 09dae3a..37f0342 100644 --- a/index.css +++ b/index.css @@ -2,7 +2,10 @@ html, body { height: 100vh; width: 100vw; } + body { + background-image: url("background.png"); + color:white; display: flex; flex-direction: column; justify-content: center; @@ -15,7 +18,7 @@ body { display: flex; flex-direction: column; max-width: min(100vw, 80rem); - /* Hint */ + align-items: center; } .container > * { margin: 0.5rem; @@ -23,7 +26,9 @@ body { .heading { font-size: 5rem; margin: 1.5rem; - font-weight: 500; + font-weight: 900; + font-family: 'Montserrat', sans-serif; + color: white; } @media screen and (max-width:540px) { .heading { @@ -41,6 +46,7 @@ body { border-radius: 0.5rem; display: flex; align-items: center; + background-color: white; } .search_label{ transition: linear 0.25s; @@ -52,6 +58,7 @@ body { padding: 0 0.5rem; z-index: -1; margin-left: 1.5rem; + color: black; } .search_wrapper:focus-within { border-color: #303F9F; @@ -80,7 +87,7 @@ body { align-items: center; align-self: flex-end; color: white; - background-color: #3F51B5; + background-color:#41c23a; border-radius: 0.25rem; border: none; padding: 0.5rem 0.75rem; diff --git a/index.html b/index.html index 2d93f25..e1bba9c 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,9 @@ + +
@@ -20,7 +22,7 @@
- + diff --git a/index.js b/index.js index ba99abc..d07e165 100644 --- a/index.js +++ b/index.js @@ -5,38 +5,101 @@ document.querySelector('.search_input').addEventListener('keyup', e => { let search_query = input.split(' ').splice(0).join(' '); switch(search_engine){ case 'google': + case 'drive': + case 'slides': + case 'sheets': case 'youtube': - case 'docs': break; - default: search_engine = 'google'; + case 'docs': + case 'amazon': + case 'bing': + case 'github': + case 'spotify': + break; + default: + search_engine = 'google'; search_query = input; } + let final_query = search_query.replace((search_engine + ' '), ''); // replacing original query without the name of the search engine 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; + image.src = 'google.png'; + image.alt = 'Google icon'; + break; case 'youtube': - image.src = 'youtube.png'; - image.alt = 'YouTube icon'; + image.src = 'youtube.png'; + image.alt = 'YouTube icon'; break; case 'docs': image.src = 'docs.png'; image.alt = 'Google Docs icon'; break; + case 'slides': + image.src= 'slides.png' + image.alt= 'Google slides icon'; + break; + case 'drive': + image.src= 'drive.png' + image.alt= 'Google drive icon'; + break; + case 'bing': + image.src= 'bing.png' + image.alt= 'bing icon'; + break; + case 'amazon': + image.src= 'amazon.png' + image.alt= 'Amazon icon'; + break; + case 'sheets': + image.src= 'sheets.png' + image.alt=' Sheets icon'; + break; + case 'github': + image.src= 'github.png' + image.alt=' github icon'; + break; + case 'spotify': + image.src= 'spotify.png' + image.alt=' spotify icon'; + break; } } if(e.key === 'Enter') switch(search_engine) { case 'docs': - window.location = `https://docs.google.com/document/?q=${search_query}`; + window.location = `https://docs.google.com/document/?q=${final_query}`; + l break; case 'youtube': - window.location = `https://www.youtube.com/results?search_query=${search_query}`; + window.location = `https://www.youtube.com/results?search_query=${final_query}`; + break; + case 'slides': + window.location = `https://docs.google.com/presentation/?q=${final_query}`; + break; + case 'drive': + window.location = `https://drive.google.com/drive/search?q=${final_query}`; + break; + case 'bing': + window.location = `https://www.bing.com/search?q=${final_query}`; + break; + case 'amazon': + window.location = `https://www.amazon.in/s?k=${final_query}`; + break; + case 'sheets': + window.location = `https://docs.google.com/spreadsheets/?q=${final_query}`; + break; + case 'google': + window.location = `https://www.google.com/search?q=${final_query}`; + break; + case 'github': + window.location = `https://github.com/search?q=${final_query}`; + break; + case 'spotify': + window.location = `https://open.spotify.com/search/${final_query}`; break; default: - window.location = `https://www.google.com/search?q=${search_query}`; + window.location = `https://www.google.com/search?q=${final_query}`; } -}); \ No newline at end of file +}); diff --git a/sheets.png b/sheets.png new file mode 100644 index 0000000..67a4b98 Binary files /dev/null and b/sheets.png differ diff --git a/slides.png b/slides.png new file mode 100644 index 0000000..2b25d2e Binary files /dev/null and b/slides.png differ diff --git a/spotify.png b/spotify.png new file mode 100644 index 0000000..c9b053d Binary files /dev/null and b/spotify.png differ diff --git a/youtube.png b/youtube.png index e72ba61..d899381 100644 Binary files a/youtube.png and b/youtube.png differ