Added Salary Estimation Calculator (#943)

Rakesh9100 · May 31, 2024 · 34dfb6b · 34dfb6b
1 parent ac41470
commit 34dfb6b
Show file tree

Hide file tree

Showing 5 changed files with 258 additions and 0 deletions.
diff --git a/Calculators/Salary-Estimation-Calculator/README.md b/Calculators/Salary-Estimation-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Salary Estimation Calculator</p>
+
+## Description :-
+
+This calculator estimates a user's salary based on several key factors. It provides the output based on the variables entered by the user. 
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/c9e1d4d7-d6d8-44f0-9b58-6e743fe7c6a9)
diff --git a/Calculators/Salary-Estimation-Calculator/index.html b/Calculators/Salary-Estimation-Calculator/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+    <title>Salary Estimation Calculator</title>
+</head>
+<body>
+    <h1>Salary Estimation Calculator</h1>
+    <form id="salaryForm">
+        <label for="experience">Years of Experience:</label>
+        <input type="number" id="experience" name="experience" min="0"><br><br>
+
+        <label for="education">Education Level:</label>
+        <select id="education" name="education">
+            <option value="0">Choose</option>
+            <option value="1">High School</option>
+            <option value="5000">Bachelor's Degree</option>
+            <option value="10000">Master's Degree</option>
+            <option value="15000">PhD</option>
+        </select><br><br>
+
+        <label for="location">Enter Location suiting your job:</label>
+        <select id="location" name="location">
+            <option value="2">Choose</option>
+            <option value="5000">Metropolitian</option>
+            <option value="7000">Suburban</option>
+            <option value="3000">rural</option>
+            <option value="1500">remote</option>
+        </select><br><br>
+
+        <label for="industry">Industry:</label>
+        <select id="industry" name="industry">
+            <option value="3">Choose</option>
+            <option value="10000">Technical</option>
+            <option value="8000">Finance</option>
+            <option value="6000">Healthcare</option>
+        </select><br><br>
+
+        <label for="skills">Number of Skills:</label>
+        <input type="number" id="skills" name="skills" min="0"><br><br>
+
+        <button type="submit">Estimate Salary</button>
+        <button type="button" onclick="resetForm()">Reset</button>
+    </form>
+    <div id="result"></div>
+    <script src="script.js" defer></script>
+</body>
+</html>
diff --git a/Calculators/Salary-Estimation-Calculator/script.js b/Calculators/Salary-Estimation-Calculator/script.js
@@ -0,0 +1,89 @@
+document.addEventListener('DOMContentLoaded', function () {
+    document.getElementById('salaryForm').addEventListener('submit', function (event) {
+        event.preventDefault();
+        if (validateForm()) {
+            estimateSalary();
+        }
+    });
+});
+
+function validateForm() {
+    const experience = document.getElementById('experience').value;
+    const education = document.getElementById('education').value;
+    const location = document.getElementById('location').value;
+    const industry = document.getElementById('industry').value;
+    const skills = document.getElementById('skills').value;
+
+    if (
+        experience === '' || 
+        education === '0' || 
+        location === '2' ||  
+        industry === '3' ||  
+        skills === ''
+    ) {
+        alert("Please fill in all the criteria.");
+        return false;
+    }
+    return true;
+}
+
+function estimateSalary() {
+    const experience = parseInt(document.getElementById('experience').value);
+    const education = parseInt(document.getElementById('education').value);
+    const location = parseInt(document.getElementById('location').value);
+    const industry = parseInt(document.getElementById('industry').value);
+    const skills = parseInt(document.getElementById('skills').value);
+    const educationCoefficients = {
+        1: 0,     
+        5000: 1, 
+        10000: 2, 
+        15000: 3  
+    };
+    const locationCoefficients = {
+        5000: 1,  
+        7000: 2,  
+        3000: 0,  
+        1500: 0   
+    };
+    const industryCoefficients = {
+        10000: 2, 
+        8000: 1,  
+        6000: 0   
+    };
+    const baseSalary = 1500;
+    const experienceBonus = experience * 500;
+    const totalSalary = baseSalary + experienceBonus + (educationCoefficients[education] * education) + (locationCoefficients[location] * location) + (industryCoefficients[industry] * industry) + (skills * 1000);
+
+    const criteria = {
+        'Base Salary': '$1500',
+        'Experience Bonus': '$' + experienceBonus,
+        'Education': '$' + (educationCoefficients[education] * education),
+        'Location': '$' + (locationCoefficients[location] * location),
+        'Industry': '$' + (industryCoefficients[industry] * industry),
+        'Skills Bonus': '$' + (skills * 1000),
+        'Total Salary': '$' + totalSalary
+    };
+
+    displayResult(criteria);
+}
+
+function displayResult(criteria) {
+    const resultDiv = document.getElementById('result');
+    resultDiv.innerHTML = '';
+
+    const table = document.createElement('table');
+    table.setAttribute('id', 'resultTable');
+
+    for (const [criterion, value] of Object.entries(criteria)) {
+        const row = table.insertRow();
+        const cell1 = row.insertCell(0);
+        const cell2 = row.insertCell(1);
+        cell1.textContent = criterion;
+        cell2.textContent = value;
+    }
+    resultDiv.appendChild(table);
+}
+function resetForm() {
+    document.getElementById('salaryForm').reset();
+    document.getElementById('result').innerText = ''; 
+}
diff --git a/Calculators/Salary-Estimation-Calculator/style.css b/Calculators/Salary-Estimation-Calculator/style.css
@@ -0,0 +1,91 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #b5d7ec;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+h1 {
+    margin-bottom: 20px;
+    font-size: 2em;
+    color: #333;
+    font-family: Georgia;
+    text-shadow: #b5d7ec;
+}
+
+form {
+    width: 100%;
+    max-width: 400px;
+    padding: 20px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+label {
+    display: block;
+    margin: 15px 0 5px;
+    font-weight: bold;
+    color: #555;
+}
+
+input[type="number"], select {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1em;
+    color: #333;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    margin-top: 20px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #74de3e;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 1.2em;
+    color: #333;
+    text-align: center;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 10px;
+    background-color: #f2f2f2;
+}
+
+#resultTable {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+#resultTable th, #resultTable td {
+    border: 1px solid #ccc;
+    padding: 8px;
+    font-weight: bold;
+    font-style: italic;
+}
diff --git a/index.html b/index.html
@@ -1868,6 +1868,20 @@ <h3>Converts Roman Numeral form into Decimal form.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Salary Estimation Calculator</h2>
+                <h3>Estimates the expected salary based on some parameters.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Salary-Estimation-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Salary-Estimation-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>Salary To Hourly Calculator</h2>