Added Work-Life Balance Calculator (#1983)

Rakesh9100 · Jan 15, 2025 · 17b434f · 17b434f
1 parent f05ace0
commit 17b434f
Show file tree

Hide file tree

Showing 6 changed files with 299 additions and 0 deletions.
diff --git a/Calculators/Work-Life-Balance-Calculator/README.md b/Calculators/Work-Life-Balance-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Work-Life Balance Calculator</p>
+
+## Description :-
+
+Calculates the overall work-life balance by evaluating hours spent on work, sleep, commute, stress, personal care, and leisure, providing insights to improve your well-being.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/6346bdc7-d6cb-47e4-85ed-761730a447f3)
diff --git a/Calculators/Work-Life-Balance-Calculator/assets/background.jpg b/Calculators/Work-Life-Balance-Calculator/assets/background.jpg
diff --git a/Calculators/Work-Life-Balance-Calculator/index.html b/Calculators/Work-Life-Balance-Calculator/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <title>Work-Life Balance Calculator</title>
+</head>
+<body>
+    <div class="background-container">
+        <div class="overlay"></div>
+        <div class="container">
+            <div class="card">
+                <h1>Work-Life Balance Calculator</h1>
+                <form id="balanceForm">
+                    <div class="input-group">
+                        <label for="work"><i class="fa fa-briefcase"></i> Work Hours:</label>
+                        <input type="number" id="work" required min="0" max="24" placeholder="Enter hours for work">
+                    </div>
+                    <div class="input-group">
+                        <label for="commute"><i class="fa fa-car"></i> Commute Hours:</label>
+                        <input type="number" id="commute" required min="0" max="24" placeholder="Enter hours for commute">
+                    </div>
+                    <div class="input-group">
+                        <label for="sleep"><i class="fa fa-bed"></i> Sleep Hours:</label>
+                        <input type="number" id="sleep" required min="0" max="9" placeholder="Enter hours of sleep">
+                    </div>
+                    <div class="input-group">
+                        <label for="stress"><i class="fa fa-exclamation-circle"></i> Stress Level (0-10):</label>
+                        <input type="number" id="stress" required min="0" max="10" placeholder="Enter stress level">
+                    </div>
+                    <div class="input-group">
+                        <label for="personal"><i class="fa fa-heart"></i> Personal Care Hours:</label>
+                        <input type="number" id="personal" required min="0" max="24" placeholder="Enter hours for personal care">
+                    </div>
+                    <div class="input-group">
+                        <label for="job"><i class="fa fa-briefcase"></i> Job Satisfaction (0-10):</label>
+                        <input type="number" id="job" required min="0" max="10" placeholder="Enter job satisfaction">
+                    </div>
+                    <div class="input-group">
+                        <label for="leisure"><i class="fa fa-smile"></i> Leisure Hours:</label>
+                        <input type="number" id="leisure" required min="0" max="24" placeholder="Enter hours for leisure">
+                    </div>
+
+                    <button type="submit" class="calculate-btn">Calculate Balance</button>
+                </form>
+
+                <div id="result" class="result">
+                    <h2>Your Work-Life Balance:</h2>
+                    <p id="balanceMessage"></p>
+                    <div class="progress-bar">
+                        <div id="progress" class="progress"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Work-Life-Balance-Calculator/script.js b/Calculators/Work-Life-Balance-Calculator/script.js
@@ -0,0 +1,45 @@
+document.getElementById('balanceForm').addEventListener('submit', function (event) {
+    event.preventDefault();
+
+    const workHours = parseInt(document.getElementById('work').value);
+    const commuteHours = parseInt(document.getElementById('commute').value);
+    const sleepHours = parseInt(document.getElementById('sleep').value);
+    const stressLevel = parseInt(document.getElementById('stress').value);
+    const personalCareHours = parseInt(document.getElementById('personal').value);
+    const jobSatisfaction = parseInt(document.getElementById('job').value);
+    const leisureHours = parseInt(document.getElementById('leisure').value);
+
+    if (isNaN(workHours) || isNaN(commuteHours) || isNaN(sleepHours) || isNaN(stressLevel) ||
+        isNaN(personalCareHours) || isNaN(jobSatisfaction) || isNaN(leisureHours)) {
+        alert("Please enter valid numbers for all fields.");
+        return;
+    }
+
+    const totalWeeklyHours = 168; // 24 hours * 7 days
+    const totalUsedHours = workHours + commuteHours + (sleepHours * 7) + personalCareHours + leisureHours;
+    const balanceRatio = totalUsedHours / totalWeeklyHours;
+
+    let balanceMessage = '';
+    let progressWidth = 0;
+
+    if (balanceRatio > 1) {
+        balanceMessage = 'You are spending more than the available hours in a week. Consider adjusting your schedule.';
+        progressWidth = 100;
+    } else if (balanceRatio > 0.7) {
+        balanceMessage = 'You are doing okay, but could use more personal time.';
+        progressWidth = balanceRatio * 100;
+    } else if (balanceRatio > 0.5) {
+        balanceMessage = 'You are maintaining a good balance.';
+        progressWidth = balanceRatio * 100;
+    } else {
+        balanceMessage = 'Excellent work-life balance! You have plenty of personal time.';
+        progressWidth = balanceRatio * 100;
+    }
+
+    // Show the result and progress bar
+    const resultDiv = document.getElementById('result');
+    const progress = document.getElementById('progress');
+    resultDiv.style.display = 'block';
+    document.getElementById('balanceMessage').textContent = balanceMessage;
+    progress.style.width = progressWidth + '%';
+});
diff --git a/Calculators/Work-Life-Balance-Calculator/style.css b/Calculators/Work-Life-Balance-Calculator/style.css
@@ -0,0 +1,171 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f7f7f7;
+    overflow: hidden;
+}
+
+.background-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('assets/background.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.container {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.card {
+    width: 100%;
+    max-width: 600px;
+    padding: 30px;
+    background-color: rgba(255, 255, 255, 0.85);
+    border-radius: 12px;
+    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+h1 {
+    font-size: 1.8rem;
+    color: #333;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.input-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.input-group label {
+    font-size: 1.1rem;
+    color: #555;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    width: 45%;
+}
+
+.input-group input {
+    width: 50%;
+    padding: 12px;
+    font-size: 1.1rem;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    transition: border-color 0.3s ease;
+}
+
+.input-group input:focus {
+    border-color: #ff7b00;
+    outline: none;
+}
+
+
+button {
+    background-color: #ff7b00;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1.2rem;
+    width: 100%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+button:hover {
+    background-color: #ff5200;
+    transform: scale(1.05);
+}
+
+button:focus {
+    outline: none;
+}
+
+/* Result Styles */
+.result {
+    display: none;
+    margin-top: 30px;
+}
+
+.result h2 {
+    font-size: 1.5rem;
+    color: #333;
+}
+
+.result p {
+    font-size: 1.1rem;
+    color: #555;
+    margin-top: 10px;
+}
+
+.progress-bar {
+    margin-top: 20px;
+    width: 100%;
+    height: 10px;
+    background-color: #ddd;
+    border-radius: 5px;
+}
+
+.progress {
+    height: 100%;
+    background-color: #ff7b00;
+    border-radius: 5px;
+    width: 0;
+    transition: width 0.5s ease;
+}
+
+/* Responsive Design */
+@media (max-width: 600px) {
+    .card {
+        padding: 20px;
+    }
+
+    h1 {
+        font-size: 1.5rem;
+    }
+
+    button {
+        font-size: 1rem;
+    }
+
+    .input-group {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .input-group label {
+        width: 100%;
+        margin-bottom: 5px;
+    }
+
+    .input-group input {
+        width: 100%;
+    }
+}
diff --git a/calculators.json b/calculators.json
@@ -2579,6 +2579,12 @@
         "link": "./Calculators/Work-Calculator/index.html",
         "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Work-Calculator"
     },
+    {
+        "title": "Work-Life Balance Calculator",
+        "description": "Calculates the overall work-life balance by evaluating some parameters.",
+        "link": "./Calculators/Work-Life-Balance-Calculator/index.html",  
+        "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Work-Life-Balance-Calculator"
+    },
     {
         "title": "Yarn Density Calculator",
         "description": "Calculates the linear density of the yarn from unit system to another.",