🏠 Mortgage Calculator ______Check out the live demo here!

...

📜 Table of Contents

• 📝 Description
• 🎯 Features
• 🖼️ Screenshots
• 🚀 Installation
• 🔧 Usage
• ⚙️ Technologies Used
• 📂 Project Structure
• 📄 License
• 🙏 Acknowledgments
• 🤝 Contributing
• 👨‍💻 Author
• 📧 Contact

Description

🏠 Mortgage Calculator

A simple mortgage calculator web application built with ⚛️ React that helps users estimate their monthly mortgage payments based on 💰 purchase price, 💲 down payment, 💹 interest rate, and ⏳ repayment time.

🎯 Features

• 🎚️ Input sliders and selectors for purchase price, down payment, interest rate, and repayment time.
• 🔄 Real-time calculation of monthly mortgage payments and principle amount.
• 📊 Visualization of loan breakdown with a pie chart.
• 📱 Responsive design for various screen sizes.

🖼️ Screenshots

🚀 Installation

1. 🌀Clone this repository to your local machine using:

   git clone https://github.com/your-username/mortgage-calculator.git
   

2. 📂Navigate to the project directory:

   cd mortgage-calculator
   

3. ⚙️Install the required dependencies:

   npm install
   

4. 🚀Start Development Server:

   npm run dev
   

5. 🌐Open your web browser and visit http://localhost:5173 to use the application.

🔧 Usage

• Use the 🎚️ sliders and selectors to input your desired 💰 purchase price, 💲 down payment, 💹 interest rate, and ⏳ repayment time.
• The application will instantly calculate and display your 💵 monthly mortgage payment and 💰 principle amount.
• A 📊 pie chart visually represents the principle amount and total interest of your loan.

⚙️ Technologies Used

• ⚛️ React.js
• 📊 Chart.js
• 🔄 PropTypes

📂 Project Structure

Below is the structure of the project:

• 📁 src/components/Header.js: Header component.
• 📁 src/components/Footer.js: Footer component.
• 📁 src/components/Container.js: Container component for input sliders and selectors.
• 📁 src/components/Result.js: Result component for displaying loan details and pie chart.
• 📁 src/components/common/SliderBar.js: Slider component for input values.
• 📁 src/components/RepaymentTimeSelector.js: Selector component for repayment time.
• 📁 src/components/PieChart.js: Component for rendering the pie chart.
• 📁 src/helper/calculateLoanData.js: Functions for calculating loan details.
• 📄 src/App.css: CSS styles for the application.
• 📁 src/assets/screenshot/: Directory containing application screenshots.

📧 Contact

For any questions or inquiries, please contact isushaant@gmail.com.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgment

• This project was created as a learning exercise in React and data visualization.
• Inspiration and guidance from various online tutorials and documentation.

🤝 Contributing

Contributions are welcome! If you'd like to contribute to this project, please open an issue or submit a pull request.