CityTab - Last Devlog

A City Pop inspired new tab!

Background info

It’s finished!!! After working on this project for a good while, I finally decided to push through and finish it. I removed the option to hide the widgets because I couldn’t figure out how to make the button work properly, and because I’ve spent wayy too much time on this project and I just want to move on to new stuff.

What’s new

• I’ve added the rest of the song audios and images
• Music tracklist!
  • I’ve added a list that shows all the music currently on the music player
• Readme is finished!

I’m going to ship this project in a few minutes. Maybe in the future I’ll add more features. But, for now, it’s finished. Thanks for all the support on this project!

Until next time!

Citytab - It’s almost done!

A City Pop inspired new tab!

What’s new

• Music player
  • Go to it’s section to learn more about it!
• Updated name input in top bar
  • You can write your name in the settings. It’s saves, so you don’t have to rewrite it every time you enter the website!
• Added toggles to hide widgets and/or bookmarks
  • Not currently working tho😭 It’ll be coded by the next devlog

New widget: Music player

I finally made it!! Fully functioning music player with about ~10 ish songs.

• Song name and artist shows up in the top bar
• Includes a play/pause, skip, and prev buttons
• Border turns neon purple to match the other widgets!
• If you want to suggest a citypop song, write it in the comments and I’ll add it!!<3

To-do

• Code the toggles/buttons in the settings menu
  • Add css/decorate them
• Add the rest of the songs to the music player
• Add a song list to the music player
• Write Readme

That’s it for now. Until next time!

CityTab

A City Pop inspired new tab!

What’s new

• Calendar widget!!
  • Displays the current year, month, and day
  • You can look at past/upcoming months + years
• Settings button + screen
  • Will eventually have toggles to hide certain widgets/bookmarks and be able to change what browser you can use
• Hover animations!
  • Hovering over the bookmarks/widgets now gives them neon borders!
• Re-colored the top bar

To-do

The project is almost done! Just a few more things to add…

• Music player! (The main star of this project)
  • If you have a fav song from the City pop genre, feel free to suggest me them in the comments! I’ll be more than happy to add them! <3
• Add toggles to settings screen
• Change the font of the clock

That’s it for now. Until next time!

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!