Skip to content

Instantly share code, notes, and snippets.

Övning: PRO e-postklient

Du ska i denna övning designa en e-postklient för PRO(s). Målgruppen är 65+ och fokus ligger på enkelhet, tydlighet och tillgänglighet.

Detta ska resultera i en Figma-prototyp.

I nuläget är det aktuellt enbart med en mobilanpassad e-postklient.

Funktionalitet

  • Kunna se sina mejl i lista

Övning Booking form

Bygg din React-app enligt nedanstående skiss (hur mycket CSS du vill göra är upp till dig).

Steg 1

Koppla ihop varje datapunkt ( klass, titel, förnamn, efternamn, godkänner ) med en funktion i din React-komponent som lyssnar efter inmatning och sparar det som skrivs in i ett inputfält i en variabel.

Steg 2

Övning

I denna övning ska du göra en React-applikationen enligt designen som du kan på bilden nedanför (du kan skippa bilden på Sherlock). Denna sida kommer i denna övning vara statisk d.v.s. du kan hårdkoda all information och knapparna etc behöver inte göra något. Vi kommer återvända till denna övning och fixa det senare. Gällande bilden i övre vänstra hörnet kan ni välja valfri bild till.

Följande komponenter bör finnas med:

  • App
  • Header
  • Cart (som ligger i Header)
  • Product

Första steget i att skapa en dynamisk web app med Vue.js är att koda upp den med statiska komponenter och innehåll.

Koda upp nedanstående Todo App skiss med dessa komponenter ( håll CSS:en enkel, behöver inte vara lika grafisk som skissen, dock samma funktionalitet och struktur. Notera att todo-header har en komponent ( counter) inuti sig. Glöm inte att hårdkoda in innehållet också i todo-items etc.

Komponenter

  • header
    • counter ( du har 3 todos kvar att göra )
  • todos ( inkl 4 todos, en är avbockad/done )
  • new-todo

Shakespeare insult generator

Have you no wit, manners, nor honesty but to gabble like tinkers at this time of night? - Twelfth Night

I denna övning ska du få bygga ett API som returnerar en förolämpning från Shakespeare. En "sick burn" från Shakespeare ger en bra start på dagen!

Nedanför har du 10 förolämpningar från olika pjäser att använda dig av. Skapa ett objekt för varje förolämpning som har två egenskaper. Den första som heter insult som innehåller en sträng med förolämpningen och den andra som heter play med pjäsen namn. Lägg sedan alla objekt i en array. Du kan spara detta direkt som en variabel i din NodeJS - applikation eller i en JSON-fil likt det vi gjorde med childrensbooks.json.

header-fu-react

Övning

I denna övning ska du göra ett bibliotek av barnböcker. Du hittar en JSON-fil med böcker här med som heter childrensbooks.json som du kan importera med import books from '../assets/childrensbooks.json'; (skapa en mapp som heter assets samt skapa en fil som heter childrensbooks.json och lägg in nedanstående innehåll).

Använd dig av React router med två vyer, en för alla böcker och en för en detaljerad vy av en bok.

Figmaskiss: https://www.figma.com/file/lm4l7OViUO8ypfQn9IBG91/Mini-Library?node-id=2%3A41

header-fu-react

Övning

En övning i att få en första inblick i kursen samt det mindset vi kommer arbeta. Fundera inte så mycket kring koden utan mer på det tankesätt som gås igenom i artikeln nedan.

Instruktioner

Börja med att läsa denna artikel om att tänka i komponenter för att få en första förståelse

Shakespeare insult generator

Have you no wit, manners, nor honesty but to gabble like tinkers at this time of night? - Twelfth Night

I denna övning ska du få bygga en sida som slumpar en förolämpning från Shakespeare och visar denna för användaren. En "sick burn" från Shakespeare ger en bra start på dagen!

Nedanför har du 10 förolämpningar från olika pjäser att använda dig av. Skapa ett objekt för varje förolämpning som har två egenskaper. Den första som heter insult som innehåller en sträng med förolämpningen och den andra som heter play med pjäsen namn. Lägg sedan alla objekt i en array och slumpa en förolämpning. Det ska finnas en knapp där man kan slumpa en ny förolämpning.

Ex:

Lösenordsgenerator

I denna övning ska du bygga en lösenordsgenerator med flera nivåer.

Level 1

Skapa en enklare lösenordsgenerator i form av en function passwordGenerator(length) där enda argumentet är längd på lösenordet. Funktionen ska returnera ett slumpat lösenord som visas på skärmen.

Du får inte använda dig av regex.

HACK THE SITE

Vad

Du ska i denna övning ge dig på att hacka en sida där du kan logga in, se ditt konto och posta kommentarer i en gästbok.

Du ska göra följande:

  • Gör en XSS där du injectar kod som sparas som en kommentar i gästboken och körs för alla som kommer in.
  • Postar en kommentar som Ada men är inloggad med användaren Chris.
  • Sno en annan användares session och logga in med denna utan att kunna användarnamn och lösenord.