Webbshoppen del 2

Vi ska nu bygga vidare på vår webbshop och skapa en kategori-sida som matchar en av de kategorier som det finns musik för i lager-API:t.

Förkunskaper

Du bör ha klarat av kmom01 och uppgiften “Webbshoppen del 1” och jobbat igenom övningarna “Ett färgschema för vår webbshop” och “Rendera markdown i JavaScript”.

Kategorier i Lager-API:t

För varje produkt som du har kopierat över finns det en kategori. Det finns fyra kategorier: Pop, Hard rock, Hip-Hop och Country och det finns tre stycken album per kategori.

{
    "id": 46103,
    "article_number": null,
    "name": "Pink Voltage",
    "description": "### **Band Name:** **Pink Voltage**\n\n### **Tagline:** *Sugar, sparkles, and just enough sass to short-circuit your heart.*\n\n### **Backstory:**\n\nFormed in a candy-colored garage studio in Malibu, **Pink Voltage** is the brainchild of four glitter-drenched rebels with a love for bubblegum beats and fierce fashion. Originally brought together by a shared obsession with Y2K pop and 80s glam rock, the girls fused their styles into a new genre they call **Electro-Dream Pop**—think synths, sparkle, and savage hooks.\n\nEach member has a signature color and vibe:\n\n* **Lola Luxe (Lead vocals)** The diva with diamond pipes and a closet full of sequins. She started as a child pageant queen turned pop powerhouse.\n* **Neon Nia (DJ/Producer)** A tech-genius with a pink mohawk who programs beats like she codes dreams. Known for turning heartbreak into bangers.\n* **Cherry Blaze (Guitar & Hype)** A roller-skating punk princess who shreds bubblegum rock solos and inspires crowd-wide dance breakdowns.\n* **Glitta B (Rap/Style Icon)** The fashion-forward spitfire who drops pastel-colored bars with atomic confidence. A former fashion blogger turned lyrical slayer.\n\nThe band skyrocketed to fame after their debut single **Glitter Emergency** went viral on DollTok (a Barbie-world version of TikTok), leading to sold-out arena shows, a capsule collection with Mattel, and a Saturday morning animated series.\n\nThey stand for **self-expression, friendship, fierce femininity**, and proving that **you can be plastic and still be fantastic**.",
    "specifiers": null,
    "stock": 12,
    "location": "A1B4",
    "price": 1,
    "image_url": "https://cdn.jsdelivr.net/gh/emilfolino/order_api@master/public/img/pink_voltage.png",
    "category": "pop"
},

Kravspecifikation

1. Fortsätt bygga ut din category.html sida från övningen “Ett färgschema för vår webbshop”.

2. Gör ett färgschema som passar en av de 4 kategorierna av musik för produkterna.

3. Använd färgschemat för att skapa ett Ljust och ett mörkt tema där du varierar bakgrundsfärg och textfärg mellan teman. Gör det möjligt att välja mellan teman.

4. På din category.html sida ska de tre albummen som finns för din valda kategori visas upp med titel, bild och hela beskrivningen.

5. Skapa en tydlig länk från din förstasida till din category.html som underlättar navigation.