Welcome! In this lesson, we will explore the practical applications of string operations and type conversions in JavaScript. These concepts are crucial and are used in many programming areas. We'll examine a real-world example: time parsing. Have you ever wondered how to add a certain number of seconds to a specific time? By the end of today's session, you'll be equipped to calculate this using JavaScript. Let's get started!

Imagine this: You receive a time formatted as a string in HH:MM:SS, where HH, MM, and SS denote the hour, minute, and second, respectively. You are also given an integer representing a certain number of seconds. Your task is to calculate the new time after adding the provided seconds, then output the result in the HH:MM:SS format.

For example, if the input time is 05:10:30 and the number of seconds to add is 123, the output should be 05:12:33 since 123 seconds translate to 2 minutes and 3 seconds.

Please note these points when resolving this task:

• The input time is always a valid time string in the HH:MM:SS format, with HH ranging from 00 to 23 and MM and SS ranging from 00 to 59.
• The output should be a time in the same format.

Now let's go ahead and break down how to achieve this in our step-by-step solution guide.

Our first step involves parsing the input time string. We aim to extract the hours, minutes, and seconds from this string as integer values for further calculations. In JavaScript, we can use the split method to divide the string at ":" and convert each substring into an integer:

JavaScript
Copy to clipboard
1let time = "12:34:56";
2let secondsToAdd = 10;
3let timeParts = time.split(":");
4let hours = parseInt(timeParts[0]);
5let minutes = parseInt(timeParts[1]);
6let seconds = parseInt(timeParts[2]);

By executing this operation, we've successfully parsed the time string and converted the hours, minutes, and seconds into integers.

Now that we have the hours, minutes, and seconds in integer format, we can efficiently calculate the total number of seconds that have elapsed since the start of the day:

JavaScript
Copy to clipboard
1let secondsSinceStart = hours * 3600 + minutes * 60 + seconds;

At this point, your function should compute the cumulative number of seconds from the start of the day.

Now we need to add the integer representing the number of seconds to our computed secondsSinceStart and also consider cases where the added seconds roll over into the next day:

JavaScript
Copy to clipboard
1let totalSeconds = (secondsSinceStart + secondsToAdd) % (24 * 3600);

The modulus operator % ensures that our totalSeconds value doesn't exceed the total number of seconds in a day (86400 seconds or 24 * 3600 seconds).

In this step, we reverse the previous operation. We're given an integer number of seconds, and we have to convert this into a time string in the HH:MM:SS format.

We will use the division / and modulo % operations directly to convert these values:

• First, we calculate the number of hours in the total seconds: let newHours = Math.floor(totalSeconds / 3600);. Here, 3600 is the number of seconds in an hour.
• Next, we update the totalSeconds to the remainder after extracting the hours: totalSeconds %= 3600;. This step ensures that totalSeconds now holds the seconds remaining after accounting for hours.

Now, we repeat this process for minutes:

• We calculate the number of minutes in the updated totalSeconds: let newMinutes = Math.floor(totalSeconds / 60);. Here, 60 is the number of seconds in a minute.
• Following a similar pattern, update the totalSeconds to the remainder after extracting minutes: totalSeconds %= 60;. This step ensures that totalSeconds contains only the seconds remaining after accounting for both hours and minutes.

Finally:

• The remaining totalSeconds directly gives us the seconds: let newSeconds = totalSeconds;.

So the complete code for this step is:

JavaScript
Copy to clipboard
1let newHours = Math.floor(totalSeconds / 3600);
2totalSeconds %= 3600;
3let newMinutes = Math.floor(totalSeconds / 60);
4let newSeconds = totalSeconds % 60;

The final step is to assemble these values into our HH:MM:SS format string. JavaScript allows us to use template literals for formatting:

JavaScript
Copy to clipboard
1let result = `${String(newHours).padStart(2, '0')}:${String(newMinutes).padStart(2, '0')}:${String(newSeconds).padStart(2, '0')}`;

Here, padStart(2, '0') ensures that each time unit (hours, minutes, and seconds) will be at least 2 characters wide, padding with 0 if necessary.

Let's collate all the individual steps and formulate the final function:

JavaScript
Copy to clipboard
1function addSeconds(time, secondsToAdd) {
2    let timeParts = time.split(":");
3    let hours = parseInt(timeParts[0]);
4    let minutes = parseInt(timeParts[1]);
5    let seconds = parseInt(timeParts[2]);
6
7    let secondsSinceStart = hours * 3600 + minutes * 60 + seconds;
8    let totalSeconds = (secondsSinceStart + secondsToAdd) % (24 * 3600);
9
10    let newHours = Math.floor(totalSeconds / 3600);
11    totalSeconds %= 3600;
12    let newMinutes = Math.floor(totalSeconds / 60);
13    let newSeconds = totalSeconds % 60;
14
15    return `${String(newHours).padStart(2, '0')}:${String(newMinutes).padStart(2, '0')}:${String(newSeconds).padStart(2, '0')}`;
16}
17
18// Call the function
19console.log(addSeconds("05:10:30", 123));
20// Output: 05:12:33

And voila! You've crafted a function that accurately calculates the new time based on the provided time and the number of seconds that have elapsed since then.

Congratulations! You skillfully learned how to parse a time string and utilize type conversions to calculate the number of seconds elapsed from the beginning of the day. Following this, you learned how to perform the reverse operation: to calculate the time based on the number of seconds that have passed since the beginning of the day. In this lesson, we practiced essential JavaScript skills, including string operations and fundamental integer operations. Continue practicing with similar problems to reinforce your learning, and these tasks will soon become second nature. See you in our next session, and happy coding!