Refactored some calculators

Rakesh9100 · Jan 18, 2025 · f14ec06 · f14ec06
1 parent 541c70b
commit f14ec06
Show file tree

Hide file tree

Showing 13 changed files with 278 additions and 351 deletions.
diff --git a/Calculators/Lease-Calculator/README.md b/Calculators/Lease-Calculator/README.md
@@ -23,4 +23,4 @@ A simple and intuitive lease calculator that helps users determine their monthly
 
 ## Screenshots :-
 
-![image](https://github.com/user-attachments/assets/67e76841-6d2d-4f23-b62d-eb97ee8313d6)
+![Image](https://github.com/user-attachments/assets/7fc940e4-633a-4bc2-a626-be676b87b9f6)
diff --git a/Calculators/Lease-Calculator/index.html b/Calculators/Lease-Calculator/index.html
@@ -33,9 +33,18 @@ <h1>Lease Calculator</h1>
         </form>
         <div id="results" class="results" style="display: none;">
             <h2>Calculation Results</h2>
-            <p id="monthlyPayment"></p>
-            <p id="totalPayment"></p>
-            <p id="totalInterest"></p>
+            <div class="result-item">
+                <span class="result-label">Monthly Payment:</span>
+                <span id="monthlyPayment" class="result-value"></span>
+            </div>
+            <div class="result-item">
+                <span class="result-label">Total Payment:</span>
+                <span id="totalPayment" class="result-value"></span>
+            </div>
+            <div class="result-item">
+                <span class="result-label">Total Interest:</span>
+                <span id="totalInterest" class="result-value"></span>
+            </div>
         </div>
         <p id="errorMessage" class="error-message" style="display: none;"></p>
     </div>

diff --git a/Calculators/Lease-Calculator/script.js b/Calculators/Lease-Calculator/script.js
@@ -1,7 +1,7 @@
 function calculateLease() {
     const assetValue = parseFloat(document.getElementById('assetValue').value);
     const residualValue = parseFloat(document.getElementById('residualValue').value);
-    const leaseTerm = parseFloat(document.getElementById('leaseTerm').value) * 12; 
+    const leaseTerm = parseFloat(document.getElementById('leaseTerm').value) * 12;
     const interestRate = parseFloat(document.getElementById('interestRate').value) / 100 / 12;
 
     const errorMessage = document.getElementById('errorMessage');
@@ -21,9 +21,9 @@ function calculateLease() {
     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('monthlyPayment').innerText = `$${monthlyPayment.toFixed(2)}`;
+    document.getElementById('totalPayment').innerText = `$${totalPayment.toFixed(2)}`;
+    document.getElementById('totalInterest').innerText = `$${totalInterest.toFixed(2)}`;
 
     errorMessage.style.display = "none";
     results.style.display = "block";

diff --git a/Calculators/Lease-Calculator/style.css b/Calculators/Lease-Calculator/style.css
@@ -1,26 +1,38 @@
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2ecc71;
+    --background-color: #f1f0ec;
+    --text-color: #34495e;
+    --error-color: #e74c3c;
+}
+
 body {
-    font-family: Arial, sans-serif;
-    background: linear-gradient(135deg, #74b9ff, #a29bfe);
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    background-color: var(--background-color);
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    min-height: 100vh;
     margin: 0;
+    padding: 20px;
+    box-sizing: border-box;
 }
 
 .container {
     background: white;
-    padding: 25px;
-    border-radius: 12px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-    max-width: 450px;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    max-width: 500px;
     width: 100%;
-    animation: fadeIn 1s ease-in-out;
+    animation: fadeIn 0.5s ease-in-out;
 }
 
 h1 {
     text-align: center;
-    color: #2d3436;
+    color: var(--primary-color);
+    margin-bottom: 30px;
+    font-size: 28px;
 }
 
 .input-group {
@@ -30,65 +42,96 @@ h1 {
 label {
     display: block;
     margin-bottom: 8px;
-    color: #636e72;
+    color: var(--text-color);
+    font-weight: 600;
 }
 
 input {
     width: 100%;
     padding: 12px;
-    border: 1px solid #cccccc;
-    border-radius: 6px;
+    border: 2px solid #ddd;
+    border-radius: 8px;
     font-size: 16px;
     transition: all 0.3s ease;
+    box-sizing: border-box;
 }
 
 input:focus {
-    border-color: #0984e3;
+    border-color: var(--primary-color);
     outline: none;
-    box-shadow: 0 0 8px rgba(9, 132, 227, 0.3);
+    box-shadow: 0 0 10px rgba(52, 152, 219, 0.2);
 }
 
 .btn-group {
     display: flex;
-    gap: 10px;
+    gap: 15px;
+    margin-top: 30px;
 }
 
 button {
     flex: 1;
     padding: 12px;
     font-size: 16px;
     border: none;
-    border-radius: 6px;
+    border-radius: 8px;
     cursor: pointer;
     color: white;
-    transition: background 0.3s ease;
+    transition: all 0.3s ease;
+    font-weight: 600;
 }
 
 .calculate-btn {
-    background: #00b894;
+    background: var(--primary-color);
 }
 
 .calculate-btn:hover {
-    background: #00a37a;
+    background: #2980b9;
 }
 
 .reset-btn {
-    background: #d63031;
+    background: var(--secondary-color);
 }
 
 .reset-btn:hover {
-    background: #b52a26;
+    background: #27ae60;
 }
 
-.results,
-.error-message {
-    margin-top: 20px;
+.results {
+    margin-top: 30px;
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
     animation: slideIn 0.5s ease-in-out;
 }
 
+.results h2 {
+    color: var(--primary-color);
+    margin-bottom: 15px;
+    font-size: 22px;
+}
+
+.result-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.result-label {
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+.result-value {
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
 .error-message {
-    color: #d63031;
+    color: var(--error-color);
     font-weight: bold;
+    text-align: center;
+    margin-top: 20px;
+    animation: shake 0.5s ease-in-out;
 }
 
 @keyframes fadeIn {
@@ -111,4 +154,41 @@ button {
         transform: translateY(0);
         opacity: 1;
     }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: translateX(-5px);
+    }
+
+    20%,
+    40%,
+    60%,
+    80% {
+        transform: translateX(5px);
+    }
+}
+
+@media (max-width: 600px) {
+    .container {
+        padding: 20px;
+    }
+
+    h1 {
+        font-size: 24px;
+    }
+
+    .btn-group {
+        flex-direction: column;
+    }
 }
diff --git a/Calculators/Special-Number-2-Calculator/README.md b/Calculators/Special-Number-2-Calculator/README.md
diff --git a/Calculators/Special-Number-2-Calculator/index.html b/Calculators/Special-Number-2-Calculator/index.html
diff --git a/Calculators/Special-Number-2-Calculator/script.js b/Calculators/Special-Number-2-Calculator/script.js
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,4 +23,4 @@ A simple and intuitive lease calculator that helps users determine their monthly

		## Screenshots :-

		![image](https://github.com/user-attachments/assets/67e76841-6d2d-4f23-b62d-eb97ee8313d6)
		![Image](https://github.com/user-attachments/assets/7fc940e4-633a-4bc2-a626-be676b87b9f6)