diff --git a/drive.PNG b/drive.PNG new file mode 100644 index 0000000..235863d Binary files /dev/null and b/drive.PNG differ diff --git a/index.css b/index.css index 09dae3a..80e158e 100644 --- a/index.css +++ b/index.css @@ -8,37 +8,38 @@ body { justify-content: center; align-items: center; box-sizing: border-box; - font-family: 'Comfortaa', cursive; + font-family: cursive; margin: 0; } .container { display: flex; flex-direction: column; - max-width: min(100vw, 80rem); - /* Hint */ + max-width: min(100vw, 80em); + } .container > * { margin: 0.5rem; } .heading { - font-size: 5rem; + font-size: 6rem; margin: 1.5rem; font-weight: 500; } @media screen and (max-width:540px) { .heading { - font-size: 2.5rem; + font-size: 3rem; } } .description { - font-style: oblique; + font-style:normal; + text-align: center; } .search_wrapper { - border: 0.125rem solid rgb(23, 23, 23); - height: 3rem; + border: 0.125rem solid rgb(10, 149, 56); + height: 4rem; padding: 0.25rem 0.75rem; box-sizing: border-box; - border-radius: 0.5rem; + border-radius: 1rem; display: flex; align-items: center; } @@ -48,7 +49,7 @@ body { position: absolute; font-size: 1.25rem; transform-origin: left; - background-color: white; + background-color: rgb(104, 140, 181); padding: 0 0.5rem; z-index: -1; margin-left: 1.5rem; @@ -65,7 +66,7 @@ body { } .search_input, .search_input:focus-visible { - background-color: transparent; + background-color: rgb(255, 255, 128);; flex-grow: 1; border: none; font-family: 'Comfortaa', cursive; @@ -79,7 +80,7 @@ body { display: flex; align-items: center; align-self: flex-end; - color: white; + color: rgb(21, 21, 21); background-color: #3F51B5; border-radius: 0.25rem; border: none; diff --git a/index.js b/index.js index ba99abc..095d30d 100644 --- a/index.js +++ b/index.js @@ -6,7 +6,12 @@ document.querySelector('.search_input').addEventListener('keyup', e => { switch(search_engine){ case 'google': case 'youtube': - case 'docs': break; + case 'docs': + case 'slides': + case 'drive': + case 'sheets': + case 'soundcloud': + break; default: search_engine = 'google'; search_query = input; } @@ -26,6 +31,21 @@ document.querySelector('.search_input').addEventListener('keyup', e => { 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 'sheets': + image.src='sheets.png'; + image.alt='Google Sheets icon'; + case 'soundcloud': + image.src='soundcloud.png'; + image.alt = 'Soundcloud icon'; + break; } } if(e.key === 'Enter') @@ -36,7 +56,19 @@ document.querySelector('.search_input').addEventListener('keyup', e => { case 'youtube': window.location = `https://www.youtube.com/results?search_query=${search_query}`; break; + case 'sheets': + window.location = `https://sheets.google.com/spreadsheet/?q=${search_query}`; + break; + case 'drive': + window.location =`https://drive.google.com/drive/?q=${search_query}`; + break; + case 'slides': + window.location =`https://slides.google.com/slides/?q=${search_query}`; + break; + case 'soundcloud': + window.location=`https://soundcloud.com/?q=${search_query}`; default: window.location = `https://www.google.com/search?q=${search_query}`; + } }); \ No newline at end of file diff --git a/sheets.PNG b/sheets.PNG new file mode 100644 index 0000000..82854c8 Binary files /dev/null and b/sheets.PNG differ diff --git a/slides.PNG b/slides.PNG new file mode 100644 index 0000000..ce1a975 Binary files /dev/null and b/slides.PNG differ diff --git a/souncloud.PNG b/souncloud.PNG new file mode 100644 index 0000000..d43dbe0 Binary files /dev/null and b/souncloud.PNG differ