Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Salary To Hourly Calculator #775

Merged
merged 7 commits into from
May 24, 2024
Merged

Added Salary To Hourly Calculator #775

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3bacafc
Salary-to-hourly
Betelhem-Demsis May 21, 2024
107ca38
Update Index.html
Rakesh9100 May 24, 2024
bffdc61
Update and rename Index.html to index.html
Rakesh9100 May 24, 2024
8aca286
Update and rename index.js to script.js
Rakesh9100 May 24, 2024
0c88e70
Update style.css
Rakesh9100 May 24, 2024
e6e24ca
Update README.md
Rakesh9100 May 24, 2024
b7c4e8f
Update index.html
Rakesh9100 May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions Calculators/Salary-To-Hourly-Calculator/Index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 17 additions & 0 deletions Calculators/Salary-To-Hourly-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
73 changes: 73 additions & 0 deletions Calculators/Salary-To-Hourly-Calculator/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
127 changes: 127 additions & 0 deletions Calculators/Salary-To-Hourly-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down