Convert minutes to hours/minutes with the help of JQuery - GeeksforGeeks

31 Dec, 2019
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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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:
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript