Simple JavaScript Function To Convert Seconds to Hours and Minutes

When working on an application with a timer, converting time can be a headache. Imagine you are given the time in seconds and need to display it in hours:minutes:seconds format. How do you do it?

It is a common problem for developers who deal with time-sensitive applications, and it can be frustrating to figure out. In this blog, I will guide you through converting seconds into the hours:minutes:seconds time format, and you'll also get free resources to practice at the end of it.

Don't let time conversion slow you down!

Use cases: Convert Seconds to Hours and Minutes Function

The conversion of seconds to hours and minutes is a critical function with a wide range of use cases. Here are some examples of situations where this function can come in handy:

• When tracking time for tasks, you can display the time in hours and minutes. You can record time in a more user-friendly format.

• In scheduling applications, it ensures the time is displayed correctly, and the schedule is easily read.

• Clocks and timers must often display time in the hours and minutes format.

• It can also be used in a quiz app or Pomodoro clock.

How to Convert Seconds into Minutes and Hours?

You can convert seconds into minutes and hours in just some simple steps. I have divided the process into four steps so you can understand it with ease. Also, you can implement what you think you need. So let’s get started.

Step 01: Create Base Function:

First, we are going to write the base structure of the function convertSeconds. It will take seconds as a number parameter and will return a string.

const convertSeconds = (seconds: number): string => {
  return ''
}

Step 02: Calculate Minutes and Hours

Once you have created the base function, you will need to convert seconds into minutes and hours. Here’s how can you do it:

1. Javascript Change Seconds to Hours

As you know one hour is equal to 3600 seconds, so divide the total seconds by 3600 to get the number of hours. It’ll sometimes have the result in decimal, but we need it in whole numbers. So, we’ll use Math.floor to round down the value.

const hours = Math.floor(seconds / 3600)

2. Javascript Change Seconds to Minutes

After calculating the exact hours, now we will convert the remaining seconds into minutes. For this, we’ll use the reminder technique. Here we’ll first get the reminder of hours.

const minutes = Math.floor((seconds % 3600) / 60)

seconds % 3600 will return the remaining seconds that are less than one hour. Now, divide it by 60 as one minute has 60 seconds.

const convertSeconds = (seconds: number): string => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)

  return `${hours} hours : ${minutes} minutes`
}

const result = convertSeconds(3800)

console.log(result) // 1 hours : 3 minutes

Step 03: Handling the Conditions

What if seconds are less than an hour? In this case, I will prefer to show only minutes like 36 minutes not 0 hours: 36 minutes.

const convertSeconds = (seconds: number): string => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)

  if (hours > 0) {
    return `${hours} hours : ${minutes} minutes`
  } else {
    return `${minutes} minutes`
  }
}

const result = convertSeconds(2200)

console.log(result) // 36 minutes
convertSeconds(3800) // 1 hours : 3 minutes

In the above condition, you have seen the result is 1 hour. You can notice here that hours are shown with ‘s.’ We have to set this too. If hour is greater than 1 will return hours (with s) otherwise hour, same goes for seconds.

const convertSeconds = (seconds: number): string => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)

  if (hours > 0) {
    return `${hours} hour${hours > 1 ? 's' : ''} : ${minutes} minute${minutes > 1 ? 's' : ''}`
  } else {
    return `${minutes} minute${minutes > 1 ? 's' : ''}`
  }
}

const result1 = convertSeconds(2200) // 36 minutes
const result2 = convertSeconds(3950) // 1 hour : 5 minutes
const result3 = convertSeconds(9004) // 2 hours : 30 minutes
const result4 = convertSeconds(61) // 1 minute
const result5 = convertSeconds(3601) // 1 hour : 0 minute

Till now we have converted seconds into hours and minutes but it is not displaying the remaining seconds. For example, 3950 seconds can be converted to 1 hour : 5 minutes : 50 seconds, but our result is not displaying seconds. To show the remaining seconds, we have to refactor and format the code to avoid many if-else statements.

const convertSeconds = (seconds: number): string => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const remainingSeconds = seconds % 60

  const hourString = hours > 0 ? `${hours} hour${hours > 1 ? 's' : ''}` : ''
  const minuteString = minutes > 0 ? `${minutes} minute${minutes > 1 ? 's' : ''}` : ''
  const secondString =
    remainingSeconds > 0 ? `${remainingSeconds} second${remainingSeconds > 1 ? 's' : ''}` : ''

  return `${hourString} : ${minuteString} : ${secondString}`
}

const result1 = convertSeconds(2200) //  : 36 minutes : 40 seconds
const result2 = convertSeconds(3950) // 1 hour : 5 minutes : 50 seconds
const result3 = convertSeconds(9004) // 2 hours : 30 minutes : 4 seconds
const result4 = convertSeconds(61) //  : 1 minute : 1 second
const result5 = convertSeconds(3601) // 1 hour :  : 1 second

Step 04: Dealing with Edge Cases and Conditions

Finally, we are at the last step of our time conversion function. The above result shows space or empty if hours, minute, or seconds is 0 or missing, and display like : 36 minutes : 40 seconds. We need to fix this too.

const convertSeconds = (seconds: number): string => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const remainingSeconds = seconds % 60

  const hourString = hours > 0 ? `${hours} hour${hours > 1 ? 's' : ''}` : ''
  const minuteString = minutes > 0 ? `${minutes} minute${minutes > 1 ? 's' : ''}` : ''
  const secondString =
    remainingSeconds > 0 ? `${remainingSeconds} second${remainingSeconds > 1 ? 's' : ''}` : ''

  if (hours > 0) {
    return `${hourString} : ${minuteString || '0 minute'} ${secondString && `: ${secondString}`}`
  } else if (!hours && minutes > 0) {
    return `${minuteString} ${secondString && `: ${secondString}`}`
  }

  return secondString
}

const result1 = convertSeconds(2200) //  36 minutes : 40 seconds
const result2 = convertSeconds(3600) // 1 hour : 0 minute
const result3 = convertSeconds(9004) // 2 hours : 30 minutes : 4 seconds
const result4 = convertSeconds(61) //  1 minute : 1 second
const result5 = convertSeconds(3601) // 1 hour : 0 minute : 1 second
const result6 = convertSeconds(180) //  3 minutes
const result7 = convertSeconds(50) //  50 seconds

If you want to improve this code or change the time format, go ahead and also let me know what you created.

Apply What You've Learned

It is excellent if you have reached out so far and learned how to convert time using JavaScript. To further enhance your logic, you can implement what you have learned in this article in the following ways:

1. I built a quiz app in ReactJS without a timer in 6 steps to create a quiz app article. You can incorporate timer in the top right corner of the quiz app. It'll make it more functional and classier.

2. In one of the freecodecamp projects, you are challenged to build a Pomodoro Clock, for pomodoro clock you need to deal with a timer, and you can apply the above learning to it.