Filipino Web Development Peer - Checkout Card Component Solution

This is a solution to the HTML/CSS/JS Challenge of FWDP.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources

Overview

A component of a Checkout Card Component, found the UI from Figma Community by Softwareseni and Wirak S. https://www.figma.com/community/file/1158585574208802327/checkout-page

Screenshot

Links

• Solution URL: https://github.com/loryvi/order-form-component
• Live Site URL: https://loryvi.github.io/order-form-component/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Javascript

What I learned

• Dropdown
• Buttons with javascript
• Gradient div

Continued development

• 💡 Animation for the Checkout Button
• 💡 Add more product items using API
• 💡 Responsive Mobile Page
• 💡 Make it a reusable component!

Useful resources

• https://cssgradient.io/ - Guide for CSS Gradient boxes
• https://fonts.google.com/icons - easy to use, import and has a developer guide!