Rakesh9100 · Meetjain1 · May 29, 2024 · Jun 4, 2024 · Jun 4, 2024 · Jun 7, 2024
diff --git a/Calculators/Dividend calculator/Readme.md b/Calculators/Dividend calculator/Readme.md
@@ -0,0 +1,15 @@
+# <p align="center">Dividend Calculator</p>
+
+## Description :-
+
+The Dividend Yield Calculator effortlessly calculates the % Dividend yield which is used to assess potential income from investments, compare dividend-paying stocks, and make informed investment decisions based on risk and long-term financial goals.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![Dividend calci](divi.jpg)
diff --git a/Calculators/Dividend calculator/background.jpg b/Calculators/Dividend calculator/background.jpg
diff --git a/Calculators/Dividend calculator/divi.jpg b/Calculators/Dividend calculator/divi.jpg
diff --git a/Calculators/Dividend calculator/index.html b/Calculators/Dividend calculator/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dividend Yield Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+</head>
+<body>
+    <div class="container animate__animated animate__fadeIn">
+        <h1>Dividend Yield Calculator</h1>
+        <form id="dividendForm" class="animate__animated animate__zoomIn">
+            <div class="input-group">
+                <label for="annualDividend">Annual Dividend (INR):</label>
+                <input type="number" id="annualDividend" step="0.01" required>
+            </div>
+            <div class="input-group">
+                <label for="marketPrice">Current Market Price (INR):</label>
+                <input type="number" id="marketPrice" step="0.01" required>
+            </div>
+            <button type="submit">Calculate</button>
+        </form>
+        <div id="result" class="result animate__animated animate__fadeInUp"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Dividend calculator/script.js b/Calculators/Dividend calculator/script.js
@@ -0,0 +1,17 @@
+document.getElementById('dividendForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const annualDividend = parseFloat(document.getElementById('annualDividend').value);
+    const marketPrice = parseFloat(document.getElementById('marketPrice').value);
+
+    if (isNaN(annualDividend) || isNaN(marketPrice)) {
+        document.getElementById('result').innerText = "Please enter valid numbers.";
+        return;
+    }
+
+    const dividendYield = ((annualDividend / marketPrice) * 100).toFixed(2);
+
+    document.getElementById('result').innerHTML = `
+        Dividend Yield: ${dividendYield}%
+    `;
+});
diff --git a/Calculators/Dividend calculator/styles.css b/Calculators/Dividend calculator/styles.css
@@ -0,0 +1,85 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-image: url('background.jpg');
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    padding: 20px;
+}
+
+.container {
+    background: rgba(193, 214, 75, 0.9);
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    width: 100%;
+    max-width: 400px;
+}
+
+h1 {
+    margin-bottom: 20px;
+    font-size: 1.8rem;
+    color: #333;
+}
+
+.input-group {
+    margin-bottom: 20px;
+}
+
+.input-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 1rem;
+    color: #555;
+}
+
+.input-group input {
+    width: calc(100% - 20px);
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+
+button {
+    padding: 12px 25px;
+    border: none;
+    border-radius: 5px;
+    background: #1d1d1c;
+    color: white;
+    font-size: 1.1rem;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+button:hover {
+    background: #e08309;
+}
+
+.result {
+    margin-top: 20px;
+    font-size: 1.2rem;
+    color: #333;
+    font-weight: bold;
+}
+
+@media (max-width: 768px) {
+    h1 {
+        font-size: 1.5rem;
+    }
+
+    button {
+        padding: 10px 20px;
+        font-size: 1rem;
+    }
+
+    .input-group input {
+        font-size: 0.9rem;
+    }
+
+}
diff --git a/Calculators/Lease-calculator/README.md b/Calculators/Lease-calculator/README.md
@@ -0,0 +1,15 @@
+# Lease Calculator
+
+A simple and intuitive lease calculator that helps users determine their monthly lease payments, total payments, and total interest. Designed to be responsive and interactive, this calculator provides accurate financial calculations with a user-friendly interface.
+
+## Features
+
+1. **Responsive Design**:
+   - Adapts seamlessly to all devices, ensuring a consistent user experience on desktops, tablets, and mobile phones.
+
+2. **Dynamic Calculations**:
+   - Instantly computes and displays monthly lease payments, total payments, and total interest using precise financial formulas.
+
+3. **Interactive Elements**:
+   - Incorporates hover effects and smooth animations, providing a modern and engaging user interface.
+
diff --git a/Calculators/Lease-calculator/index.html b/Calculators/Lease-calculator/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lease Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Lease Calculator</h1>
+        <form id="leaseForm">
+            <div class="input-group">
+                <label for="assetValue">Asset Value ($)</label>
+                <input type="number" id="assetValue" required>
+            </div>
+            <div class="input-group">
+                <label for="residualValue">Residual Value ($)</label>
+                <input type="number" id="residualValue" required>
+            </div>
+            <div class="input-group">
+                <label for="leaseTerm">Lease Term (Years)</label>
+                <input type="number" id="leaseTerm" required>
+            </div>
+            <div class="input-group">
+                <label for="interestRate">Interest Rate (%)</label>
+                <input type="number" id="interestRate" required>
+            </div>
+            <button type="button" onclick="calculateLease()">Calculate</button>
+        </form>
+        <div id="results" class="results">
+            <h2>Lease Calculation Results</h2>
+            <p id="monthlyPayment">Monthly Payment: </p>
+            <p id="totalPayment">Total Payment: </p>
+            <p id="totalInterest">Total Interest: </p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Lease-calculator/script.js b/Calculators/Lease-calculator/script.js
@@ -0,0 +1,19 @@
+function calculateLease() {
+    const assetValue = parseFloat(document.getElementById('assetValue').value);
+    const residualValue = parseFloat(document.getElementById('residualValue').value);
+    const leaseTerm = parseFloat(document.getElementById('leaseTerm').value) * 12; // Convert years to months
+    const interestRate = parseFloat(document.getElementById('interestRate').value) / 100 / 12; // Monthly interest rate
+
+    const depreciation = (assetValue - residualValue) / leaseTerm;
+    const interest = (assetValue + residualValue) * interestRate / 2;
+
+    const monthlyPayment = depreciation + interest;
+    const totalPayment = monthlyPayment * leaseTerm;
+    const totalInterest = totalPayment - (assetValue - residualValue);
+
+    document.getElementById('monthlyPayment').innerText = `Monthly Payment: $${monthlyPayment.toFixed(2)}`;
+    document.getElementById('totalPayment').innerText = `Total Payment: $${totalPayment.toFixed(2)}`;
+    document.getElementById('totalInterest').innerText = `Total Interest: $${totalInterest.toFixed(2)}`;
+
+    document.getElementById('results').style.display = 'block';
+}
diff --git a/Calculators/Lease-calculator/styles.css b/Calculators/Lease-calculator/styles.css
@@ -0,0 +1,88 @@
+body {
+    font-family: Arial, sans-serif;
+    background: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 100%;
+    animation: fadeIn 1s ease-in-out;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+}
+
+.input-group {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    color: #555;
+}
+
+input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background: #28a745;
+    border: none;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+button:hover {
+    background: #218838;
+}
+
+.results {
+    margin-top: 20px;
+    display: none;
+    animation: slideIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@media (max-width: 600px) {
+    .container {
+        padding: 15px;
+    }
+}
diff --git a/index.html b/index.html
@@ -2873,6 +2873,20 @@ <h3>Checks whether the entered year is a leap year or not.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Lease Calculator</h2>
+                <h3>Calculates Lease Payments needs to be paid</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Lease-calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Lease-calculator" 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>Least Squares Regression Calculator</h2>