E-wallet: A digital wallet that collects all credit cards Built with vue

by Vue.js Examples

E-wallet

Du ska bygga en digital plånbok som samlar alla kreditkort. Det ska gå och se sina kreditkort samt lägga till nya.

Tekniska krav

Tekniker du ska använda i denna app är följande:

  • Local properties (data)
  • Inherited properties ( props )
  • Computed properties
  • Events ( Browser och Custom )
  • Methods
  • v-for ( incl. key and props in a loop )
  • LocalStorge ( VG )
  • Life Cycle Hook ( VG )

Funktionella krav

Home

  • Kortet högst upp är active card.

  • Vid klick på kort i listan så ska den läggas som active card högst upp i vyn.

  • Vid klick på Add new card ska man visa AddCard-view.

  • AddCard-viewn ska ha ett formulär som speglas i en preview hur kortet skulle se ut.

  • Varje nytt card som läggs till ska synas i en lista i denna vy.

AddCard

  • Ett nytt kort ska kunna läggas till med följande information:

{
  vendor, 
  cardNumber, 
  cardholder, 
  expireMonth, 
  expireYear, 
  CCV
}

Design

Figma Mockup

Här har du en Figma-fil med Mockup över färdiga appen.

Demo

Assets

Typografi

Rubriker: Source Sans Pro

Brödtext: PT Mono

Ikoner







Bedömning

För att få Godkänt ska du:

  • Ha gjort uppgiften med vue create
  • Gjort enligt spec och Figma skissen (det behöver inte vara exakt enligt design)
  • Det är en single file application (SPA).

För att Väl Godkänt ska du:

  • Spara korten och alla nya kort som läggs till i local storage samt läsa från local storage
  • Det ska gå att ta bort ett kort med en bekräftelse-dialog
  • Fälten när ett kort läggs till ska valideras så du i fältet med kortnummer enbart kan mata in siffror och max är 16 siffror. Fältet för namn ska enbart ta bokstäver.
  • Validera så att du inte kan lägga till två kort med samma nummer

Deadline och redovisningar

Deadline är 27/1 då ni kommer redovisa i grupper i samma stil som tidigare.

Utöver detta ska ni även göra en delredovisning för läraren innan detta tillfälle vilket sker lektionen innan eller på repetitionstillfället beroende på tid.

GitHub

View Github