HTML code of Time Duration Calculator

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>

Leave a Comment

Exit mobile version