This project was built while learning essential HTML, CSS and JavaScript concepts through Scrimba's Frontend Career Path courses.
The Figma mockup was provided by Scrimba and redesigned by me. The app was originally supposed to be a Restaurant Ordering App, but students are always engouraged to change the theme and make it their own.
The app was built entirely from scratch by me.
- Follow the design spec
- Render the menu options using JS
- Add items feature
- Remove items feature
- Have a payment modal with compulsory form inputs
- Offer a “meal deal” discount — If food & drink are bought together, offer e.g. 15% discount
- Allow users to rate their experience (e.g. 1-5 clickable stars)
- Change the theme
- Generate AI images of donuts for the app
- Redesign the Figma mockup
- Task breakdown
- Create GitHub repo & README
- Create project folder structure
- Build the header with logo
- Render menu items with vegan badges if applicable
- Create add to cart button
- Add to cart feature
- Prevent user from adding free oat milk into cart if no coffee present
- Create checkout button - only enabled if there's at least one item in cart
- Render all cart items after checkout btn clicked
- Calculate and render total price
- Apply combo discount if at least one drink-donut pair present
- Remove from cart feature
- Complete order button
- Complete payment modal component
- Add extensive custom validations
- Make app responsive by creating tablet & desktop version
- Render order status after payment completions
- Remove buttons after order being completed
- Add
setTimeout()
that automaticaly empties the cart and renders menu after order being completed - Add favicon
- Submit for code review
- Implement changes suggested by the mentor & do bugfixing
- Update GitHub README
HTML, CSS & Vanilla JS
- Asking for help is normal when one gets stuck. I got a great help on one of my bugs from one of the Scrimba bootcamp mentors and also got awesome suggestions from them along the way!
- Do more
console.log
ging when debugging! - Avoid rendering HTML with JavaScript when you can. Rendering too much HTML with JS can affect performance!
- I learned about the existence of the
dialog
HTML element that can be manipulated withshowModal()
andclose()
functions in JS - Generate random UUIDs with
crypto.randomUUID()
I really enjoyed building this project and I think I'm going to try rebuilding it with React soon!
In Delish Donuts 2.0, I am planning to keep the existing features, as well as implementing new ones:
- Increment arrows to allow users adjust the amount of items of the same kind in cart both in the menu and order summary
- Create footer with contact information
- Only apply 15% discount per each donut-drink pair
- Format card numbers on the fly (add spaces between each 4 numbers)
- Create banner advertising the donut-drink combo discount
- Make cart icon always visible (in fixed position) & clickable (render order on click)
My app wouldn't be what it is without these awesome free tools:
- All images were AI generated with the help of gencraft
- The vegan badge was AI generated on gencraft as well, and its background removed with the help of removebg
- The favicon emoji was created with the help of favicon.io
The project took me a little under 17 hours to build. Fixes after code review, testing, deployment and GitHub README update took another 3 hours. TOTAL: 20 hours
- Linkedin: https://www.linkedin.com/in/lucie-yarish/
- Hashnode: https://lucieyarish.hashnode.dev/
- Instagram: https://www.instagram.com/luciecodes/
Thank you, Scrimba, for the fantastic challenge! Looking forward to more projects and continued growth in the vast world of frontend development! 🌐✨