Skip to content

Instantly share code, notes, and snippets.

Alt text

A Study in Programming

En stor del av att lära sig programmering handlar om ens tankesätt och att bygga upp mentala modeller. I denna guide ska vi titta på hur vi kan använda Sherlock Holmes "Science of deduction" som ett arbetssätt för att lösa olika programmeringsproblem. Du kanske ställer dig frågan varför Sherlock Holmes har något med programmering att göra? Se detta som ett sätt att tänka och som en hjälp när du ska analysera och lösa olika programmeringsproblem.

Sherlock Holmes "Science of deduction" består av tre delar: Observe, Theorize, Test, som beskrivs mer i detalj nedanför. Bra att ha i åtanke är att även om dessa görs i ordning är de även individuellt bra att ha i åtanke konstant när man programmerar.

Observe

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:

Nyhetssidan

Instruktioner

Märk upp delarna av texten med rätt element för att bygga upp hela HTML-sidan.

HTML-dokumentet

Börja med att skapa grundstommen i ett HTML-dokument. Lägg också till <!DOCTYPE html> längst upp i dokumentet.

@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / pendlaren.md
Last active August 9, 2023 08:13
Övning: Pendlaren

Pendlaren

Vad

Ni ska bygga en webbapp som tar en användares position (longitud och latitud) och sedan hämtar närliggande hållplatser. Användaren kan sedan kunna välja en hållplats och se de närmaste avgångarna.

Hur

Observera att ni behöver använda https för att kunna använda geolocation API. Ni behöver skapa ett konto här och efter det skapa ett projekt för att få en API-nyckel.

Ö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
We couldn’t find that file to show.

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

Ö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