diff --git a/Calculators/Rent-Calculator/README.md b/Calculators/Rent-Calculator/README.md new file mode 100644 index 000000000..84fe38150 --- /dev/null +++ b/Calculators/Rent-Calculator/README.md @@ -0,0 +1,15 @@ +#

Rent Calculator

+ +## Description :- + +Calculates the overall budget for a rental payment. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/c4ad3e8c-cdbc-4e94-beb1-cd4719d47857) diff --git a/Calculators/Rent-Calculator/index.html b/Calculators/Rent-Calculator/index.html new file mode 100644 index 000000000..e6f902f01 --- /dev/null +++ b/Calculators/Rent-Calculator/index.html @@ -0,0 +1,54 @@ + + + + + + + + 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-Calculator/script.js b/Calculators/Rent-Calculator/script.js new file mode 100644 index 000000000..27cceb262 --- /dev/null +++ b/Calculators/Rent-Calculator/script.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/Calculators/Rent-Calculator/style.css b/Calculators/Rent-Calculator/style.css new file mode 100644 index 000000000..322ae59bd --- /dev/null +++ b/Calculators/Rent-Calculator/style.css @@ -0,0 +1,131 @@ +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('assets/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; +} diff --git a/index.html b/index.html index 1a3df64d2..552adb94f 100644 --- a/index.html +++ b/index.html @@ -2668,6 +2668,20 @@

Converts Rectangular form into Polar form and vice versa.

+
+
+

Rent Calculator

+

Calculates the overall budget for a rental payment.

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

Retirement Calculator