Salary-to-hourly

Rakesh9100 · May 21, 2024 · 3bacafc · 3bacafc
1 parent 22c3c46
commit 3bacafc
Show file tree

Hide file tree

Showing 5 changed files with 280 additions and 0 deletions.
diff --git a/Calculators/Salary-To-Hourly-Calculator/Index.html b/Calculators/Salary-To-Hourly-Calculator/Index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Salary to hourly</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="description">
+        <h1>Salary to hourly calculator</h1>
+        <p>
+          calculate your salary in annual,monthly,<br />
+          weekly, daily and hourly wages
+        </p>
+      </div>
+      <div class="calculate__box">
+        <label for="workingHour">Working Hour:</label>
+        <input
+          type="number"
+          id="workingHour"
+          placeholder="working hour per day"
+        />
+        <label for="workingHour">Working days:</label>
+        <input
+          type="number"
+          id="workingDays"
+          placeholder="working days per week"
+        />
+        <label for="annualSalary">Annual Salary:</label>
+        <input type="number" id="annualSalary" />
+
+        <label for="monthlySalary">Monthly Salary:</label>
+        <input type="number" id="monthlySalary" />
+
+        <label for="weeklySalary">Weekly Salary:</label>
+        <input type="number" id="weeklySalary" />
+
+        <label for="dailySalary">Daily Salary:</label>
+        <input type="number" id="dailySalary" />
+
+        <label for="hourlySalary">Hourly Salary:</label>
+        <input type="number" id="hourlySalary" />
+      </div>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/Calculators/Salary-To-Hourly-Calculator/README.md b/Calculators/Salary-To-Hourly-Calculator/README.md
@@ -0,0 +1,17 @@
+# <p align="center">Salary To Hourly Calculator</p>
+
+## Description :-
+
+This is a web application that enables users to convert their salary across various timeframes simultaneously.( annual, monthly, weekly, daily, or hourly wage)
+
+## How To Use :-
+
+-First add Your Working Hours
+-Second Add your Working Days in a week
+-Then on one of the input field enter your salary
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
diff --git a/Calculators/Salary-To-Hourly-Calculator/index.js b/Calculators/Salary-To-Hourly-Calculator/index.js
@@ -0,0 +1,73 @@
+document.addEventListener("DOMContentLoaded", function () {
+  var annualSalaryInput = document.getElementById("annualSalary");
+  var monthlySalaryInput = document.getElementById("monthlySalary");
+  var weeklySalaryInput = document.getElementById("weeklySalary");
+  var dailySalaryInput = document.getElementById("dailySalary");
+  var hourlySalaryInput = document.getElementById("hourlySalary");
+  var workingHourInput = document.getElementById("workingHour");
+  var workingDaysInput = document.getElementById("workingDays");
+  annualSalaryInput.addEventListener("input", calcSalary);
+  monthlySalaryInput.addEventListener("input", calcSalary);
+  weeklySalaryInput.addEventListener("input", calcSalary);
+  dailySalaryInput.addEventListener("input", calcSalary);
+  hourlySalaryInput.addEventListener("input", calcSalary);
+  workingHourInput.addEventListener("input", calcSalary);
+  workingDaysInput.addEventListener("input", calcSalary);
+
+  function calcSalary() {
+    var annualSalary = parseFloat(annualSalaryInput.value);
+    var monthlySalary = parseFloat(monthlySalaryInput.value);
+    var weeklySalary = parseFloat(weeklySalaryInput.value);
+    var dailySalary = parseFloat(dailySalaryInput.value);
+    var hourlySalary = parseFloat(hourlySalaryInput.value);
+    var workingHour = parseFloat(workingHourInput.value);
+    var workingDays = parseFloat(workingDaysInput.value);
+    if (workingHour > 24) {
+      alert("Please enter valid number of hours in a day(1-24hr)");
+      workingHourInput.value = "";
+      return;
+    }
+    if (workingDays > 7) {
+      alert("Please enter valid number of days in a week(1-7)");
+      workingDaysInput.value = "";
+      return;
+    }
+
+    var triggeredInput = document.activeElement.id;
+
+    if (triggeredInput === "annualSalary") {
+      hourlySalary = annualSalary / (workingHour * 52 * workingDays);
+      monthlySalary = hourlySalary * workingHour * workingDays * 4.33;
+      weeklySalary = hourlySalary * workingHour * workingDays;
+      dailySalary = hourlySalary * workingHour;
+    } else if (triggeredInput === "monthlySalary") {
+      hourlySalary = monthlySalary / (workingHour * workingDays * 4.33);
+      annualSalary = hourlySalary * workingHour * 52 * workingDays;
+      weeklySalary = hourlySalary * workingHour * workingDays;
+      dailySalary = hourlySalary * workingHour;
+    } else if (triggeredInput === "weeklySalary") {
+      annualSalary = weeklySalary * 52;
+      monthlySalary = annualSalary / 12;
+      dailySalary = weeklySalary / workingDays;
+      hourlySalary = dailySalary / workingHour;
+    } else if (triggeredInput === "dailySalary") {
+      annualSalary = dailySalary * 365;
+      monthlySalary = annualSalary / 12;
+      weeklySalary = annualSalary / 52;
+      hourlySalary = dailySalary / workingHour;
+    } else if (triggeredInput === "hourlySalary") {
+      annualSalary = hourlySalary * workingHour * 52 * workingDays;
+      monthlySalary = annualSalary / 12;
+      weeklySalary = annualSalary / 52;
+      dailySalary = hourlySalary * workingHour;
+    }
+
+    document.getElementById("annualSalary").value = annualSalary.toFixed();
+    document.getElementById("monthlySalary").value = monthlySalary.toFixed();
+    document.getElementById("weeklySalary").value = weeklySalary.toFixed();
+    document.getElementById("dailySalary").value = dailySalary.toFixed();
+    document.getElementById("hourlySalary").value = hourlySalary.toFixed();
+  }
+
+  calcSalary();
+});
diff --git a/Calculators/Salary-To-Hourly-Calculator/style.css b/Calculators/Salary-To-Hourly-Calculator/style.css
@@ -0,0 +1,127 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: linear-gradient(200deg, #b7a4a4, #1a354a);
+  background-size: cover;
+  background-attachment: fixed;
+}
+
+.container {
+  display: flex;
+  width: 80%;
+  height: 600px;
+  padding: 20px;
+  border-radius: 30px;
+  background-color: rgba(255, 255, 255, 0.382);
+  box-shadow: 5px 5px 20px rgba(25, 0, 255, 0.2);
+}
+
+.description {
+  text-align: center;
+  margin-top: 18%;
+  width: 70vw;
+}
+.description h1 {
+  font-weight: bolder;
+  font-size: 45px;
+  margin-left: 10px;
+  text-align: center;
+  color: rgb(220, 238, 238);
+}
+.description p {
+  font-size: 20px;
+  padding: 15px;
+  color: rgb(253, 253, 253);
+}
+.calculate__box {
+  background: #95c7dc38;
+  border-radius: 20px;
+  width: 70%;
+  font-size: 20px;
+  padding: 10px;
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+}
+
+.calculate__box label {
+  margin: 5px;
+}
+
+.calculate__box input {
+  width: 100%;
+  padding: 10px;
+  font-size: 20px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  border: 0;
+  outline: 0;
+  background: rgb(236, 241, 241);
+}
+@media screen and (max-width: 1000px) {
+  body {
+    background-size: cover;
+  }
+  .container {
+    display: grid;
+    width: 90%;
+    height: fit-content;
+    margin-top: 20px;
+    padding: 10px;
+  }
+  .description h1 {
+    font-size: 30px;
+  }
+  .description p {
+    font-size: 13px;
+  }
+  .calculate__box {
+    width: 100%;
+    margin-top: 5px;
+    font-size: 15px;
+  }
+  .calculate__box input {
+    font-size: 15px;
+  }
+}
+@media screen and (max-height: 400px) {
+  body {
+    height: fit-content;
+  }
+  .container {
+    width: 90%;
+    height: fit-content;
+    margin-top: 20px;
+    padding: 10px;
+  }
+  .description h1 {
+    font-size: 30px;
+  }
+  .description p {
+    font-size: 13px;
+  }
+  .calculate__box {
+    width: 80%;
+    margin-top: 5px;
+    font-size: 15px;
+  }
+  .calculate__box input {
+    font-size: 15px;
+  }
+}
+@media screen and (max-width: 600px) {
+  .description {
+    position: relative;
+    margin-left: 20px;
+  }
+}
diff --git a/index.html b/index.html
@@ -1951,6 +1951,20 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
                     </a>
                 </div>
             </div>
+        </div>
+            <div class="box">
+                <div class="content">
+                    <h2>Salary to Hourly Calculator</h2>
+                    <h3>Calculates Salary across across various timeframes simultaneously</h3>
+                    <div class="card-footer">
+                        <a href="./Calculators/Salary-To-Hourly-Calculator/Index.html" target="_blank">
+                            <button>Try Now</button>
+                        </a>
+                        <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Salary-To-Hourly-Calculator" title="Source Code" target="_blank">
+                            <img src="./assets/images/github.png" alt="Source Code"></img>
+                        </a>
+                    </div>
+                </div>
         </div>        
     </div>