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
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
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:
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
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.
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
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:
I denna övning ska du bygga en lösenordsgenerator med flera nivåer.
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.
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:
