|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<center> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Time Calculator</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
} |
|
input, button { |
|
padding: 5px; |
|
} |
|
.new-time { |
|
font-size: 24px; |
|
background-color: yellow; |
|
padding: 10px; |
|
display: inline-block; |
|
margin-top: 10px; |
|
} |
|
.title { |
|
background-color: lightgreen; |
|
display: inline-block; |
|
padding: 5px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<h1 class="title">Time Calculator</h1> |
|
<p>Enter the initial time and the number of minutes to add:</p> |
|
|
|
<label for="time">Time:</label> |
|
<input type="time" id="time" value="03:45"> |
|
<label for="am_pm">AM/PM:</label> |
|
<select id="am_pm"> |
|
<option value="am">AM</option> |
|
<option value="pm">PM</option> |
|
</select> |
|
<br> |
|
<label for="minutes">Minutes to add:</label> |
|
<input type="number" id="minutes" value="20"> |
|
<br> |
|
<button onclick="calculateNewTime()">Calculate New Time</button> |
|
|
|
<p id="result"></p> |
|
|
|
<script> |
|
function calculateNewTime() { |
|
const timeInput = document.getElementById("time").value; |
|
const amPm = document.getElementById("am_pm").value; |
|
const minutesToAdd = parseInt(document.getElementById("minutes").value); |
|
|
|
let [hours, minutes] = timeInput.split(":").map(Number); |
|
|
|
|
|
if (amPm === "pm" && hours !== 12) { |
|
hours += 12; |
|
} else if (amPm === "am" && hours === 12) { |
|
hours = 0; |
|
} |
|
|
|
|
|
minutes += minutesToAdd; |
|
|
|
|
|
if (minutes >= 60) { |
|
hours += Math.floor(minutes / 60); |
|
minutes = minutes % 60; |
|
} |
|
|
|
|
|
if (hours >= 24) { |
|
hours = hours % 24; |
|
} |
|
|
|
|
|
let newAmPm = "AM"; |
|
if (hours >= 12) { |
|
newAmPm = "PM"; |
|
if (hours > 12) { |
|
hours -= 12; |
|
} |
|
} else if (hours === 0) { |
|
hours = 12; |
|
} |
|
|
|
const newTime = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")} ${newAmPm}`; |
|
document.getElementById("result").innerHTML = `<span class="new-time">New Time: ${newTime}</span>`; |
|
} |
|
</script> |
|
|
|
</body> |
|
</center> |
|
</html> |
|
|
