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

Koden i detta stadie: Github

Jag insåg att mina planer för denna applikation var lite för högtflygande så i detta sista steg har jag förenklat rejält. Jag tog bort valmöjligheter för olika måltider (frukost, lunch, middag) samt för olika veckor. Det är en lärdom att försöka starta enkelt och bygga på efteråt.

I detta sista steg (för denna gång) ville jag att man ska kunna lägga till maträtter och att texten från användaren ska visas i tabellen på rätt plats. Så jag började med deklarera en konstant som heter addMeal. Jag hämtar formuläret, dvs ”parent element” till de tre olika ”input”-elementen (Maträtt, Innehåll, Veckodag).

const addMeal = document.forms['myform']

Sedan behövde jag en s k event listener som ”lyssnar” efter användarens musklick på ”Lägg till meny”-knappen i mitt fall. Då lät jag det ”värde” som användaren skriver in sparas i konstanten ”value” vid musklicket.

addMeal.addEventListener('submit', function(e){
    const value = addMeal.querySelector('#input-food').value;

Jag kollade med hjälp av console.log att värdet som skrevs in i fältet ”Maträtt” var rätt. Och jag gjorde sedan samma sak med fältet ”Innehåll”.

Sedan ville jag ju att detta värde visades i tabellen i rätt rad. Då behövde jag dels skapa logiska variabelnamn för varje rad i tabellen ( t ex const rowOne = mytablebody.getElementsByTagName(’tr’)[0]) och även hitta själva texten i respektive cell (const foodMonday = rowOne.getElementsByTagName(’td’)[0]). Och med hjälp av if-satser, där villkoret var om respektive ”radio button” var ”checked”, låta användarens värde visas på rätt ställe i tabellen.

Jag lyckades skriva detta program relativt snabbt, men jag inser också att om jag gör om detta om ett år, kommer jag troligen att skriva koden på ett smartare sätt. Men appen funkar!

Denna miniserie om hur jag gick till väga är slut. Det bör dock bli en liknande serie när jag vill koppla frontend med backend, dvs spara datan i en databas. Återkommer!

Spela videon så ser du hur appen funkar!
Stäng meny