image

ATM App

Description

The ATM app allows users to simulate depositing or withdrawing cash. It offers a form where users can select either a deposit or cashback operation, input the desired amount, and submit the transaction. The application's state is managed through React's useState hook, ensuring dynamic updates to the total account balance and transaction validation. Styling is handled using CSS, providing a clean and user-friendly interface.

Functionality

Updates made to enhance user experience and functionality:

  • Users interact with the application through a form.
  • They select an action (Deposit or Cash Back) from a dropdown menu.
  • Based on the selected action, the corresponding mode is set (isDeposit).
  • Users input an amount and submit the form.
  • The application validates the transaction and updates the account balance accordingly.
  • Errors are displayed if there are any issues with the transaction.

How to Run

To run the ATM App on your machine, follow these steps:

  1. First, clone the ATM repository to your local machine using the following command:
    git clone https://github.com/marialee222/atm.git
  2. Navigate to the directory where you cloned the ATM repository in your terminal:
    cd atm
  3. Install the necessary dependencies by running:
    npm install react react-dom
  4. Run the application:
    npx babel --watch atm.jsx --out-file atm.js
  5. Open index.html in preferred browser.
  6. Check out the ATM app!

Roadmap of Future Improvements

Future improvements for the ATM App include:

Enhancing security features to ensure user data protection.

Integrating additional banking functionalities (funds transfer and bill payments).

Customization options for users to personalize their app settings and improve overall accessibility for a wider range of users.

Tech Stack & Tools:

Results

Project background info goes here. Fusce laoreet ornare risus, et sollicitudin turpis viverra nec. Proin eu lacinia ipsum. Curabitur porta a mi sit amet iaculis.

30%

30% more lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

2.5X

2.5X more lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

60%

60% less lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

20K

20K lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

Client Testimonials

You can list client testimonials here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat vel quam cursus sagittis. Highlighted text example etiam volutpat ornare quam at cursus mi tristique sit amet.
Emily Doe, Project Lead at Company Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat vel quam cursus sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas est at lorem lacinia malesuada vel at arcu.
John Doe, Manager at Company Lorem

Need Help With Your Project?

Your website is often the central hub for your online presence. It's the place where potential customers can learn more about your products or services. A well-developed website provides a positive user experience, which is crucial for retaining visitors and converting them into leads.
Color Switcher