Gogel - The crappier google

https://gogel.glitch.me/

Awesome!
Kind of reminds me of Zearch by @rmx which I use on my Chrome every day. Itā€™s sooo cool and works much better than the other new tab page.

With a bit of work, Gogel could look awesome!
Eddie

5 Likes

Ok i added new stuff:

  • Dark Mode now has a background image
  • I added a top navigation bar, that only tells the time
  • I added a light mode button
  • I made the logo bigger and made it closer to the search bar
    I love css

Looks amazing!

1 Like

I donā€™t know if you find it annoying (let me know) but I would ask why do you reposition the mode button? Isnā€™t it easier for a user to click between the modes if they didnā€™t move?

And I would tend to call it ā€œLightā€ rather than white. Apps tend to call it dark mode and light mode.

2 Likes

Alright! I repositioned the light mode button becauseā€¦ idk
Iā€™ll probably put it in the dark modeā€™s position in the next update

New Update!

  • You can directly go to websites by typing their URL
  • You can now search by pressing ENTER instead of clicking the search button!
  • White Mode is now called Light Mode!
  • White Mode button is repositioned to be in Dark Mode buttonā€™s position.
  • I changed light mode buttonā€™s color to be dark, so it fits in dark mode, and i change dark mode buttonā€™s color to be light, so it fits in light mode.

Yet another update!

  • You can now switch backgrounds with the new ā€œSwitch backgroundā€ button!
  • There is a random background each time you reload the page!

For anyone wondering, i got them from https://pexels.com/

Thatā€™s cool you took the suggestions as I intended :slight_smile: Would you like a couple more?

in this case you donā€™t get anything out of setting date to getTime. new Date has done that already.
:
etInterval(function(){ var date = new Date;
date.setTime(date.getTime());

And for the formatting you might get by with const d = new Date().toLocaleTimeString();

rather that concatenating it as you have done

document.getElementById(ā€œtimeā€).innerText = date.getHours() + ā€œ:ā€ + date.getMinutes() + ā€œ:ā€ + date.getSeconds()

1 Like

Thanks!

Now i added google analytics and a privacy policy along with it.
https://gogel.glitch.me/

You want one that will reduce the code by about a 25% while making it more maintainable? I think you will see it immediately as I point it out butā€¦

There are fundamentally two arrays that contain paths to pexels images.Each of the two is repeated twice. You can sort of see you have an issue when youā€™re forced to name one of them textArraay to avoid a naming conflict. Check your function bg() and you see the same two arrays.

var textArraay = [
ā€˜https://images.pexels.com/photos/531321/pexels-photo-531321.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260ā€™,

The arrays can exist throughout the life of the page you donā€™t need two copies and if you make them two dimensional one array can hold both sets of data. So dark could be the array[0] and light could be array[1] for instance.

If you look at the element above you will see it is 99% pattern with only two values that ā€œmust be the sameā€ and vary per image. That suggests if you wanted to the arrays could consist of two sets of 7 numeric values. Those values can be in-lined when you set the backgroundImage url.

Finally your random background routine can (as far as I can tell) never select the original images because they arenā€™t in the array. Might be handy to place them in the array and simply reference the first element as the default.

There are a few more items but Iā€™ll give you a moment to digest the stuff above. Iā€™m having fun, hopefully you are. I realize that the site ultimately only needs to work but refactoring for reliability and reuse is the lifeblood of software development.

2 Likes

Message From The Owner:

Post a message there telling people that my account is temporarily on hold and i canā€™t post anything

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.