Frontend Mentor - Invoice app solution

This is a solution to the Invoice app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page. ✅
• Create, read, update, and delete invoices. ✅
• Receive form validations when trying to create/edit an invoice. ✅
• Save draft invoices, and mark pending invoices as paid. ✅
• Filter invoices by status (draft/pending/paid). ✅
• Toggle light and dark mode. ✅
• Bonus: Keep track of any changes, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app). ✅
• My Addition #1: I added a confirm modal for changing invoice status ✅
• My Addition #2: Clicking outside the modals will close the modal ✅
• My Addition #3: I added a rate limter to prevent generating more than 5 draft invoice per minute ✅

Screenshot

Links

• Solution URL: Link
• Live Site URL: Link

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vuejs

Author

• Frontend Mentor - @Zolfikaar