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.
1const convertSeconds = (seconds: number): string => {
2 return ''
3}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.
1const 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.
1const 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.
1const convertSeconds = (seconds: number): string => {
2 const hours = Math.floor(seconds / 3600)
3 const minutes = Math.floor((seconds % 3600) / 60)
4
5 return `${hours} hours : ${minutes} minutes`
6}
7
8const result = convertSeconds(3800)
9
10console.log(result) // 1 hours : 3 minutesStep 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.
1const convertSeconds = (seconds: number): string => {
2 const hours = Math.floor(seconds / 3600)
3 const minutes = Math.floor((seconds % 3600) / 60)
4
5 if (hours > 0) {
6 return `${hours} hours : ${minutes} minutes`
7 } else {
8 return `${minutes} minutes`
9 }
10}
11
12const result = convertSeconds(2200)
13
14console.log(result) // 36 minutes
15convertSeconds(3800) // 1 hours : 3 minutesIn 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.
1const convertSeconds = (seconds: number): string => {
2 const hours = Math.floor(seconds / 3600)
3 const minutes = Math.floor((seconds % 3600) / 60)
4
5 if (hours > 0) {
6 return `${hours} hour${hours > 1 ? 's' : ''} : ${minutes} minute${minutes > 1 ? 's' : ''}`
7 } else {
8 return `${minutes} minute${minutes > 1 ? 's' : ''}`
9 }
10}
11
12const result1 = convertSeconds(2200) // 36 minutes
13const result2 = convertSeconds(3950) // 1 hour : 5 minutes
14const result3 = convertSeconds(9004) // 2 hours : 30 minutes
15const result4 = convertSeconds(61) // 1 minute
16const result5 = convertSeconds(3601) // 1 hour : 0 minuteTill 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.
1const convertSeconds = (seconds: number): string => {
2 const hours = Math.floor(seconds / 3600)
3 const minutes = Math.floor((seconds % 3600) / 60)
4 const remainingSeconds = seconds % 60
5
6 const hourString = hours > 0 ? `${hours} hour${hours > 1 ? 's' : ''}` : ''
7 const minuteString = minutes > 0 ? `${minutes} minute${minutes > 1 ? 's' : ''}` : ''
8 const secondString =
9 remainingSeconds > 0 ? `${remainingSeconds} second${remainingSeconds > 1 ? 's' : ''}` : ''
10
11 return `${hourString} : ${minuteString} : ${secondString}`
12}
13
14const result1 = convertSeconds(2200) // : 36 minutes : 40 seconds
15const result2 = convertSeconds(3950) // 1 hour : 5 minutes : 50 seconds
16const result3 = convertSeconds(9004) // 2 hours : 30 minutes : 4 seconds
17const result4 = convertSeconds(61) // : 1 minute : 1 second
18const result5 = convertSeconds(3601) // 1 hour : : 1 secondStep 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.
1const convertSeconds = (seconds: number): string => {
2 const hours = Math.floor(seconds / 3600)
3 const minutes = Math.floor((seconds % 3600) / 60)
4 const remainingSeconds = seconds % 60
5
6 const hourString = hours > 0 ? `${hours} hour${hours > 1 ? 's' : ''}` : ''
7 const minuteString = minutes > 0 ? `${minutes} minute${minutes > 1 ? 's' : ''}` : ''
8 const secondString =
9 remainingSeconds > 0 ? `${remainingSeconds} second${remainingSeconds > 1 ? 's' : ''}` : ''
10
11 if (hours > 0) {
12 return `${hourString} : ${minuteString || '0 minute'} ${secondString && `: ${secondString}`}`
13 } else if (!hours && minutes > 0) {
14 return `${minuteString} ${secondString && `: ${secondString}`}`
15 }
16
17 return secondString
18}
19
20const result1 = convertSeconds(2200) // 36 minutes : 40 seconds
21const result2 = convertSeconds(3600) // 1 hour : 0 minute
22const result3 = convertSeconds(9004) // 2 hours : 30 minutes : 4 seconds
23const result4 = convertSeconds(61) // 1 minute : 1 second
24const result5 = convertSeconds(3601) // 1 hour : 0 minute : 1 second
25const result6 = convertSeconds(180) // 3 minutes
26const result7 = convertSeconds(50) // 50 secondsIf 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:
- 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.
- 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.
Written by
Abdul Basit
Frontend developer passionate about JavaScript, React, and building great web experiences. Writing about web development to help developers level up their skills.
Continue reading