Best Salary Calculator-Get A free code and script

Salary Calculator >

This is a live demo and preview. Get this Salary Calculator for free for your own websites and blogs
Salary Calculator

This is Code and demo of Salary Calculator. Copy this code and paste it into your own website and blog posts.

<center>
<!DOCTYPE html>
<html>
<head>
	<title>Salary Calculator</title>
	<style>
		body {
			font-family: Arial, Helvetica, sans-serif;
			background-color: #f2f2f2;
		}
		h1 {
			text-align: center;
			margin-top: 0px;
			margin-bottom: 0px;
			color: #444444;
		}
		form {
			margin: 0 auto;
			max-width: 450px;
			padding: 50px;
			box-shadow: 0 2px 20px rgba(0, 0, 0, 1), 0 0 0 3px #006db0;
			border-radius: 0px;
		}
		label {
			font-size: 18px;
			margin-bottom: 10px;
			color: #444444;
		}
		input {
			padding: 10px;
			font-size: 18px;
			border: 1px solid #cccccc;
			border-radius: 0px;
			width: 250px;
			margin-bottom: 20px;
		}
		button {
			padding: 10px 20px;
			font-size: 18px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 0px;
			cursor: pointer;
			margin-top: 20px;
		}
		button:hover {
			background-color: #3e8e41;
		}
		#salary {
			text-align: center;
			font-size: 24px;
			margin-top: 50px;
			color: #444444;
		}
		#salary span {
			font-weight: bold;
			color: #4CAF50;
		}
	</style>
</head>
<body>
	
	<form>
      <h1>Salary Calculator</h1>
      <br>
		<label for="rate">Hourly Rate ($):</label>
		<input id="rate" name="rate" required="" step="0.01" type="number" />
		<br />
		<label for="hours">Hours Worked:</label>
		<input id="hours" name="hours" required="" step="0.01" type="number" />
		<br />
		<label for="interval">Pay Interval:</label>
		<select id="interval" name="interval">
			<option value="hourly">Hourly</option>
			<option value="daily">Daily</option>
			<option value="weekly">Weekly</option>
			<option value="biweekly">Bi-Weekly</option>
			<option value="semimonthly">Semi-Monthly</option>
			<option value="monthly">Monthly</option>
			<option value="quarterly">Quarterly</option>
			<option value="yearly">Yearly</option>
		</select>
		<br />
		<button onclick="calculateSalary()" type="button">Calculate Salary</button>
		<button onclick="resetForm()" type="button">Reset</button>
	</form>
	<div id="salary"></div>
	<script>
		function calculateSalary() {
			var rate = parseFloat(document.getElementById("rate").value);
			var hours = parseFloat(document.getElementById("hours").value);
			var interval = document.getElementById("interval").value;
			var salary = 0;
			switch(interval) {
				case "hourly":
					salary = rate * hours;
					break;
				case "daily":
					salary = rate * hours * 8; // Assuming 8 working hours per day
					break;
				case "weekly":
					salary = rate * hours * 8 * 5; // Assuming 5 working days per week
					break;
				case "biweekly":
					salary = rate * hours * 8 * 10; // Assuming 10 working days per bi-weekly period
					break;
				case "semimonthly":
					salary = rate * hours * 8 * 10.5; // Assuming 21 working days per semi-monthly period
					break;
				case "monthly":
					salary = rate * hours * 8 * 21; // Assuming 21 working days per month
					break;
				case "quarterly":
					salary = rate * hours * 8 * 63; // Assuming 63 working days per quarter
					break;
				case "yearly":
					salary = rate * hours * 8 * 252; // Assuming 252 working days per year
					break;
				default:
					break;
			}
			var salaryDisplay = document.getElementById("salary");
			salaryDisplay.innerHTML = "Your salary is: <span>$" + salary.toFixed(2) + "</span>";
		}
		
		function resetForm() {
			document.getElementById("rate").value = "";
			document.getElementById("hours").value = "";
			document.getElementById("interval").selectedIndex = 0;
			document.getElementById("salary").innerHTML = "";
		}
	</script>
</body>
</html>

</center>

Code terms

You Can freely use it for personal and users
You Can modify/change the main code
You Can freely add your blogs and websites
Attribution is not required.

If you have any questions about this converter, please feel free to reach out to us via email.

Best Salary Calculator-Get A free code and script

Salary Calculator

Code Editor

Code Editor

Popular

Tags

Navigation