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

Question #257562

Html,Css & javascript program for Time Converter

Please Refer to this below image.

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

I want an exact output as in this image link with proof and use bootstrap 4.5

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

Note

The values given for the HTML input elements with ids hoursInput and minutesInput should be positive integers.

Expert's answer

<html>
<body>
  <style>
   label {
    color: blue;
    border: 1px solid silver;
   }
   input[type="text"] {
    border: 1px solid white;
   }
   input[type="submit"] {
    background-color: blue;
   }
   </style>
  <h1>Time Converter</h1>
  <p>Enter hours and minutes values to convert into second</p>
  <form>
    <p>
      <label for="hour">Hours*</label>
      <input type="number" id="hour"/>
    </p>
    <p>
      <label for="minute"> Minutes*</label>
      <input type="number" id="minute"/>
    </p>
    <span id="seconds"></span>
    <input type="submit" id="submit" onsubmit="onSubmit()">Convert to Second</input>
  </form>
  <script>
    function onSubmit() {
      let hours = document.querySelector("#hour").value;
      let minutes = document.querySelector("#minutes").value;
      let seconds = document.querySelector("#seconds");
      seconds.innerHTML = 60 * (60 * hours + minutes);
    }
  </script>
</body>
</html>

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

Comments

No comments. Be the first!

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

Comments

Leave a comment

Related Questions