Best Bank

A web app that has the power to check your Accounts' information as well as how much has been spent in each account. It has a nice, sleek, futuristic look. Check it out!

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

This project is from the Scrimba Frontend Developer bootcamp with many enhancements:

The challenge

Requirements
✅ Build it from "scratch" (using a Figma file)
✅ Follow the design
✅ Make sure you use:
  1. Semantic HTML
  2. Hover effects
  3. Container div
  4. Group selectors
  5. Compound selectors

Stretch Goals
✅ Column with spending bars
✅ Fetch data from JS
✅ Click on account to change view

My Additions
✅ Make responsive
✅ Add a hamburger menu for mobile view
✅ Make spending bars responsive
✅ Convert the Spending section to a modal for smaller screen devices with exit option

Screenshot

Links

Live site: https://bestbank.netlify.app/

My process

Complete the MVP. Then, work on the stretch goals. Last, work on personal additions.

Built with

HTML, CSS, Vanilla JS

What I learned

@media (min-width: 906px) {
    .modal {
        display: inline !important;
    }
}

If an element is part of the document at larger screen sizes, when it is removed from the UI at smaller screen sizes using JS, it will no longer automatically be there at larger screen sizes even if its presence is shown in the HTML. To re-establish its presence, !important must be used along with its display property to make sure the CSS adheres to displaying the modal's content to the screen no matter what. !important is usually avoided in practice, but when pairing it with a media query, it gets applied in like an if-statement situation, making its application conditional and circumstantial.

Author

GitHub: https://github.com/urvishp13