diff --git a/Calculators/Rent-Calculators/README.md b/Calculators/Rent-Calculators/README.md new file mode 100644 index 000000000..61c0b994f --- /dev/null +++ b/Calculators/Rent-Calculators/README.md @@ -0,0 +1,16 @@ +#

Rent Calculator

+ +## Description :- + +Calculates Overall Budget + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- +![alt text](image.png) + + diff --git a/Calculators/Rent-Calculators/image.jpg b/Calculators/Rent-Calculators/image.jpg new file mode 100644 index 000000000..aacb899af Binary files /dev/null and b/Calculators/Rent-Calculators/image.jpg differ diff --git a/Calculators/Rent-Calculators/image.png b/Calculators/Rent-Calculators/image.png new file mode 100644 index 000000000..3d4b49822 Binary files /dev/null and b/Calculators/Rent-Calculators/image.png differ diff --git a/Calculators/Rent-Calculators/rent.css b/Calculators/Rent-Calculators/rent.css new file mode 100644 index 000000000..f309e911f --- /dev/null +++ b/Calculators/Rent-Calculators/rent.css @@ -0,0 +1,127 @@ +body { + font-family: 'Poppins', sans-serif; + } + + h1 { + text-align: center; + + font-size: 50px; + color: #622c9b; + } + + .main-container { + display: flex; + margin-top: 40px; + } + + .left-side { + width: 30%; + background-image: url('image.jpg'); + background-size: cover; + background-position: center; + } + + .right-side { + width: 50%; + } + .left-side{ + padding-left: 15%; + } + + + .container_SU { + width: 80%; + background: #fff; + margin: 0 auto; + box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05); + border-radius: 20px; + } + + .signup-content { + padding: 75px 0; + } + + .signup-form { + width: 90%; + margin-left: 75px; + margin-right: 75px; + padding-left: 34px; + } + + .form-title { + margin-bottom: 33px; + font-size: 36px; + color: #222; + } + + .form-group { + position: relative; + margin-bottom: 25px; + overflow: hidden; + } + + .form-group:last-child { + margin-bottom: 0; + } + + label { + display: block; + margin-bottom: 8px; + color: #222; + font-size: 20px; + font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + } + + input { + width: 90%; + display: block; + border: none; + border-bottom: 1px solid #999; + padding: 6px 30px; + box-sizing: border-box; + font-size: 20px; + } + + input:focus { + border-bottom: 1px solid #222; + } + + .form-button { + margin-top: 25px; + } + + button { + background: #6dabe4; + color: #fff; + border: none; + padding: 15px 39px; + border-radius: 5px; + cursor: pointer; + } + + button:hover { + background: #4292dc; + } + + .result { + margin-top: 20px; + text-align: center; + } + + .slider { + text-align: center; + margin-top: 20px; + } + #resultMessage{ + font-size: 20px; + } + #maximum{ + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + color: rgb(24, 236, 24); + font-size: 30px; + } + #recommended{ + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + color: aquamarine; + font-size: 30px; + } \ No newline at end of file diff --git a/Calculators/Rent-Calculators/rent.html b/Calculators/Rent-Calculators/rent.html new file mode 100644 index 000000000..ba783b794 --- /dev/null +++ b/Calculators/Rent-Calculators/rent.html @@ -0,0 +1,50 @@ + + + + + + Rent Calculator + + + +

How Much Rent Can I Afford?

+
+
+
+ +
+

You can afford up to $0 per month on a rental payment.

+

It is recommended to keep your rental payment below $0 per month.

+
+ +
+
+ + + diff --git a/Calculators/Rent-Calculators/rent.js b/Calculators/Rent-Calculators/rent.js new file mode 100644 index 000000000..27cceb262 --- /dev/null +++ b/Calculators/Rent-Calculators/rent.js @@ -0,0 +1,28 @@ +function calculateRent() { + const income = parseFloat(document.getElementById('income').value); + const incomePeriod = document.getElementById('incomePeriod').value; + const debt = parseFloat(document.getElementById('debt').value); + + if (isNaN(income) || isNaN(debt) || income <= 0) { + alert('Please enter valid numbers for income and debt.'); + return; + } + + // Convert yearly income to monthly income if necessary + const monthlyIncome = incomePeriod === 'year' ? income / 12 : income; + + const maximumRent = (monthlyIncome - debt) * 0.3; + const recommendedRent = maximumRent * 0.5; + + const resultMessage = document.getElementById('resultMessage'); + if (maximumRent <= 0) { + resultMessage.innerHTML = ` +

At that income and debt level, it will be hard to meet rent payments.

+ `; + } else { + resultMessage.innerHTML = ` +

You can afford up to $${maximumRent.toFixed(0)} per month on a rental payment.

+

It is recommended to keep your rental payment below $${recommendedRent.toFixed(0)} per month.

+ `; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 2f191bd85..2f59ed7e6 100644 --- a/index.html +++ b/index.html @@ -2318,6 +2318,20 @@

Converts Rectangular form into Polar form and vice versa.

+
+
+

Rent Calculator

+

Calculate the overall budget.

+
+ + + + + Source Code + +
+
+

Retirement Calculator