SmartPay ALC 4 Challenge

ALC 4.0: Phase 1 Challenge - Mobile Web

Description:

This challenge is aimed at having you roll up your sleeves and do some real coding practice based on what you’ve learnt from the contents available to you on the Pluralsight platform. The hands-on project will gauge your ability to apply the knowledge you’ve acquired and also challenge you in this learning journey.

The objective is to build a SmartPay interface using HTML, CSS and Javascript (Strictly ES6).

Stage 1 of 4 (Build & Style The UI)

Build the HTML structure of the credit card component and a button that allows a user to make payment and style the app to improve the look and feel using CSS.

Screenshot of stage 1

For more details about stage one, see PR #1

Stage 2 of 4 (Get Total Bill )

Get Total Bill using the fetch API to make HTTP request, buyer data is fetched from an API endpoint, summed up using 'reduce' and formatted into buyer country currency using 'toLocaleString' and the formatted data is displayed appropriately using the 'querySelector'

Screenshot of stage 2

For more details about stage two, see PR #2

Stage 3 of 4 (Handle simple validation)

Handle simple validation using .classList, the card holder's name and expiry date are validated by adding or removing invalid CSS class to mark the field as invalid or not.

Screenshot of stage 3

Valid	Invalid

Validations:

The card's expiry date field should be in the MM/YY format. with YY a being future value (Value greater than the present year)
The card's holder name field should be 2 names separated by space. Each name should be at least 3 characters long.

For more details about stage three, see PR #3

Stage 4 of 4 (Validate Payment Details)

Implement smart typing by displaying temporarily for half a second as the user types and disallow invalid entries (non-integers) in the four-card number fields. Displays a Visa or MasterCard logo depending on the card number entered and Implement the The Luhn Algorithm to validate 16-digit credit card numbers

Screenshot of stage 4