https://github.com/je-jo/checkout-page

devChallenges #6
https://github.com/je-jo/checkout-page

challenge devchallenges javascript practice

Last synced: about 1 month ago
JSON representation

devChallenges #6

• Host: GitHub
• URL: https://github.com/je-jo/checkout-page
• Owner: je-jo
• Created: 2022-01-14T16:03:48.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-21T14:40:03.000Z (over 4 years ago)
• Last Synced: 2025-02-28T08:11:30.787Z (over 1 year ago)
• Topics: challenge, devchallenges, javascript, practice
• Language: HTML
• Homepage: https://je-jo.github.io/checkout-page/
• Size: 386 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Checkout Page




   Solution for a challenge from  Devchallenges.io.





  


    

      Demo

    

     | 

    

      Solution

    

     | 

    

      Challenge

    

  



## Table of Contents

- [Overview](#overview)

  - [Built With](#built-with)

- [Features](#features)

- [Contact](#contact)

- [Acknowledgements](#acknowledgements)

## Overview

![screenshot](https://raw.githubusercontent.com/je-jo/checkout-page/main/images/checkout-page.png)

This was quite an interesting project, lots to learn.

User can choose the number of items, and the calculations are shown on the page.

Basic JS form validation is implemented.

### Built With

- Javascript

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

- [Minireset](https://awesomeopensource.com/project/jgthms/minireset.css?categoryPage=29) - A tiny modern CSS reset. 

- [Clippy](https://bennettfeely.com/clippy/) - A tool to generate clip-path shapes.

## 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

## Acknowledgements

- [Custom Select Styles with Pure CSS](https://moderncss.dev/custom-select-styles-with-pure-css/)

- [Custom CSS Styles for Form Inputs and Textareas](https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/)

- [Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)

## Contact

- [Github](https://github.com/je-jo)

- [Frontend Mentor](https://www.frontendmentor.io/profile/je-jo)

- [Codepen](https://codepen.io/je-jo)