islandskan / devchallenges-responsive-checkout

Responsive, mobile-first checkout page, built as a part of Devchallenges.io's "Responsive Web design" learning path.

Checkout Page

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
• Features
• Issues to Solve
• Contact
• Acknowledgements

Overview

!screenshot !screenshot

My submission to project 6/8, as part of Devchallenge's learning path 'Responsive Web Developer'. The project features a fictious, responsive checkout page dealing with forms and inputs. The challenge was to create a checkout page follwoing the provided Figma design.

User stories:

• I can see a page following the given design
• I can input email, phone, full name, address, city, country, and postal code
• I can input the number of items
• When I click submit button or press enter, I can see a warning if validation fails
• When I click submit button or press enter, I can see a successful alert if validation succeeds.

Features

Issues to Solve

• Change the number input(when increasing or decreasing the number of items), to a real input number-type.
• Solve how to style the number input to look like the design
• I would like to increase the total price based on the number of items
• I would like to add tooltips with hint to the input field if user has provided the wrong input
• I would like to display a custom error message
• I would like to display a loading animation on the button when the submit button is clicked
• I would like to display a success message if all of the input were successfully submited

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/islandskan/devchallenges-responsive-checkout

# Install dependencies
$ npm install

# Run the app
$ npm start

Acknowledgements

• Medium - How to style an input field

Contact

• GitHub @islandskan
• LinkedIn Sigridur Eggertsdottir