Webbutveckling 1 · område 6 · uppgift

Projekt 5 – Moduler i din egen sajt

• 5 feb Inlämning kl 23:59 Projekt 5 – repo-länken lämnas i itslearning.

1. Uppdraget

Du ska bygga in minst två moduler ur modulbiblioteket i din egen sajt, anpassa dem så att de hör hemma där, och kunna förklara vad koden gör.

Det är inte en uppgift i att skriva JavaScript från grunden. Det är en uppgift i att läsa färdig kod, koppla in den rätt, ändra det som ska ändras – och låta bli det som inte ska ändras. Så ser det mesta av webbutveckling ut, och det är därför området är byggt så.

Sajten är samma som förut: den du byggde i Projekt 3 och som växt sedan område 2. Nu lägger den ett lager till.

2. Vilken sajt gäller det?

Samma regel som i Projekt 3, och samma två vägar.

Bygg vidare. Din sajt från Projekt 3, i samma repo. Det är vägen de flesta tar, och den som ger mest: modulerna hamnar i en sajt som redan är responsiv och tillgänglig, och du ser direkt om de passar.

Börja om. Har du ingen sajt att bygga vidare på – börja med områdets exempelsajt som förlaga, i ett nytt publikt repo. Du får mer arbete, men du hamnar inte efter. Säg till mig vilken väg du tar innan du börjar.

Båda vägarna bedöms med samma matris.

3. Modulerna

Sex finns i modulbiblioteket:

Välj efter vad din sajt behöver, inte efter vilken som ser enklast ut. En hamburgermeny på en sajt med tre menylänkar är en modul som gör sajten sämre, och det syns i matrisen.

Vill du använda en modul som inte finns i biblioteket: fråga mig först. Kravet är att du kan förklara varje rad i den, och det blir svårt med kod från nätet.

4. Kraven

Kryssa av allt eftersom. Kryssen sparas i din webbläsare.

Nollställ alla kryss

5. Tekniska krav

• Filstruktur: js/ i repots rot, en fil per modul. Gemener, bindestreck, inga å ä ö i filnamn.
• defer på varje script-tagg, sist i body. Aldrig i head utan defer.
• Inget onclick eller annat beteende i HTML-attribut. Beteende hör hemma i .js-filen – samma princip som när stilarna flyttade ut ur style-attributen i område 3.
• Ingen innerHTML för text som kommer utifrån. Är det text, använd textContent.
• Inga bibliotek. Ingen jQuery, ingen Bootstrap, inget hämtat från en CDN. Modulerna är byggda för att klara sig utan.
• Validering: HTML hos validator.w3.org, CSS hos jigsaw.w3.org/css-validator. Noll fel.
• Två webbläsare. Testa i Chrome eller Edge, och i Firefox eller Safari. Det görs på lektion 61.
• Mobil. Öppna den publicerade adressen i telefonen innan du lämnar in.

Det här lämnas in

Repo-länken, i itslearning-uppgiften Projekt 5, senast fredag 5 februari 23:59. Repot ska vara publikt och sajten publicerad. Kontrollera adressen i ett privat fönster innan du lämnar in.

README.md är en del av inlämningen, inte ett tillägg. Det är där modulvalet, anpassningarna och – för A – jämförelsen står.

Så kan README-avsnittet se ut

Två till tre meningar per modul räcker. Det här är inte en uppsats – det är en anteckning till den som ska förstå dina val.

## Moduler

**Mörkt läge** (js/morkt-lage.js) – alla sidor.
Sajten hade redan ett mörkt färgschema från område 3, men besökaren kunde inte
välja själv. Nu går det, och valet finns kvar nästa besök. Jag bytte NYCKEL till
"cykelklubben-lage" så att den inte krockar med andra sajter.

**Filtrerbart galleri** (js/galleri.js) – turer.html.
Sidan har fjorton turer i tre kategorier, och man fick scrolla förbi allt för att
hitta en dagstur. Knapparna byggs ur data-grupp, så jag slipper uppdatera skriptet
när jag lägger till en tur.

Ändrat under ÄNDRA HÄR-zonen: i galleri.js stänger ett klick på den redan valda
knappen av filtret igen, så att man kommer tillbaka till alla turer utan att leta
efter "Alla". Två rader i filtrera().

Lägg avsnittet sist i din README.md, under det som redan står där.

6. Bedömningsmatris

E kräver alla ska-krav. C kräver E plus bör-kraven. A kräver C plus utmaningarna. Ett kriterium på hög nivå kompenserar inte ett som saknas.

7. Kom igång – de tre första sakerna

1. Välj en modul och bygg in den i dag. Ta den lättaste som passar din sajt – mörkt läge eller formulärvalidering kräver minst ny HTML. Följ de fem stegen i JS-guiden avsnitt 8.
2. Öppna konsolen och kontrollera att den är tom. F12 → Console. Är den inte tom, laga det innan du går vidare. Ett fel som ligger kvar blir tre fel på fredag.
3. **Skriv README.md-rubriken Moduler med en gång**, med den modul du just byggde in och på vilken sida. Två rader nu är en färdig fil på deadlinedagen.

8. Så ligger tiden

Sju arbetspass. Det är mindre än område 4 hade, och modulerna är färdiga – tiden går till inbyggnad, anpassning och test.

Första modulen ska fungera på lektion 55

Det är uppgiftens enda hållpunkt före deadline, och den finns av ett skäl: den som inte fått igång någon modul efter tre genomgångar och ett arbetspass har fastnat på något litet – en sökväg, ett klassnamn – och det är enklare att laga på fredagen den 22:a än veckan efter.

9. Checklista innan du lämnar in

1. Båda modulerna fungerar på den publicerade adressen, inte bara lokalt
2. Konsolen är tom på varje sida
3. js/-filerna ligger i repot och har rätt namn, med små bokstäver
4. CSS-avsnitten är med i stilmallen
5. Du har ändrat något i ÄNDRA HÄR-zonen i varje modul
6. Hela sajten går att nå med Tab, och fokus syns
7. Testad i två webbläsare
8. Öppnad i telefonen
9. HTML och CSS validerar utan fel
10. README.md har rubriken Moduler med vilka, var och varför
11. Allt committat och synkat, adressen fungerar i ett privat fönster
12. Repo-länken inlämnad i itslearning

10. Felsökning