Podcast Episode 8: Count Down
Season 2: One-Liner JavaScript Coding Challenge for Frontend Engineers
One-Liner Buddhist Quote of Week
Pain is certain, but suffering is optional.
— Buddha
If you’re looking for A Complete Frontend Developer Course for Beginners, check out this textbook written by Thon Ly exclusively for Medium:
To help you achieve full mastery, all three web languages (HTML, CSS, and JavaScript) are taught together in parallel within a musical context in order to deepen your understanding of their interrelationships in a fun and memorable way!
← Episode 7: Validate Password Input for a Special Character
Transcript for Podcast Episode 8
ATTN Frontend Ninja Monks: Can you decrement a number inside a HTML document using only one line of JavaScript code? Come sharpen your coding chops in this episode!
To submit your solution for the next Frontend Coding Challenge, simply go to my Scoreboard webapp, or just mention my hashtag #onelinerpodcast in your Twitter or Facebook post. But if it’s more convenient for you, feel free to reply with your solution in the Comments section of YouTube, Medium, Codepen, or Spotify pertaining to this episode.
If you know a great one-liner Frontend Coding Challenge to recommend for my show, please use my link below to record your message. And if you can speak slowly and clearly, I may even feature your voice in my next episode! Again, if it’s more convenient, feel free to respond in the Comments section instead.
Intro
Every Friday, I send out a Frontend Coding Challenge that can be solved with just one line of JavaScript code. Each episode will have problems for both aspiring Junior and Senior developers. And if you’re the first to submit a correct solution using my hashtag, your username will be recorded in my Scoreboard webapp. Moreover, your winning streaks will be awarded and highlighted in my show. The following Friday, I go over the problems, solutions, and explanations. The topics I cover are modern vanilla JavaScript, CSS and HTML to help you master web development, as well as Data Structures and Algorithms to help you practice for technical interviews. If you want to become a Frontend Ninja Monk, come sharpen your coding chops!
Problem
Last week, this one-liner Frontend Challenge was presented:
<span id="countdown">10</span>In the HTML code, there is a span tag with an id attribute of countdown and a text content of the number 10.
Level Easy:
In only one line of JavaScript code, decrement the number in the text content. Your code should work for any default number in the text content.
Level Medium:
In only one line of JavaScript code, decrement the number in the text content every 1 second.
Level Hard:
Finally, in only one line of JavaScript code, decrement the number in the text content every 1 second. However, when the number reaches 0, STOP.
Winners
For level easy, the first person to submit a correct answer was a Twitter user with a handle of panhiatha0 on Wednesday at 12:52 pm PST.
For level medium, the first person to submit a correct answer was also panhiatha0 on Wednesday at 12:53 pm PST.
For level hard, the first person to submit a correct answer was a Facebook user with a handle of 3iitos on Wednesday at 12:26 pm PST.
If you’re listening, you both get a coupon for 90% off of my upcoming Frontend course at Udemy!
Please check out my Scoreboard webapp located at podcast.siliconwat.com for instructions on how to claim your prize.
Great job, panhiatha0 and 3iitos! 👍 Keep up your winning streaks! ❤️
Solution
For level easy, the solution is:
countdown.textContent = parseInt(countdown.textContent) - 1Let’s break this down in the order the JavaScript engine executes:
countdown is the id of the span element. As such, it becomes a global variable that references the span element.
As a DOM element, we can set its text content by calling its textContent property.
The problem wants us to decrement the number in the span tag which is currently 10.
Obviously, we can simply set the new text content to the number 9.
countdown.textContent = 9However, this is not the correct solution because it is a static solution.
What we need is a dynamic solution.
For example, if we go the HTML code and change the number in the span tag to 12.
<span id="countdown">12</span>We would expect to see the number 11.
However, our JavaScript code will still output the number 9.
How can we refactor our JavaScript code so that it correctly decrements no matter what number we enter inside the span tag?
The key insight is to realize that we can get any number that is present inside the span tag by simply calling its textContent property.
This will return whatever is inside the span tag as a string.
Before we can subtract 1 from it, we need to convert that string into a number.
We can do this with the global JavaScript function called parseInt():
parseInt(countdown.textContent)Now as a number, we can finally subtract 1 from it.
In effect, any number that we enter inside the span tag will correctly decrement.
Level Medium:
For level medium, the solution is:
setInterval(() => countdown.textContent = parseInt(countdown.textContent) — 1, 1000)Let’s also break this down in the order JavaScript executes it:
setInterval() is a special type of function called a facade because it doesn’t exist natively in JavaScript. Rather, setInterval() is an API that the browser provides to JavaScript.
For setInterval() to work, it requires two parameters. The first parameter is a function known as the callback. And the second parameter is the delay in milliseconds. When these two inputs are provided, setInterval() will execute the callback function repeatedly with the given delay.
In our case, we want the callback function to be:
() => countdown.textContent = parseInt(countdown.textContent) - 1Which is the code from level easy expressed as an arrow function. This way, it can be executed repeatedly.
And the delay we want is:
1000 milliseconds = 1 second1000 milliseconds which is equal to 1 second.
We can reuse the code from level easy because when it is executed, it decrements whatever number is currently inside the span tag.
By passing this code as a function to setInterval(), it will be executed at every 1 second.
In effect, the number in the span tag will count down every 1 second.
Level Hard:
Finally, for level hard, the solution is:
const intervalID = setInterval(() => countdown.textContent = countdown.textContent === “0” ? clearInterval(intervalID) : parseInt(countdown.textContent) — 1, 1000)Let’s also break this down in the order JavaScript executes it:
When we call the setInterval() function, it returns a special number. This number is the ID associated with this particular setInterval() function.
Here, we want to save this special ID. And we do this by assigning it to a const variable called intervalID.
Why do we want to save this special ID?
The problem tells us to stop the countdown when the number reaches 0.
Having this special ID, we can easily stop the setInterval() function from executing simply by calling the clearInterval() function and passing it the intervalID variable .
clearInterval(intervalID)To do all of this in only one line, we can simply refactor the callback function using a ternary operator:
countdown.textContent = countdown.textContent === “0” ? clearInterval(intervalID) : parseInt(countdown.textContent) — 1This code says:
When the number in the span tag is equal to the string 0, execute the clearInterval() function. Otherwise, continue to decrement the number.
In effect, when the number in the span tag reaches 0, the countdown will stop.
At that point, the textContent will be blank because after the clearInterval() function executes, it returns undefined.
Lastly, I just want to mention a caveat to using the setInterval() API:
You should keep in mind that the callback function does not always execute at exactly 1 second as specified.
In the next episode, I will try my best to explain why.
References:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
- https://developer.mozilla.org/en-US/docs/Web/API/setInterval
- https://developer.mozilla.org/en-US/docs/Web/API/clearInterval
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Show Notes
Thanks so much for tuning in! I hope you learned something new today! By the way, in the show notes, there are links to my CodePen with all the problems and all the solutions:
As well as a YouTube recording of this episode:
And a transcript on Medium.
Remember to subscribe to my podcast and YouTube channel to be notified the instant I release the next episode!
Next Problem
For this week, your one-liner Frontend Challenge is this:
<span id="countup">0</span>In the HTML code, there is a span tag with an id attribute of countup and a text content with the number 0.
Level Easy:
In only one line of JavaScript code, increment the number in the text content. Your code should work for any default number in the text content.
Level Medium:
In only one line of JavaScript code, increment the number in the text content every 1 second.
Level Hard:
Finally, in only one line of JavaScript code, increment the number in the text content every 1 second. However, when the number reaches 10, STOP.
Outro
To submit your answer to this challenge, simply include the hashtag #onelinerpodcast in your Twitter or Facebook post. Or, you can go to my Scoreboard webapp located at podcast.siliconwat.com.
If you’re the first person to submit a correct solution, I will give you a coupon for 90% off of my upcoming Frontend Course at Udemy.
Again, don’t forget to subscribe to my podcast and YouTube channel to be notified the instant I release the next problem.
Lastly, if you can think of a great one-liner Frontend Challenge to recommend for this show, please call in and leave a voice message! Thanks so much!
For more coding exercises, check out:
When you use my referral link above 👆 to become a Medium member, all proceeds will be donated towards the construction of the Silicon Wat Campus for children in Ukraine and Cambodia ❤️
