Answer to Question #169990 in Python for hemanth

Question

Answer to Question #169990 in Python for hemanth

Answers>

Programming & Computer Science>

Python

Question #169990

Time Converter

In this assignment, let's build a Time Converter by applying the concepts we learned till now.

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

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.

Resources

Use this Background image:

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

CSS Colors used:

Text colors Hex code values used:

#f5f7fa

#000000

#ffffff

CSS Font families used:

Open Sans

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: Python

Comments

No comments. Be the first!

Answer to Question #169990 in Python for hemanth

Resources

Comments

Leave a comment

Related Questions