Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lil-bee/checkout-page
static checkout page challenge by devchallenge.io
https://github.com/lil-bee/checkout-page
bem-naming css-input html-form-validation responsive-website
Last synced: about 1 month ago
JSON representation
static checkout page challenge by devchallenge.io
- Host: GitHub
- URL: https://github.com/lil-bee/checkout-page
- Owner: lil-bee
- Created: 2023-09-15T13:59:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-15T14:15:33.000Z (over 1 year ago)
- Last Synced: 2023-09-16T07:09:06.924Z (over 1 year ago)
- Topics: bem-naming, css-input, html-form-validation, responsive-website
- Language: CSS
- Homepage: https://checkout-lilbee.netlify.app/
- Size: 280 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Checkout Page
## Table of Contents
- [Overview](#overview)
- [Built With](#built-with)
- [Features](#features)
- [Acknowledgements](#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](https://devchallenges.io/challenges) challenge. The [challenge](https://devchallenges.io/challenges/0J1NxxGhOUYVqihwegfO) was to build an application to complete the given user stories.
- [x] User story: I can see a page following the given design
- [x] User story: I can input email, phone, full name, address, city, country, and postal code
- [x] User story: I can input the number of items
- [x] User story: I can select at least 3 countries from the dropdown
- [x] User story: When I click submit button or press enter, I can see a warning if validation fails
- [x] 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](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:
```bash
# 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](https://www.svgrepo.com/)
- [HTML form input types](https://www.w3schools.com/html/html_form_input_types.asp)
- [placeholder for select box html](https://www.w3docs.com/snippets/css/how-to-create-a-placeholder-for-an-html5-select-box-by-using-only-html-and-css.html)
- [form validation](https://www.digitalocean.com/community/tutorials/css-styling-form-input-validity)