From 72f780c175910ddfdf4983425e1e61bb4cdb1f62 Mon Sep 17 00:00:00 2001
From: KajalDeore04 <kajaldeore04@gmail.com>
Date: Sat, 4 Jan 2025 10:39:12 +0530
Subject: [PATCH] #642 calculator styled

---
 src/components/rent/RentCalculator.css | 121 ++++++++++++++++++-------
 src/components/rent/RentCalculator.jsx |  81 +++++++++++------
 2 files changed, 139 insertions(+), 63 deletions(-)

diff --git a/src/components/rent/RentCalculator.css b/src/components/rent/RentCalculator.css
index 5c17151..8d1f353 100644
--- a/src/components/rent/RentCalculator.css
+++ b/src/components/rent/RentCalculator.css
@@ -1,43 +1,88 @@
-.rent-calculator {
-    max-width: 400px;
-    margin: 0 auto;
-    padding: 20px;
+  .rent-calculator h1{
+    font-weight: 700;
+    font-size: 40px;
+    margin-bottom: 20px;
+  }
+  .rent-calculator {
+    display: flex;
+    font-family: Arial, sans-serif;
+    max-width: 80vw;
+    justify-content: space-between;
+    margin: 20px auto;
+    align-items: center;
+  }
+  .left{
+    max-width: 600px;
+  }
+  .left h1 span{
+    color: #ec154e;
+    font-size: 50px;
+  }
+  .left p{
+    max-width: 500px;
+    font-size: 20px;
+  }
+  .right{
+    width: 500px;
     border: 1px solid #ddd;
     border-radius: 8px;
-    background-color: #f9f9f9;
-    text-align: center;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: #f9f9f9;
+    padding: 20px;
   }
-
-  .rent-calculator h1 {
-    color: #333;
+  .input-group {
     margin-bottom: 20px;
-    font-size: 24px;
   }
-
-  .input-group {
-    margin-bottom: 15px;
+  
+  .slider-label {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    color: gray;
+    display: flex;
+    align-items: baseline;
   }
 
-  .input-group label {
-    display: block;
-    font-size: 16px;
-    margin-bottom: 5px;
-    color: #555;
+  .slider-label span{
+    color: black;
+    background-color: #e0e0e0;
+    padding: 10px;
+    border-radius: 10px;
   }
-
-  .input-group input {
+  
+  .slider {
     width: 100%;
-    padding: 10px;
-    font-size: 14px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 6px;
+    background: #e0e0e0;
+    border-radius: 3px;
+    outline: none;
+    cursor: pointer;
   }
-
+  
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #00b894;
+    cursor: pointer;
+  }
+  
+  .slider::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #00b894;
+    cursor: pointer;
+  }
+  
   .calculate-btn {
     width: 100%;
-    padding: 10px;
-    background-color: #2ec4b6;
+    padding: 10px 20px;
+    background-color: #00b894;
     color: white;
     font-size: 16px;
     border: none;
@@ -45,14 +90,22 @@
     cursor: pointer;
     transition: background-color 0.3s ease;
   }
-
+  
   .calculate-btn:hover {
-    background-color: #238e8b;
+    background-color: #019970;
   }
-
+  
   .result {
+    text-align: center;
     margin-top: 20px;
-    font-size: 18px;
-    font-weight: bold;
-    color: #2ec4b6;
-  }
\ No newline at end of file
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+
+  .result span{
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: 900;
+  }
+  
\ No newline at end of file
diff --git a/src/components/rent/RentCalculator.jsx b/src/components/rent/RentCalculator.jsx
index feb050b..023f7c4 100644
--- a/src/components/rent/RentCalculator.jsx
+++ b/src/components/rent/RentCalculator.jsx
@@ -2,71 +2,94 @@ import React, { useState } from 'react';
 import './RentCalculator.css';
 
 const RentCalculator = () => {
-  const [baseRent, setBaseRent] = useState('');
-  const [powerBill, setPowerBill] = useState('');
-  const [waterBill, setWaterBill] = useState('');
-  const [otherFees, setOtherFees] = useState('');
+  const [baseRent, setBaseRent] = useState(20000);
+  const [powerBill, setPowerBill] = useState(300);
+  const [waterBill, setWaterBill] = useState(50);
+  const [otherFees, setOtherFees] = useState(500);
   const [totalRent, setTotalRent] = useState(null);
 
   const calculateTotalRent = () => {
-    const rent = parseFloat(baseRent) || 0;
-    const power = parseFloat(powerBill) || 0;
-    const water = parseFloat(waterBill) || 0;
-    const other = parseFloat(otherFees) || 0;
-    const total = rent + power + water + other;
+    const total = baseRent + powerBill + waterBill + otherFees;
     setTotalRent(total);
   };
 
   return (
-
     <div id="RentCalculator" className="rent-calculator">
-      <h1>Monthly Rent Calculator</h1>
+      <div className='left'>
+      <h1>Monthly Rent <span>Calculator</span></h1>
+      <p className="description">Adjust the sliders below to input your rent, utilities, and other fees. The total rent will be calculated automatically!</p>
+      </div>
+
+
+      <div className='right'>
       <div className="input-group">
-        <label>Base Rent ($):</label>
+        <label className="slider-label">Base Rent: <span>$ {baseRent}</span></label>
         <input
-          type="number"
+          type="range"
+          min="1000"
+          max="50000"
+          step="50"
           value={baseRent}
-          onChange={(e) => setBaseRent(e.target.value)}
-          placeholder="Enter base rent amount"
+          onChange={(e) => setBaseRent(parseInt(e.target.value, 10))}
+          className="slider"
+          style={{ background: `linear-gradient(to right, #1abc9c ${(baseRent - 1000) / 490}%, #e0e0e0 ${(baseRent - 1000) / 490}%)` }}
         />
       </div>
+
       <div className="input-group">
-        <label>Power Bill ($):</label>
+        <label className="slider-label">Power Bill : <span>$ {powerBill}</span></label>
         <input
-          type="number"
+          type="range"
+          min="0"
+          max="500"
+          step="10"
           value={powerBill}
-          onChange={(e) => setPowerBill(e.target.value)}
-          placeholder="Enter power bill amount"
+          onChange={(e) => setPowerBill(parseInt(e.target.value, 10))}
+          className="slider"
+          style={{ background: `linear-gradient(to right, #1abc9c ${powerBill / 5}%, #e0e0e0 ${powerBill / 5}%)` }}
         />
       </div>
+
       <div className="input-group">
-        <label>Water Bill ($):</label>
+        <label className="slider-label">Water Bill : <span>$ {waterBill}</span></label>
         <input
-          type="number"
+          type="range"
+          min="0"
+          max="200"
+          step="10"
           value={waterBill}
-          onChange={(e) => setWaterBill(e.target.value)}
-          placeholder="Enter water bill amount"
+          onChange={(e) => setWaterBill(parseInt(e.target.value, 10))}
+          className="slider"
+          style={{ background: `linear-gradient(to right, #1abc9c ${waterBill / 2}%, #e0e0e0 ${waterBill / 2}%)` }}
         />
       </div>
+
       <div className="input-group">
-        <label>Other Fees ($):</label>
+        <label className="slider-label">Other Fees : <span>$ {otherFees}</span></label>
         <input
-          type="number"
+          type="range"
+          min="0"
+          max="1000"
+          step="10"
           value={otherFees}
-          onChange={(e) => setOtherFees(e.target.value)}
-          placeholder="Enter other fees"
+          onChange={(e) => setOtherFees(parseInt(e.target.value, 10))}
+          className="slider"
+          style={{ background: `linear-gradient(to right, #1abc9c ${otherFees / 10}%, #e0e0e0 ${otherFees / 10}%)` }}
         />
       </div>
+
       <button onClick={calculateTotalRent} className="calculate-btn">
         Calculate Total Rent
       </button>
+
       {totalRent !== null && (
         <div className="result">
-          <h2>Total Monthly Rent: ${totalRent.toFixed(2)}</h2>
+          <h2>Total Monthly Rent:  <span>${totalRent.toFixed(2)}</span></h2>
         </div>
       )}
+      </div>
     </div>
   );
 };
 
-export default RentCalculator;
\ No newline at end of file
+export default RentCalculator;