Web Dev Project
Create an OT Calculation Website – Step‑by‑Step Guide
Build a responsive overtime pay calculator with HTML, CSS, and JavaScript. Perfect for HR portals, freelancers, or anyone who wants to learn web development while making a useful tool.
Table of Contents
Step 1
Understand the Overtime Calculation Formula
Most companies pay 1.5 times the regular hourly rate for overtime hours (above 40 hours per week). The basic formula is:
OT Formula
Regular Pay = Regular Hours × Hourly Rate Overtime Pay = Overtime Hours × Hourly Rate × 1.5 Total Pay = Regular Pay + Overtime Pay
Our calculator will take three inputs from the user: regular hours, overtime hours, and hourly rate. It will then compute the total earnings and display the breakdown.
Customize the multiplier
You can easily change 1.5 to any value (e.g., 2 for double time) in the JavaScript code.
Step 2
Build the HTML Foundation
Create an index.html file with a clean layout. Use a centered container, input fields for hours and rate, and a results display area.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OT Pay Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<h1>⏱️ Overtime Pay Calculator</h1>
<div class="input-group">
<label>Regular Hours</label>
<input type="number" id="regularHours" placeholder="0" step="0.1">
</div>
<div class="input-group">
<label>Overtime Hours</label>
<input type="number" id="otHours" placeholder="0" step="0.1">
</div>
<div class="input-group">
<label>Hourly Rate ($)</label>
<input type="number" id="rate" placeholder="0.00" step="0.01">
</div>
<button id="calculateBtn">Calculate Pay</button>
<div class="results" id="results">
<h3>Results</h3>
<div id="breakdown"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
The HTML creates a simple form. The input fields allow decimal values, and the results will be displayed dynamically.
Step 3
Make It Look Professional with CSS
Create a style.css file for a modern, responsive design. We'll use a soft color palette, rounded corners, and subtle shadows.
style.css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.calculator {
background: white;
padding: 30px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
max-width: 400px;
width: 90%;
}
h1 {
text-align: center;
color: #1f2937;
margin-bottom: 25px;
font-size: 1.8rem;
}
.input-group {
margin-bottom: 18px;
}
label {
display: block;
font-weight: 600;
margin-bottom: 6px;
color: #4b5563;
}
input[type="number"] {
width: 100%;
padding: 12px;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.2s;
}
input[type="number"]:focus {
border-color: #f59e0b;
outline: none;
}
button {
width: 100%;
padding: 14px;
background: #f59e0b;
color: white;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
margin-top: 10px;
}
button:hover {
background: #d97706;
}
button:active {
transform: scale(0.97);
}
.results {
margin-top: 25px;
background: #fffbeb;
border: 1px solid #fcd34d;
padding: 20px;
border-radius: 12px;
display: none; /* hidden until calculation */
}
.results.active {
display: block;
}
#breakdown p {
margin: 8px 0;
font-size: 1rem;
display: flex;
justify-content: space-between;
}
.total {
font-weight: 700;
font-size: 1.2rem;
border-top: 2px solid #fcd34d;
padding-top: 10px;
margin-top: 10px;
}
This CSS makes the calculator visually appealing and fully responsive on mobile devices.
Step 4
Add Overtime Calculation with JavaScript
Now, create script.js to bring the calculator to life. It reads the inputs, performs the math, and displays the result.
script.js
const calcBtn = document.getElementById('calculateBtn');
const resultsDiv = document.getElementById('results');
const breakdownDiv = document.getElementById('breakdown');
calcBtn.addEventListener('click', () => {
const regularHours = parseFloat(document.getElementById('regularHours').value) || 0;
const otHours = parseFloat(document.getElementById('otHours').value) || 0;
const rate = parseFloat(document.getElementById('rate').value) || 0;
const regularPay = regularHours * rate;
const otPay = otHours * rate * 1.5; // 1.5x overtime multiplier
const totalPay = regularPay + otPay;
breakdownDiv.innerHTML = `
<p><span>Regular Pay:</span> <span>$${regularPay.toFixed(2)}</span></p>
<p><span>Overtime Pay (x1.5):</span> <span>$${otPay.toFixed(2)}</span></p>
<p class="total"><span>Total Pay:</span> <span>$${totalPay.toFixed(2)}</span></p>
`;
resultsDiv.classList.add('active');
});
The JavaScript uses simple arithmetic and updates the DOM. You can change the multiplier 1.5 to any value you need.
Pro Tip
Add validation: show an alert if the user enters negative numbers or leaves fields empty. You can also add a "Reset" button.
Step 5
Complete Source Code (HTML + CSS + JS in One File)
If you prefer a single HTML file, here's the entire code combined. Copy it into an .html file and open it in your browser.
ot-calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OT Pay Calculator</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f3f4f6; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.calculator { background: white; padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); max-width: 400px; width: 90%; }
h1 { text-align: center; color: #1f2937; margin-bottom: 25px; font-size: 1.8rem; }
.input-group { margin-bottom: 18px; }
label { display: block; font-weight: 600; margin-bottom: 6px; color: #4b5563; }
input[type="number"] { width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 1rem; transition: border-color 0.2s; }
input[type="number"]:focus { border-color: #f59e0b; outline: none; }
button { width: 100%; padding: 14px; background: #f59e0b; color: white; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-top: 10px; }
button:hover { background: #d97706; }
button:active { transform: scale(0.97); }
.results { margin-top: 25px; background: #fffbeb; border: 1px solid #fcd34d; padding: 20px; border-radius: 12px; display: none; }
.results.active { display: block; }
#breakdown p { margin: 8px 0; font-size: 1rem; display: flex; justify-content: space-between; }
.total { font-weight: 700; font-size: 1.2rem; border-top: 2px solid #fcd34d; padding-top: 10px; margin-top: 10px; }
</style>
</head>
<body>
<div class="calculator">
<h1>⏱️ Overtime Pay Calculator</h1>
<div class="input-group">
<label>Regular Hours</label>
<input type="number" id="regularHours" placeholder="0" step="0.1">
</div>
<div class="input-group">
<label>Overtime Hours</label>
<input type="number" id="otHours" placeholder="0" step="0.1">
</div>
<div class="input-group">
<label>Hourly Rate ($)</label>
<input type="number" id="rate" placeholder="0.00" step="0.01">
</div>
<button id="calculateBtn">Calculate Pay</button>
<div class="results" id="results">
<h3>Results</h3>
<div id="breakdown"></div>
</div>
</div>
<script>
const calcBtn = document.getElementById('calculateBtn');
const resultsDiv = document.getElementById('results');
const breakdownDiv = document.getElementById('breakdown');
calcBtn.addEventListener('click', () => {
const regularHours = parseFloat(document.getElementById('regularHours').value) || 0;
const otHours = parseFloat(document.getElementById('otHours').value) || 0;
const rate = parseFloat(document.getElementById('rate').value) || 0;
const regularPay = regularHours * rate;
const otPay = otHours * rate * 1.5;
const totalPay = regularPay + otPay;
breakdownDiv.innerHTML = `
<p><span>Regular Pay:</span> <span>$${regularPay.toFixed(2)}</span></p>
<p><span>Overtime Pay (x1.5):</span> <span>$${otPay.toFixed(2)}</span></p>
<p class="total"><span>Total Pay:</span> <span>$${totalPay.toFixed(2)}</span></p>
`;
resultsDiv.classList.add('active');
});
</script>
</body>
</html>
Save this file and open it in any browser. Your OT calculator is ready to use!
Step 6
Deploy & Share Your OT Calculator
Put your calculator online for free:
- GitHub Pages: Push the HTML file to a repo and enable Pages. Your site will be live at
username.github.io/repo. - Netlify Drop: Drag and drop your file onto netlify.com/drop.
- Vercel: Similar to Netlify, perfect for static sites.
Share the link with employees, friends, or on social media. You can even embed it on a company intranet.
Checklist
Launch Checklist
- HTML file created with all input fields
- CSS styling applied (responsive design)
- JavaScript calculation logic tested
- Edge cases handled (zero, negative numbers)
- Deployed to a public URL
- Tested on mobile and desktop
Key Takeaways
Simple OT formula: hours × rate × 1.5
Semantic HTML for structure
Modern CSS for a professional look
JavaScript handles calculation & DOM
Deploy free on GitHub Pages
Fully responsive on all devices
⏱️ Start Building Your OT Calculator Now
Copy the code, customize the colors, and launch a useful tool in minutes. It's a perfect project to practice your web development skills.
Join the tech debate...
We love a good discussion, but please keep it respectful and relevant to the topic. Vulgarity, personal attacks, and spam will be removed. Let’s keep the community smart, helpful, and welcoming to all tech fans!