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.
HTML
< head > < script src = </ script > </ head > < body > < h1 style = "color:green;" > neveropen </ 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 |
Output:
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 than 10 then append a zero before the hours.
- check it for minutes also, if the minutes are less than 10 then append a zero before the minutes.
Example: This example implements the above approach.
HTML
< head > < script src = </ script > </ head > < body > < h1 style = "color:green;" > neveropen </ 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 > |
Output: