Solution for a challenge from Devchallenges.io.
- Go to live site
- See the demo here
- I'm not super familiar with forms, so there was a lot to review and learn when it came to implementing the contact and shipping info form - with both HTML elements and structure, as well as styling.
- I didn't want to just hard-code the values in the cart and leave it at that; I wanted to make it functional and realistic. I wanted to include add item, remove item, calculate total and shipping, conditional free shipping (shipping >= $500), and an empty basket notification. I found the JavaScript the most challenging, but also the most interesting and rewarding as when I successfully implemented a feature, I was able to use it and interact with it in the UI.
- I made the products dynamic by storing my products in an array of objects which I then iterated over and dynamically inserted into an HTML template string. This way, the user can add or remove products to / from the cart.
- I used the filter array method to remove items from the cart.
- I conditionally rendered two different HTML template strings based on the shipping cost. If shipping is >= $500, then the UI updates to render the message that the user qualifies for free shipping.
- HTML
- SCSS
- JavaScript
I developed this checkout page as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories and replicate the provided Figma design.
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/AkaraTawng/my-gallery-dev-io.git
# Install dependencies
$ npm install
# Run the app
$ npm start
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent