Money Master (Assignment 5)

Project Overview: Cash Master Website

The Cash Master website is a responsive web application that enables users to efficiently manage their finances across various devices, including desktops, tablets, and mobile phones. The website has been built using HTML5, Tailwind CSS, and plain JavaScript, ensuring a smooth and visually appealing user experience.

Key Features:

𝟏) 𝐈𝐧𝐜𝐨𝐦𝐞 𝐚𝐧𝐝 𝐄𝐱𝐩𝐞𝐧𝐬𝐞𝐬 𝐌𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭: Users can input their income and expenses details into the website's list. This feature allows individuals to maintain a record of their financial transactions accurately.

𝟐) 𝐓𝐨𝐭𝐚𝐥 𝐄𝐱𝐩𝐞𝐧𝐬𝐞𝐬 𝐂𝐚𝐥𝐜𝐮𝐥𝐚𝐭𝐢𝐨𝐧: The website automatically calculates the total expenses based on the user's input. This functionality provides users with a clear overview of their spending habits and allows them to track their expenses more effectively.

𝟑) 𝐑𝐞𝐦𝐚𝐢𝐧𝐢𝐧𝐠 𝐁𝐚𝐥𝐚𝐧𝐜𝐞: By deducting the total expenses from the income, the website calculates the remaining balance. This feature helps users monitor their available funds and make informed financial decisions accordingly.

𝟒) 𝐒𝐚𝐯𝐢𝐧𝐠𝐬 𝐓𝐫𝐚𝐜𝐤𝐢𝐧𝐠: Users can allocate a portion of their earnings towards savings through the website. The application calculates the saving amount and updates the user's saving balance accordingly.

𝟓) 𝐒𝐚𝐯𝐢𝐧𝐠 𝐀𝐦𝐨𝐮𝐧𝐭 𝐂𝐚𝐥𝐜𝐮𝐥𝐚𝐭𝐢𝐨𝐧: The website automatically calculates the amount of money saved based on the user's input. This feature helps individuals set financial goals and track their progress towards saving objectives.

𝟔) 𝐑𝐞𝐦𝐚𝐢𝐧𝐢𝐧𝐠 𝐏𝐮𝐫𝐬𝐞 𝐂𝐚𝐥𝐜𝐮𝐥𝐚𝐭𝐢𝐨𝐧: The remaining purse represents the balance after deducting the saving amount from the remaining balance. The website calculates this value to provide users with an accurate representation of their available spending money.

𝟕) 𝐑𝐞𝐬𝐩𝐨𝐧𝐬𝐢𝐯𝐞 𝐃𝐞𝐬𝐢𝐠𝐧: The Cash Master website is fully responsive, ensuring a seamless user experience across devices of varying screen sizes. Users can access and manage their finances on desktop computers, tablets, or mobile phones with ease.

𝟖) 𝐈𝐧𝐩𝐮𝐭 𝐕𝐚𝐥𝐢𝐝𝐚𝐭𝐢𝐨𝐧 𝐚𝐧𝐝 𝐄𝐫𝐫𝐨𝐫 𝐌𝐞𝐬𝐬𝐚𝐠𝐞𝐬: The Cash Master website incorporates robust input validation to ensure data integrity and user-friendly error handling. If users provide invalid input, such as a negative number or a non-numeric value, the website displays an alert message in the user interface (UI). This alert notifies users of their input error and prompts them to correct it.

Furthermore, if a user attempts to save more money than the remaining balance available, the website detects this condition and displays another error message in the UI. This error message alerts users that their saving amount exceeds the remaining balance, helping them avoid potential financial discrepancies.

By implementing input validation and error messaging, the Cash Master website enhances the user experience by proactively addressing common input mistakes and providing clear instructions for error resolution. This feature ensures data accuracy and helps users maintain financial records accurately within the application.

By leveraging the power of HTML5, Tailwind CSS, and plain JavaScript, the Cash Master website offers a user-friendly interface and robust functionality for individuals looking to gain control over their finances. With features like income and expense tracking, total expense calculation, remaining balance monitoring, savings management, and remaining purse calculation, the website empowers users to make smarter financial decisions and improve their overall financial well-being.

Live Website

GitHub Pages: https://nadim-nion.github.io/money-master/

Netlify: https://money-master-nion.netlify.app/

Deployment

To deploy this project:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Nadim-Nion/money-master.git
git push -u origin main

Screenshots

🚀 About Me

Hi, I am Nadim Mahmud Nion. I have recently concluded my graduation from the department of Computer Science and Engineering (CSE) at the Daffodil International University (DIU). I have been learning MERN Stack Web Development since 2022. I am expertise in the following skills:

• JavaScript
• Bootstrap
• Tailwind
• HTML
• CSS
• Media Query

I have built multiple projects using these skills. You are invited to my GitHub profile to know about my projects and don't forget to give a star to my projects.

FAQ

Is this website responsible for all devices?

Answer : Yes, It is responsible for Desktop, Tablet and Mobile devices also

Can this website handle the errors?

Answer : Yes, It can. If users give invalid input such as negative numbers or string, then an error message will be popped up in the UI of the website. Additionally, if a users want to save more money than their remaining balance (Remaining Balance = Income - Total Expenses) , then another error message will be shown as an alert in the website's UI.