From 8e8adab8eb4b70af5838d76e2f55bb65d309cf60 Mon Sep 17 00:00:00 2001 From: Martin Sunnset Date: Tue, 15 Sep 2026 12:48:52 +0200 Subject: [PATCH 1/5] Added top 10 and bottom 10 songs to front page --- webdev-prosjekt1/src/App.css | 42 +++++++++++++++++++++++++++++++++++- webdev-prosjekt1/src/App.tsx | 28 +++++++++++++++++++++++- 2 files changed, 68 insertions(+), 2 deletions(-) diff --git a/webdev-prosjekt1/src/App.css b/webdev-prosjekt1/src/App.css index 63a8f47..2f9c4b0 100644 --- a/webdev-prosjekt1/src/App.css +++ b/webdev-prosjekt1/src/App.css @@ -65,7 +65,47 @@ body { padding: 18px 0 50px; display: flex; - justify-content: flex-end; + align-items: center; + justify-content: space-between; + gap: 24px; +} + +.top-tracks-section { + display: flex; + gap: 24px; + + flex: 1; + min-width: 0; +} + +.top-tracks-group { + display: flex; + flex-direction: column; + gap: 14px; + + flex: 1; + min-width: 0; +} + +.top-tracks-group .card-list { + max-height: 460px; + overflow-y: auto; +} + +@media (max-width: 1100px) { + .hero-section { + flex-direction: column; + } + + .top-tracks-section { + width: 100%; + } +} + +@media (max-width: 700px) { + .top-tracks-section { + flex-direction: column; + } } .hero-art { diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx index 65bbf73..150ef77 100644 --- a/webdev-prosjekt1/src/App.tsx +++ b/webdev-prosjekt1/src/App.tsx @@ -13,7 +13,7 @@ import { AlbumCard } from './components/AlbumCard'; import { ArtistCard } from './components/ArtistCard'; import { FilterPopup, EMPTY_FILTERS } from './components/FilterPopup'; import type { Album, AlbumTrack, Artist, Track } from './api/types'; -import { fetchTrack, search } from './api/spotify'; +import { fetchTrack, fetchTracks, search, TOP_10_IDS, BOTTOM_10_IDS } from './api/spotify'; import filterIcon from './assets/filter.png'; import musicWizImage from './assets/musicwiz.png'; @@ -128,6 +128,18 @@ function App() { enabled: query.trim().length > 0, }); + const { data: topTracks = [] } = useQuery({ + queryKey: ['top-10-tracks'], + queryFn: () => fetchTracks(TOP_10_IDS), + staleTime: Infinity, + }); + + const { data: bottomTracks = [] } = useQuery({ + queryKey: ['bottom-10-tracks'], + queryFn: () => fetchTracks(BOTTOM_10_IDS), + staleTime: Infinity, + }); + const artistGenresById = new Map(); results?.artists.forEach((artist) => { if (artist.genres) { @@ -218,6 +230,20 @@ function App() { ) : (
+
+
+

Top 10 of all time

+
    + {topTracks.map((track) => handleTrackClick(track)} />)} +
+
+
+

Bottom 10 of all time

+
    + {bottomTracks.map((track) => handleTrackClick(track)} />)} +
+
+
A musical wizard From 5b3fc4deb3060fbf78187004a96fc004d48acdea Mon Sep 17 00:00:00 2001 From: Martin Sunnset Date: Tue, 15 Sep 2026 12:52:38 +0200 Subject: [PATCH 2/5] Changed Div elements to be other elements instead --- webdev-prosjekt1/src/App.tsx | 26 +++++++++---------- .../src/components/FilterPopup.css | 4 +++ .../src/components/FilterPopup.tsx | 16 ++++++------ 3 files changed, 25 insertions(+), 21 deletions(-) diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx index 150ef77..0911508 100644 --- a/webdev-prosjekt1/src/App.tsx +++ b/webdev-prosjekt1/src/App.tsx @@ -215,37 +215,37 @@ function App() { )} {hasSearched ? (
-
+

Tracks

    {filteredTracks.map((track) => handleTrackClick(track)} />)}
-
-
+
+

Albums

    {filteredAlbums.map((album) => handleAlbumClick(album)} />)}
-
-
+
+

Artists

    {filteredArtists.map((artist) => handleArtistClick(artist)} />)}
