Car-Leasing-Calculator

This project is a web-based car leasing calculator that helps potential customers estimate their monthly leasing costs. The calculator takes user inputs such as car type, car value, lease period, and down payment percentage, and dynamically displays the total leasing cost, down payment, monthly installment, and interest rate.

Features

• Clean and professional user interface (UI) designed using HTML and CSS.
• Responsive design to accommodate various screen sizes.
• Real-time calculation of leasing costs based on user inputs.
• Inputs for car type (new or used), car value, lease period, and down payment percentage.
• Display of leasing details including total leasing cost, down payment, monthly installment, and interest rate.

Requirements

• A modern web browser that supports HTML5, CSS3, and JavaScript.
• No additional libraries or frameworks are required; the project uses vanilla JavaScript.

File Structure

index.html ==> HTML structure of the calculator

styles.css ==> CSS styling for the calculator

script.js ==> JavaScript logic for dynamic calculations

Installation

1. Clone the repository or download the files.
2. Open index.html in your preferred web browser.

Usage

1. Select the car type (new or used) from the dropdown menu.
2. Enter the car value using the number input or adjust it using the range slider.
3. Select the lease period from the dropdown menu.
4. Enter the down payment percentage using the number input or adjust it using the range slider.
5. The leasing details will be dynamically updated and displayed below the form.

Implementation Details

HTML

The HTML structure includes:

• A form with inputs for car type, car value, lease period, and down payment percentage.
• A results section that displays the calculated leasing details.

CSS

The CSS provides styling for a clean and responsive layout. Key elements include:

• Flexbox for arranging form elements in rows and columns.
• Styling for form inputs and results section to match the desired look.

JavaScript

The JavaScript handles the dynamic calculations based on user inputs. Key functionality includes:

• Event listeners for input changes.
• Calculation of total leasing cost, down payment, monthly installment, and interest rate.

Conclusion

This project provides a user-friendly interface for calculating car leasing costs. By following the provided steps and using the included code, you can set up and run the car leasing calculator on your local machine. The HTML, CSS, and JavaScript files work together to create a dynamic and responsive tool for estimating leasing costs.