Answer to Question #257054 in HTML/JavaScript Web Application for prime

Question #257054

Time Converter

Refer to the below image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/time-converter-output.gif

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

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.

Resources

Use this Background image:

https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png

Expert's answer

<!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>TIME CONVERTER</title>
 <style>
 body {
 color: #f5f7fa;
 font-family: sans-serif;
 }
 
 h1 {
 color: #f5f7fa;
 }
</style>
</head>
<body>
 <style>
 
 body {
 background-image: url('https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png');
 }
 </style>
 <h1>TIME CONVERTER</h1>
 <p>Enter Hours and Minutes values to convert into seconds</p>
 <br>
 
 <label for="hoursInput">Hours*</label>
 <div>
 <input type="number" name="hours" id="hoursInput"> 
 </div>


 <br>


 <label for="minutesInput">Minutes*</label>
 <div>
 <input type="number" name="min" id="minutesInput">
 </div>


 <br>


 <button type="submit" id="convertBtn" onclick="convertToSeconds(hoursInput,minutesInput)">Convert to Seconds</button><p>


 <center>
 <p id="convertBtn"></p>
 </center>


 <script>
 function convertToSeconds(hours, minutes){
 var hours = document.getElementById("hoursInput").value;
 var minutes = +document.getElementById("minutesInput").value;
 var totalsec;
 totalsec = ((hours) * 60 + minutes) * 60
 document.getElementById("convertBtn").innerHTML = totalsec + " seconds"
}
</script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #257054 in HTML/JavaScript Web Application for prime

Resources

Comments

Leave a comment

Related Questions