diff --git a/Calculators/Salary-To-Hourly-Calculator/README.md b/Calculators/Salary-To-Hourly-Calculator/README.md new file mode 100644 index 000000000..a4e682e29 --- /dev/null +++ b/Calculators/Salary-To-Hourly-Calculator/README.md @@ -0,0 +1,21 @@ +#

Salary To Hourly Calculator

+ +## Description :- + +This is a web application that enables users to convert their salary across various timeframes simultaneously. (Annual, Monthly, Weekly, Daily, or Hourly wage) + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## How To Use :- + +- First, add Your Working Hours. +- Second, add your Working Days in a week. +- Then enter your salary in one of the input fields. + +## Screenshots :- + +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/c058fb6b-c503-4ca5-ae4d-5dae8a29db15) diff --git a/Calculators/Salary-To-Hourly-Calculator/index.html b/Calculators/Salary-To-Hourly-Calculator/index.html new file mode 100644 index 000000000..6254835e7 --- /dev/null +++ b/Calculators/Salary-To-Hourly-Calculator/index.html @@ -0,0 +1,45 @@ + + + + + + Salary To Hourly Calculator + + + +
+
+

Salary To Hourly Calculator

+

+ Calculate your salary in annual, monthly,
+ weekly, daily and hourly wages. +

+
+
+ + + + + + + + + + + + + + +
+
+ + + diff --git a/Calculators/Salary-To-Hourly-Calculator/script.js b/Calculators/Salary-To-Hourly-Calculator/script.js new file mode 100644 index 000000000..60d00efd7 --- /dev/null +++ b/Calculators/Salary-To-Hourly-Calculator/script.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 new file mode 100644 index 000000000..aac7f2b04 --- /dev/null +++ b/Calculators/Salary-To-Hourly-Calculator/style.css @@ -0,0 +1,143 @@ +* { + 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 index aab0626e6..d876f3fb5 100644 --- a/index.html +++ b/index.html @@ -1560,6 +1560,20 @@

Converts Rectangular form into Polar form and vice versa.

+
+
+

Salary To Hourly Calculator

+

Calculates salary across across various timeframes simultaneously.

+
+ + + + + Source Code + +
+
+

Short URL Calculator

@@ -1993,4 +2007,4 @@

Calculates the linear density of the yarn from unit system to another.

- \ No newline at end of file +