Rent-Calculator_Commit

Rakesh9100 · Jun 10, 2024 · 88bb011 · 88bb011
1 parent 551f76e
commit 88bb011
Show file tree

Hide file tree

Showing 7 changed files with 235 additions and 0 deletions.
diff --git a/Calculators/Rent-Calculators/README.md b/Calculators/Rent-Calculators/README.md
@@ -0,0 +1,16 @@
+# <p align="center">Rent Calculator</p>
+
+## 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
diff --git a/Calculators/Rent-Calculators/image.png b/Calculators/Rent-Calculators/image.png
diff --git a/Calculators/Rent-Calculators/rent.css 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;
+  }
diff --git a/Calculators/Rent-Calculators/rent.html b/Calculators/Rent-Calculators/rent.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rent Calculator</title>
+    <link rel="stylesheet" href="rent.css" type="text/css" />
+</head>
+<body>
+    <h1>How Much Rent Can I Afford?</h1>
+    <div class="main-container">
+        <div class="left-side"></div>
+        <div class="right-side">
+            <section class="signup">
+                <div class="container_SU">
+                    <div class="signup-content">
+                        <div class="signup-form">
+                            <h2 class="form-title">Rent Calculator</h2>
+                            <form id="rent-form">
+                                <div class="form-group">
+                                    <label for="income">Your pre-tax income:</label>
+                                    <input type="number" name="income" id="income" required />
+                                </div>
+                                <div class="form-group">
+                                    <label for="debt">Your monthly debt payback:</label>
+                                    <input type="number" id="debt" required>
+                                </div>
+                                <select id="incomePeriod">
+                                    <option value="month">per month</option>
+                                    <option value="year">per year</option>
+                                </select>
+                                <div class="form-group form-button">
+                                    <button type="button" onclick="calculateRent()">Calculate</button>
+                                    <button type="reset">Clear</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <div id="resultMessage" class="result">
+                <p>You can afford up to <span id="maximum">$0</span> per month on a rental payment.</p>
+                <p>It is recommended to keep your rental payment below <span id="recommended">$0</span> per month.</p>
+            </div>
+
+        </div>
+    </div>
+    <script src="rent.js"></script>
+</body>
+</html>
diff --git a/Calculators/Rent-Calculators/rent.js 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 = `
+            <p>At that income and debt level, it will be hard to meet rent payments.</p>
+        `;
+    } else {
+        resultMessage.innerHTML = `
+            <p>You can afford up to <span id="maximum">$${maximumRent.toFixed(0)}</span> per month on a rental payment.</p>
+            <p>It is recommended to keep your rental payment below <span id="recommended">$${recommendedRent.toFixed(0)}</span> per month.</p>
+        `;
+    }
+}
diff --git a/index.html b/index.html
@@ -2318,6 +2318,20 @@ <h3>Converts Rectangular form into Polar form and vice versa.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Rent Calculator</h2>
+                <h3> Calculate the overall budget.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Rent-Calculators/rent.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Rent-Calculators" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Retirement Calculator</h2>