För denna uppgift var målet att skapa en visakortsvalidator med hjälp av JavaScript. Det inmatade kortnummret skulle uppfylla föjande kriterier; Första siffran ska vara en fyra, antalet siffror ska vara 13 - 16 stycken, endast bestå av siffror samt uppfylla LUHN-formeln.
Jag började att lösa denna uppgift med Malin Nyström och Maja Bergendahl. Den första delen av uppgiften, alltså kriterie 1 - 3 gick enkelt att lösa. Vi hade gjort en liknande lösning i kursen ID:INP för en telefonnummervalidator. För att kontrollera att den första siffran är en fyra använde vi oss av metoden charAt() som vi hittade på w3-schools.
Eftersom LUHN-algoritmen består av många steg bestämde vi oss för att skriva ner de olika stegen på papper och penna och diskuterade olika möjliga lösningar. Vi började sedan jobba på funktionen checkLuhn där vi sparade inmatningen som en array som splittades och sedan spegelvändes med hjälp av reverse-metoden. Anledningen till att vi valde att göra så var tanken att vi då inte skulle behöva loopa igenom inmatningen baklänges. Sedan genomfördes tre for-loopar där den första multiplicerade varannan siffra, med start på index 1 i vår array och efteråt splittade resultatet. Sedan adderades de i en ny forloop och sparades i en variabel. En tredje forloop adderade de resterande siffrorna med start på index 2 i listan. Sedan adderades summorna med varandra och den första siffran.
När jag och Maja sedan skulle fortsätta med att väva samman chekLuhn-funktionen och den funktionen för kriterie 1 - 3 stötte vi på problem och vi förstod inte riktigt varför. Vi fick då hjälp av Erik Hughes som förklarade att våra arrayer ställde till det när vi ville addera dem med varandra, de konkatinerades istället för adderades och vi fick NaN som felkod. Han förklarade också att det gick lika bra att loopa igenom en sträng som en array. Därför bestämde vi oss att göra om vår lösning lite, där vi plockade bort arrayerna och ersatte med en temporär, tom, sträng. Vi kunde då inte använda oss av reverse-metoden utan fick lov att loopa baklänges.
I mitt HTML-dokument kallar knappen "Shoppa" på funktionen checkNumber och den andra knappen rensar inmatningsrutan. Rensa-knappen skapade jag enkelt efter att ha hittat input reset på w3-schools. Jag passade på att göra utseendet på uppgiften lite roligare och skapade två bilder i Photoshop för att skapa en mer autentisk miljö för min validator.
