Uppgift: Manipulera DOM

I den här uppgiften tränar vi mer på manipuleringen av domträdet. Vi ska bygga en sida där vi skapar och manipulerar element. Vi ska även skapa eventlyssnare som hjälper oss med den dynamiska delen.

Förutsättning

Det förutsätts att du gått igenom artiklarna för kursmomentet samt är det en fördel om du gjort tidigare kursmoment.

Krav

Generell struktur

Du jobbar i mappen public/.

1. Skapa filen public/dom.html och lägg till menyvalet i navbaren likt tidigare.

2. Skapa filen public/js/dom.js och läs in den i dom.html. Det är “startfilen” för din JavaScript. Här ska du ha minst en funktion för varje krav. Det står i uppgiften vad varje funktion ska heta.

3. Skapa filen public/css/dom.css som sköter stylen för uppgiften.

När du är klar bör du ha följande filer, tillsammans med dina tidigare:

• Directorypublic

  • Directoryjs

    • dom.js
  • Directorycss

    • dom.css
  • dom.html

1. Placera ut en låda

Skapa en låda på din sida. Lådan ska ha en storlek på 200 x 200 pixlar. Du kan styla lådan på valfritt sätt.

Avsluta med att skapa en funktion centerBox() i JavaScript som centrerar lådan. Ett tips här är att skriva ut följande via console.log():

1. Bredd och höjd på webbläsarens fönster.
2. Bredd och höjd på box-elementet.
3. Positionen på box-elementet enligt left, top.

Tips

• Hämta detaljer om ett objekt: window.getComputedStyle(), parseInt().
• Dela upp din kod i små funktioner. Var flitigt med att använda console.log() när du hamnar i bekymmer.

2. Eventhantering

2.1 När webbläsarens fönster ändrar storlek

Fånga eventet för när webbläsarens fönster ändrar storlek. När det händer skall du alltid placera din låda i mitten av fönstret. Använd centerBox som callback.

Tips

• window.onresize
• window.addEventListener()

2.2 Fånga ett klick-event

Skapa en CSS-klass som definierar en outline för ett objekt, kalla CSS-klassen för selected.

Gör en eventhanterare för click som omväxlande ritar ut eller tar bort en outline från ett klickat objekt.

Koppla eventhanteraren till din låda via callbacken toggleSelected.

Om man nu klickar på lådan skall dess outline omväxlande visas och försvinna.

Tips

• Element.classlist
• event.target.addEventListener

2.3 Fånga ett dubbelklick-event

Skapa en CSS-klass som använder sig av CSS-transitions för att animera förändringen av ett elements storlek.

css, transition

.animateSize {
  transition: width 1s, height 1s;
}

När du dubbelklickar på ett element skall det “försvinna” enligt följande.

1. Ge elementet klassen .animateSize.
2. Sätt elementets width och height till 2px.
3. Använd en timer för att radera elementet efter 2 sekunder.

Tips

• transition
• setTimeout

Funktionen du har som callback ska heta doubleClick.

3. Keyboardevents

Samla alla events som hör till tangentbordet i en funktion som heter keyboardPress. Den använder du som callback.

3.1 Tangenten e

Skapa en CSS-klass som gör ett cirkulärt element. Du kan uppnå denna effekten genom att sätta 50% som värde på border-radius. Döp klassen till circle.

När man klickar på tangenten e så skall alla element som har klassen selected växla mellan formen fyrkantig och cirkulär.

Tips

• Document.getElementsByClassName()
• NodeList, Använd en for-loop för att loopa runt elementen i Nodelist.

3.2 Tangenten r

Skapa CSS-klasser som representerar bakgrundsfärgerna ["red", "orange", "yellow", "green", "blue", "indigo", "violet"].

När man trycker på tangenten r så skall alla element som har klassen selected byta färg enligt följande schema:

• red -> orange
• orange -> yellow
• yellow -> green
• green -> blue
• blue -> indigo
• indigo -> violet
• violet -> red

Gillar du inte färgerna så kan du byta till andra.

3.3 Tangenten i

Tryck på i för att göra alla element till valda.

3.4 Tangenten u

Tryck på u för att göra alla valda element till icke valda.

3.5 Tangenten y

Tryck på y för att radera de element som är valda.

Tips

• document.querySelectorAll
• remove()

3.6 Tangenten p

När man trycker på p så skall ett slumpmässigt element skapas. Ge elementet samma klassnamn som din startbox, men slumpa fram dess position, färg och form.

För att slumpa fram ett tal mellan min och max, till exempel 1 och 10 använder man följande konstruktion:

js random

Math.floor(Math.random() * 10 + 1)

Tips

• window.innerHeight, window.innerWidth
• Glöm inte att lägga till eventuella eventlyssnare till kopian.

3.9 Piltangenterna

Skapa händelser för piltangenterna så att man kan flytta valda element till höger, vänster, upp och ned. Välj själv hur många pixlar du vill flytta för varje tangentnedtryckning. Elementen ska inte kunna hamna utanför fönstret.

Extra uppgift (Optionell)

5. Animera med timer

Skapa en timer som byter utseende (färg, form) och position på ett element 5 gånger under 1 sekund.

Skapa en händelse för tangenten d som skall gälla samtliga element som är valda.

Funktionen ska heta animateTimer.

Hur kan det bli när du är klar?

Play

Exempel på hur det kan se ut när du är klar.

Validering

1. Dina webbsidor skall validera i W3C HTML validator.

2. Dina webbsidor skall validera i W3C CSS validator.

3. Din webbplats skall passera npm run lint.

4. Din webbplats skall gå att starta via npm run server.

Avslutningsvis

Lycka till och hör av dig om du kör fast eller har några funderingar.