HTML code of Time Duration Calculator
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Time Duration Calculator</title>
<style>
.container {
max-width: 400px;
margin: 50px auto;
text-align: center;
}
input[type=”time”] {
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
font-size: 20px;
}
</style>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h1>Time Duration Calculator</h1>
<label for=”start-hour”><b>Start Time:</b></label> <br><br/>
<input type=”number” id=”start-hour” min=”1″ max=”12″ placeholder=”Hour”><br><br/>
<input type=”number” id=”start-minute” min=”0″ max=”59″ placeholder=”Minute”><br><br/>
<input type=”number” id=”start-second” min=”0″ max=”59″ placeholder=”Second”><br><br/>
<select id=”start-am-pm”>
<option value=”AM”>AM</option>
<option value=”PM”>PM</option>
</select>
<button onclick=”setNow(‘start’)”>Now</button><br><br/>
<label for=”end-hour”><b>End Time:</b></label><br><br/>
<input type=”number” id=”end-hour” min=”1″ max=”12″ placeholder=”Hour”><br><br/>
<input type=”number” id=”end-minute” min=”0″ max=”59″ placeholder=”Minute”><br><br/>
<input type=”number” id=”end-second” min=”0″ max=”59″ placeholder=”Second”><br><br/>
<select id=”end-am-pm”><br><br/>
<option value=”AM”>AM</option>
<option value=”PM”>PM</option>
</select>
<button onclick=”setNow(‘end’)”>Now</button><br><br/>
<button onclick=”calculateDuration()”>Calculate Duration</button>
<div id=”result”></div>
</div>
<script>function setNow(type) {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var amPm = hours < 12 ? ‘AM’ : ‘PM’;
if (hours > 12) {
hours -= 12;
} else if (hours === 0) {
hours = 12;
}
if (type === ‘start’) {
document.getElementById(‘start-hour’).value = hours;
document.getElementById(‘start-minute’).value = minutes;
document.getElementById(‘start-second’).value = seconds;
document.getElementById(‘start-am-pm’).value = amPm;
} else if (type === ‘end’) {
document.getElementById(‘end-hour’).value = hours;
document.getElementById(‘end-minute’).value = minutes;
document.getElementById(‘end-second’).value = seconds;
document.getElementById(‘end-am-pm’).value = amPm;
}
}
function calculateDuration() {
var startHour = parseInt(document.getElementById(‘start-hour’).value);
var startMinute = parseInt(document.getElementById(‘start-minute’).value);
var startSecond = parseInt(document.getElementById(‘start-second’).value);
var startAmPm = document.getElementById(‘start-am-pm’).value;
var endHour = parseInt(document.getElementById(‘end-hour’).value);
var endMinute = parseInt(document.getElementById(‘end-minute’).value);
var endSecond = parseInt(document.getElementById(‘end-second’).value);
var endAmPm = document.getElementById(‘end-am-pm’).value;
if (startAmPm === ‘PM’ && startHour !== 12) {
startHour += 12;
} else if (startAmPm === ‘AM’ && startHour === 12) {
startHour = 0;
}
if (endAmPm === ‘PM’ && endHour !== 12) {
endHour += 12;
} else if (endAmPm === ‘AM’ && endHour === 12) {
endHour = 0;
}
var startDate = new Date();
startDate.setHours(startHour, startMinute, startSecond);
var endDate = new Date();
endDate.setHours(endHour, endMinute, endSecond);
var duration = endDate.getTime() – startDate.getTime();
var hours = Math.floor(duration / (1000 * 60 * 60));
var minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((duration % (1000 * 60)) / 1000);
document.getElementById(‘result’).innerHTML = ‘Duration: ‘ + hours + ‘ hours ‘ + minutes + ‘ minutes ‘ + seconds + ‘ seconds’;
}</script>
</body>
</html>