Answer in Web Application for Chandra sena reddy #167100
October 24th, 2022
Time Converter:
Instructions:
- The HTML input element for entering the number of hours should have the id hoursInput
- The HTML input element for entering the number of minutes should have the id minutesInput
- Add HTML label elements for HTML input elements with ids hoursInput and minutesInput
- The HTML button element should have the id convertBtn
- The HTML p element to display the converted time in seconds should have the id timeInSeconds
- The HTML p element to display the error message should have the id errorMsg
By following the above instructions, achieve the given functionality.
- When values are entered in HTML input elements with ids hoursInput and minutesInput, the HTML button with id convertBtn is clicked
- The converted time in seconds should be displayed in the HTML p element with id timeInSeconds
- The HTML p element with id errorMsg should be empty
- The HTML p element with id errorMsg should display an error message in the following cases
- When the HTML input element with id hoursInput is empty and convertBtn is clicked
- When the HTML input element with id minutesInput is empty and convertBtn is clicked
- When both the HTML input elements hoursInput and minutesInput are empty and convertBtn is clicked
Quick Tip
- timeInSeconds = ((hours) *60 + minutes) * 60
Note
- The values given for the HTML input elements with ids hoursInput and minutesInput should be positive integers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<label>
<span>Hours:</span>
<input type="text" id="hoursInput">
</label>
<label>
<span>Minutes:</span>
<input type="text" id="minutesInput">
</label>
<button type="button" id="convertBtn">Convert to seconds</button>
<p id="timeInSeconds"></p>
<p id="errorMsg"></p>
</div>
<script>
let btnConvert = document.getElementById('convertBtn');
btnConvert.addEventListener('click', function() {
let hours = +document.getElementById('hoursInput').value;
let minutes = +document.getElementById('minutesInput').value;
let resultBox = document.getElementById('timeInSeconds');
let errorBox = document.getElementById('errorMsg');
errorBox.innerText = '';
resultBox.innerText = '';
if (hours && minutes) {
resultBox.innerText = `Result after convert: ${ Math.floor( (hours * 60 + minutes) * 60 ) } seconds`;
} else {
errorBox.innerText = 'Error! Enter positive integer number values hours or minutes';
}
});
</script>
</body>
</html>