- +
) : (
-
-
+
-
+
+

Bottom 10 of all time

    {bottomTracks.map((track) => handleTrackClick(track)} />)}
- - +
+
-
+
diff --git a/webdev-prosjekt1/src/components/FilterPopup.css b/webdev-prosjekt1/src/components/FilterPopup.css index 9f11c20..94729a3 100644 --- a/webdev-prosjekt1/src/components/FilterPopup.css +++ b/webdev-prosjekt1/src/components/FilterPopup.css @@ -139,6 +139,10 @@ display: flex; flex-wrap: wrap; gap: 8px; + + margin: 0; + padding: 0; + list-style: none; } .genre-chip { diff --git a/webdev-prosjekt1/src/components/FilterPopup.tsx b/webdev-prosjekt1/src/components/FilterPopup.tsx index 64924c3..95ef2e1 100644 --- a/webdev-prosjekt1/src/components/FilterPopup.tsx +++ b/webdev-prosjekt1/src/components/FilterPopup.tsx @@ -29,11 +29,11 @@ export const FilterPopup = ({ filters, onChange, onClear, onClose }: FilterPopup return (
-
event.stopPropagation()}> -
+
event.stopPropagation()}> +

Filter

-
+
+ +
); }; From d62f5a2e9d820e6af5e099b29186ecc32d00cc6d Mon Sep 17 00:00:00 2001 From: Martin Sunnset Date: Tue, 15 Sep 2026 13:14:29 +0200 Subject: [PATCH 3/5] Updated UI to show top 10 and bottom 10 songs in a list on front page --- webdev-prosjekt1/src/App.css | 47 ++++++++++++++++++++++++++++++++---- 1 file changed, 42 insertions(+), 5 deletions(-) diff --git a/webdev-prosjekt1/src/App.css b/webdev-prosjekt1/src/App.css index 2f9c4b0..89b41bd 100644 --- a/webdev-prosjekt1/src/App.css +++ b/webdev-prosjekt1/src/App.css @@ -11,7 +11,7 @@ body { .app-shell { min-height: 100vh; background: var(--page_background_gradient); - overflow: hidden; + overflow-x: hidden; } .search-section { @@ -65,7 +65,7 @@ body { padding: 18px 0 50px; display: flex; - align-items: center; + align-items: flex-start; justify-content: space-between; gap: 24px; } @@ -87,9 +87,38 @@ body { min-width: 0; } +.top-tracks-group .search-result-card { + position: relative; +} + .top-tracks-group .card-list { - max-height: 460px; - overflow-y: auto; + counter-reset: track-rank; +} + +.top-tracks-group .search-result-card::before { + counter-increment: track-rank; + content: counter(track-rank); + + position: absolute; + top: 4px; + left: 4px; + z-index: 2; + + display: grid; + place-items: center; + + width: 20px; + height: 20px; + + border-radius: 50%; + + background: var(--primary_color); + color: var(--primary_background_color); + box-shadow: 0 1px 4px var(--shadow_black); + + font-size: 0.7rem; + font-weight: 700; + line-height: 1; } @media (max-width: 1100px) { @@ -100,6 +129,11 @@ body { .top-tracks-section { width: 100%; } + + .hero-art { + position: relative; + top: 0; + } } @media (max-width: 700px) { @@ -109,7 +143,8 @@ body { } .hero-art { - position: relative; + position: sticky; + top: 24px; margin: var(--margin); @@ -118,6 +153,8 @@ body { display: grid; place-items: center; + + flex-shrink: 0; } .hero-art img { From 175e00a650a4261d208f7546a887b6bb337d9765 Mon Sep 17 00:00:00 2001 From: Martin Sunnset Date: Tue, 15 Sep 2026 13:33:42 +0200 Subject: [PATCH 4/5] Updated Ids of the top 10 and bottom 10 songs to be the correct ones --- webdev-prosjekt1/src/api/spotify.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/webdev-prosjekt1/src/api/spotify.ts b/webdev-prosjekt1/src/api/spotify.ts index 73c07c7..d77ae82 100644 --- a/webdev-prosjekt1/src/api/spotify.ts +++ b/webdev-prosjekt1/src/api/spotify.ts @@ -9,16 +9,16 @@ let accessToken: string | null = null; let expiresAt = 0; export const TOP_10_IDS = [ - "0AJ62x1CXjJf3VW25CeZXa", // Stairway To Heaven - Led Zeppelin + "5CQ30WqJwcep0pYcV4AMNc", // Stairway To Heaven - Led Zeppelin "5HNCy40Ni5BZJFw1TKzRsC", // Comfortably Numb - Pink Floyd - "32mwlJqE38D1qCoFwVjgpZ", // Bohemian Rhapsody - Queen + "2ODUgS9kk95bqVaf9EzyOU", // Bohemian Rhapsody - Queen "2WfaOiMkCvy7F5fcp2zZ8L", // Take On Me - a-ha "6TSP9oSbXONHk39GHvOSs3", // Telegraph Road - Dire Straits - "6plRwenssWRPbd5WIT1OLO", // Africa - TOTO - "5hxy15nCnKjhbe7sVjPtLT", // Viva La Vida - Coldplay - "2WWjIGZF6snSCqhRdNTPEj", // Beat It - Michael Jackson + "2374M0fQpWi3dLnB54qaLX", // Africa - TOTO + "1mea3bSkSGXuIRvnydlB5b", // Viva La Vida - Coldplay + "3BovdzfaX4jb5KFQwoPfAw", // Beat It - Michael Jackson "3dYD57lRAUcMHufyqn9GcI", // Take Me To Church - Hozier - "3Ttx1ky0ZYaVjXZWdcmwh5", // Blinding Lights - The Weeknd + "0VjIjW4GlUZAMYd2vXMi3b", // Blinding Lights - The Weeknd ]; export const BOTTOM_10_IDS = [ @@ -26,12 +26,12 @@ export const BOTTOM_10_IDS = [ "1musbempyJAw5gfSKZHXP9", // Anxiety - Doechii "4l62h4tiuUwn7eD6hxMlVQ", // It's Everyday Bro - Jake Paul ft. Team 10 "1KEdF3FNF9bKRCxN3KUMbx", // Friday - Rebecca Black - "5ZULALImTm80tzUbYQYM9d", // Dance Monkey - Tones And I + "2XU0oxnq2qxCpomAAuJY8K", // Dance Monkey - Tones And I "5RIVoVdkDLEygELLCniZFr", // Watch Me (Whip / Nae Nae) - Silentó "43ZyHQITOjhciSUUNPVRHc", // Gucci Gang - Lil Pump "0VNDOpBbUYtSpCFY7HUA3D", // Baby - Justin Bieber ft. Ludacris - "5AUE3qJ6sCsgdUaaVK02uq", // Astronaut In The Ocean - Masked Wolf - "4t6iAuF1TDNqTis3S99iQa", // Mil etter mil - Jahn Teigen + "3Ofmpyhv5UAQ70mENzB277", // Astronaut In The Ocean - Masked Wolf + "28j1U8Ojtip5NoAweQclgK", // Mil etter mil - Jahn Teigen ]; From b06de86b3e3b496d0826ed99e84b944f561ad144 Mon Sep 17 00:00:00 2001 From: Martin Sunnset Date: Tue, 15 Sep 2026 13:34:31 +0200 Subject: [PATCH 5/5] Updated Searchbar to say tracks instead of songs --- webdev-prosjekt1/src/components/Searchbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webdev-prosjekt1/src/components/Searchbar.tsx b/webdev-prosjekt1/src/components/Searchbar.tsx index 2c2240a..2f4d425 100644 --- a/webdev-prosjekt1/src/components/Searchbar.tsx +++ b/webdev-prosjekt1/src/components/Searchbar.tsx @@ -20,7 +20,7 @@ export const Searchbar = ({ onSearch }: SearchbarProps) => { return (
- setQuery(event.target.value)}/> + setQuery(event.target.value)}/>
) }