Hur jag byggde ”Smart Meal Planner” i Vanilla JavaScript – Steg 1

Jag beskriver i detta inlägg hur jag byggde webbapplikationen ”Smart Meal Planner” steg för steg.

Först skissade på papper vad jag vill ha för vy och vad man som användare kan göra. Användaren ska kunna se en vy per vecka och ska även kunna lägga till en maträtt. Då ska man kunna ge maträtten ett namn, skriva in ingredienser, välja måltid (frukost, lunch eller middag) samt välja vilken vecka det gäller.

Sedan skapade jag ganska snabbt denna struktur i html och css (och snyggade till det med bootstrap). Så nu hade jag grunden. Den som vill se koden kan kolla på min Github.

Så här såg appen ut i detta stadium, dvs layout och ”skelett” men utan funktionalitet. För dig som vill öva på html och css kan du prova att efterlikna detta genom att skriva koden utan att titta på min Github. Man får länka till Boostraps CDN samt lägga in olika bootstrap-element, vilka du hittar här.

Nästa steg handlar om att hitta olika html-element med hjälp av Document Object Model och lägga in dem i variabler så att man senare kan skapa funktionalitet utifrån variablerna. Det kallas DOM-manipulation och en av de viktigaste grejer man bör kunna som Javascript-utvecklare. Jag vet inte om jag tagit mig vatten över huvudet, men det återstår att se.

Stäng meny