lil-bee / checkout-page

static checkout page challenge by devchallenge.io

Checkout Page

Solution for a challenge from Devchallenges.io.

Demo | Challenge

Table of Contents

• Overview
  • Built With
• Features
• Acknowledgements

Overview

Introduce your projects by taking a screenshot or a gif. Try to tell visitors a story about your project by answering:

• What was your experience?
  • spending more time than i expeceted to styling icon in input
• What have you learned/improved?
  • styling input
  • form validation with html required tag
  • responsive form
• Your wisdom? :)
  • minimalize styling your svg icon by yourself

Built With

• html
• css

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

• User story: I can see a page following the given design
• User story: I can input email, phone, full name, address, city, country, and postal code
• User story: I can input the number of items
• User story: I can select at least 3 countries from the dropdown
• User story: When I click submit button or press enter, I can see a warning if validation fails
• User story: When I click submit button or press enter, I can see a successful alert if validation succeeds

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/your-user-name/your-project-name

# Install dependencies
$ npm install

# Run the app
$ npm run dev

Acknowledgements

• SVG Repo
• HTML form input types
• placeholder for select box html
• form validation