On This Page
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
Become a better JavaScript developer by practicing only 10–20 minutes a week
Every Tuesday, you'll receive:
- A JavaScript problem-solving challenge
- Three conceptual JavaScript MCQs
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 minutesconvertSeconds(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 minutesconst result2 = convertSeconds(3950) // 1 hour : 5 minutesconst result3 = convertSeconds(9004) // 2 hours : 30 minutesconst result4 = convertSeconds(61) // 1 minuteconst 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 % 60const 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 secondsconst result2 = convertSeconds(3950) // 1 hour : 5 minutes : 50 secondsconst result3 = convertSeconds(9004) // 2 hours : 30 minutes : 4 secondsconst result4 = convertSeconds(61) // : 1 minute : 1 secondconst 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 % 60const 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 secondsconst result2 = convertSeconds(3600) // 1 hour : 0 minuteconst result3 = convertSeconds(9004) // 2 hours : 30 minutes : 4 secondsconst result4 = convertSeconds(61) // 1 minute : 1 secondconst result5 = convertSeconds(3601) // 1 hour : 0 minute : 1 secondconst result6 = convertSeconds(180) // 3 minutesconst 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:
- 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.