ELHARCHAOUI-SIFEDDINE/LoanCalculator

A responsive Loan Calculator built with React and tailwind css. This app allows users to calculate monthly payments, total interest, and total payments based on loan amount, term, and interest rate. Includes language (English, French, Arabic) and currency options (USD, EUR, MAD) with intuitive UI for a seamless user experience.

🏦 Loan Calculator

A modern, responsive loan calculator built with React and Tailwind CSS. Calculate monthly payments, total interest, and more with an intuitive user interface.

🌐 Live Demo

Check out the live application: loan-calculator-phi-weld.vercel.app

✨ Features

• 💰 Calculate loan payments with adjustable amount, term, and interest rate
• 📊 Real-time updates of monthly payments and total interest
• 🌍 Multi-language support (English, French, Arabic)
• 💱 Multiple currency options (USD, EUR, MAD)
• 📱 Fully responsive design
• 🎨 Modern UI with smooth animations
• 🎯 Interactive sliders for easy input
• ⚡ Fast and efficient calculations

🛠️ Technologies Used

• React.js
• Tailwind CSS
• Lucide React Icons
• Vercel (Deployment)

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/ELHARCHAOUI-SIFEDDINE/LoanCalculator.git

2. Navigate to the project directory

cd LoanCalculator

3. Install dependencies

npm install
# or
yarn install

4. Start the development server

npm run dev
# or
yarn dev

5. Open http://localhost:3000 in your browser

🔧 Usage

1. Use the sliders to adjust:

   • Loan amount
   • Loan term (in years)
   • Interest rate

2. View real-time calculations for:

   • Monthly payment
   • Total interest
   • Total payment

3. Change language or currency using the settings button in the top-right corner

📁 Project Structure

src/
  ├── components/
  │   ├── Header.js
  │   ├── LoanCalculator.js
  │   ├── ResultCard.js
  │   ├── SettingsModal.js
  │   └── SliderInput.js
  └── utils/
      ├── calculations.js
      └── constants.js

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

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

👤 Author

ELHARCHAOUI SIF-EDDINE

• Email: elharchaouisifeddine@gmail.com
• GitHub: @ELHARCHAOUI-SIFEDDINE

🙏 Acknowledgments

• React.js
• Tailwind CSS
• Lucide Icons
• Vercel

📱 Screenshots

---

⭐️ If you found this project helpful, please give it a star on GitHub!