CityTab

A City Pop inspired new tab!

New widget: Weather app!

Most weather apps have a search bar where you can find your city and see the weather, but I wanted to use geolocation api so the weather automatically appears when you allow the website to access your location.
.
I was following like 3 different tutorials to get the code to work. The latitude and longitude kept showing up as “undefined” every time I ran the code. Turns out I had to set them to “const” and not as variables😐. So after that, I was able to get everything else to work. I gave it some basic styling for right now.
.
Big thanks to @nokira!! I saw that they did something similar in their project (MainTab) and their code helped me figure out what was wrong with mine. So, once again, thank you!!

What’s new

• Top bar
  • “Now playing” section with scrolling animation! Will be used when the music player is implemented
  • A welcome section on the left where you’ll be able to add your name
• Weather widget
  • Shows the current temp
  • Shows your current location under the temp

To-do

• Add a settings button to the topbar
• Customize top bar more (change colors)
• Fix weather widget font sizing (make temp font-size larger)
• Make calendar widget

That’s it for now. Until next time!

CityTab

A City Pop inspired new tab!

Background info

New project wooooo!!! Making the basics of the website took me wayy longer than if should’ve, but at least I got it done 😭

I followed a tutorial for the search bar to get the basic searching functions. After that, I changed the look and size of it to fit the website and created a function to let you search stuff by pressing “enter”.

Bug fixes

Fixing bugs took the most time out of this session. I mainly had issues centering items. After fighting with the “justify-content” and “align-items”, I ended up just using transform to center everything.

What I have so far

• Search bar
• Bookmarks (youtube, stardance, github, and slack)
• Working clock/time

To-do

• Create a top bar
  • Will eventually display music when music player is done
• Make a weather widget
• Make clock/time more visible
  • Also just realized that it’s not centered… so yea imma go fix that

Thanks for reading! Until next time!