Convert minutes to hours/minutes with the help of JQuery
The task is to convert the given minutes to Hours/Minutes format with the help of JavaScript. Here, 2 approaches are discussed.
Approach 1:
- Get the input from user.
- Use Math.floor() method to get the floor value of hours from minutes.
- Use % operator to get the minutes.
Example 1: This example implements the above approach.
<!DOCTYPE HTML> <html> <head> <title> Convert minutes to hours/minutes with the help of JQuery. </title> <script src= </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP"> </p> Type Minutes: <input class="mins" /> <br> <br> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN"> </p> <script> var up = document.getElementById('GFG_UP'); var element = document.getElementById("body"); up.innerHTML = "Click on the button to get minutes in Hours/Minutes format."; function GFG_Fun() { // Getting the input from user. var total = $('.mins').val(); // Getting the hours. var hrs = Math.floor(total / 60); // Getting the minutes. var min = total % 60; $('#GFG_DOWN').html(hrs + " Hours and " + min + " Minutes"); } </script> </body> </html> |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Approach 2:
- Get the input from user.
- Use Math.floor() method to get the floor value of hours from minutes.
- Use % operator to get the minutes.
- check if the hours are less then 10 then append a zero before the hours.
- check it for minutes also, if the minutes are less then 10 then append a zero before the minutes.
Example 2: This example implements the above approach.
<!DOCTYPE HTML> <html> <head> <title> Convert minutes to hours/minutes with the help of JQuery. </title> <script src= </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP"> </p> Type Minutes: <input class="mins" /> <br> <br> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN"> </p> <script> var up = document.getElementById('GFG_UP'); var element = document.getElementById("body"); up.innerHTML = "Click on the button to get minutes in Hours/Minutes format."; function conversion(mins) { // getting the hours. let hrs = Math.floor(mins / 60); // getting the minutes. let min = mins % 60; // formatting the hours. hrs = hrs < 10 ? '0' + hrs : hrs; // formatting the minutes. min = min < 10 ? '0' + min : min; // returning them as a string. return `${hrs}:${min}`; } function GFG_Fun() { var total = $('.mins').val(); $('#GFG_DOWN').html(conversion(total)); } </script> </body> </html> |
Output:
-
Before clicking on the button:
-
After clicking on the button:
.png)