/ch-checkout-page

devChallenges リポジトリ（出典：[devChallenge(legacy) - Responsive Web Developer - Checkout Page](https://legacy.devchallenges.io/challenges/0J1NxxGhOUYVqihwegfO)

Primary LanguageHTML

Checkout Page

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

Overview

Desktop

overview - desktop

Mobile

overview - mobile

Built With

Base

Other major libraries

※As for the form validation, it is done using HTML only.
※The pattern validation for Phone and Postal code is based on Japanese specifications.

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/h-yoshikawa44/ch-checkout-page.git
or
git clone git@github.com:h-yoshikawa44/ch-checkout-page.git

# Install dependencies
npm install

# Run the Vite
npm run dev

learned/improved

  • about the different types of autocomplete.
  • Validation Processing in HTML.
  • Input type="tel" in iOS Safari allows only numbers.

Acknowledgements

Contact