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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #256905

Time Converter

Refer to the below image:

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

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.

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>
    <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 = ((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 #256905 in HTML/JavaScript Web Application for prime

Comments

Leave a comment

Related Questions