Mörkt tema
Inlämningsuppgift 1
Information
Se detaljerna kring inlämningsuppgiften här: betyggskala, deadlines, examinerade moment, osv.
VIKTIGT
Vi kommer BARA att arbeta med en HTML-fil, index.html i detta projekt. Allt innehåll ska alltså vara på en och samma sida i denna uppgift.
Däremot kan man dölja sektioner med CSS exempelvis.
Introduktion
Kursens första (individuella) uppgift är att skapa en webbshop. Uppgiften kommer att vara "nedbruten" i veckovisa uppgifter för att inte kännas övermäktigt.
Du hittar dock beskrivningen av hela uppgiften under Inlämningsuppgifter, men du kommer att (även på lektionstid) guide:as igenom uppgiften steg-för-steg.
🧑🎤 Strunta i CSS just nu, det är inte viktigt. Du kan roa dig med det om du tycker att sidan ser tråkig ut, men fokus på HTML och JavaScript denna vecka.
Veckans uppgift(er)
Pseudokod
Börja gärna varje uppgift med att skriva pseudokod, innan du börjar koda.
Produkter
Det första vi behöver är någon sorts "data" att jobba med, i det här fallet produkter. Fundera på vad som är en lämplig variabeltyp för att ha flera produkter, där varje produkt innehåller dess unika information.
Varje produkt ska ha följande:
- Ett namn
- Ett pris
- En rating
- En kategori
- Adressen till en bild/namnet på en bildfil (produktbild)
Du ska ha minst 10 produkter i din webbshop. Du ska ha max 3 kategorier totalt.
Visa information
Nästa steg är att "visa" vår information, dvs. skriva ut våra produkter i DOM-strukturen (HTML-dokumentet).
Vilka lämpliga verktyg ur din "verktygslåda" kan du använda för att åstadkomma detta?
- Glöm inte verktyget pseudokod för "logiken"!
- Hur kan du upprepa någonting flera gånger, utan att skriva kod 10 gånger?
- Hur kan du anropa någonting vid behov?
Det kanske fungerar om man har 10 produkter, men låt säga att du jobbar med en webbshop som har 10 000 produkter… då är det inte hållbart längre.
Filter
Nästa sak du ska göra är att skapa tre stycken interaktiva element (t.ex. knappar, radio buttons eller checkboxes - det är upp till dig) med namnet på respektive produktkategori du har.
När man klickar på ett filter (det sker ett "event") så ska produkterna som visas på skärmen filtreras.
Dvs. om jag har en produktkategori som heter "Choklad" och klickar på en knapp där det står "Choklad", då ska informationen på sidan uppdateras så att enbart produkterna med kategorin "Choklad" visas på sidan.
- Glöm inte verktyget pseudokod!
- Hur filtrerar man produkterna?
- Hur kan du modifiera koden från steget "Visa information" så att den visar specifika produkter?
Återställa filter
Vi vill kanske kunna visa alla produkter igen, och inte "fastna" i att bara ha filtrerade listor.
Hur kan vi göra det?
Börja med att skriva pseudokod.
Sortera
Produkterna ska gå att sortera utifrån namn, pris, kategori och rating.
Tillgänglighet
Glöm inte att testa att du kan utföra filtreringen med hjälp av tangentbordet (enbart).
Kommande veckor
Nästa vecka ska vi fokusera på själva varukorgen/kundvagnen, och sista veckan på beställningsformuläret och specialreglerna.