Podcast Episode 1: Style a DOM Element
Season 1: One-Liner JavaScript Coding Challenge for Frontend Engineers
One-Liner Buddhist Quote of Week
We are all the leaves of One tree, and all the waves of One sea.
— Thich Nhat Hanh
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!
Transcript for Podcast Episode 1
ATTN Coding Ninjas: Can you select and style a DOM element using only one line of JavaScript code? Come sharpen your coding chops in this episode!
If you know a clever one-line solution to this week’s coding challenge, please use the link below to record your answer. And if you can speak slowly and clearly, I may feature your voice in my next episode! But if it’s more convenient for you, you may use the Comment section of Medium or YouTube.
Intro
Hello World! My name is Thon Ly (tawn lee) and I am your host. Each week, I send out a Frontend Coding Challenge that can be solved with just one line of JavaScript code. The following week, I review the best answers that were sent in. If you think you’re a Coding Ninja, come test your coding chops!
Problem
Last week, this one-liner Frontend Challenge was presented:
<p id="p1">Hello World</p>In the HTML code, there is a paragraph tag with an ID of p1. The content of this tag is Hello World.
Level Easy:
Your challenge is to give Hello World a color of green in only one line of JavaScript code.
Level Medium:
Can you think of another way that’s even shorter?
Solution
The most popular answer was similar to this one submitted by Pa Nhia Thao:
document.querySelector("p").style.color = "green"Using querySelector works, but it traverses the entire HTML tree looking for the first occurrence of the paragraph element.
A better answer is this:
document.getElementById("p1").style.color = "green"Using getElementById instead does not require searching through the HTML tree. Therefore, this method is faster and more performant.
In my opinion, the most elegant solution is this:
p1.style.color = "green"This is possible because JavaScript automatically creates variables using the names of the IDs.
References:
- https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
- https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
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 the CodePen with all the problems and all the solutions:
As well as a YouTube recording of this episode:
Next Problem
For this week, your one-liner Frontend Challenge is this:
<p id="p1">Hello World</p>In the HTML code, there is a paragraph tag with an ID of p1. The content of this tag is Hello World.
Level Easy:
Your challenge is to replace the text Hello World with the text Frontend Rocks!.
Level Medium:
Can you think of another way that’s even faster and more performant?
Outro
If you know the answer to this challenge, I invite you to please call in and leave a voice message to share your knowledge with your fellow coders.
And if you can think of a great one-liner Frontend Challenge to recommend for this show, please let me know also, and I might just air it!
Lastly, if you find this show helpful, please leave a positive review to help increase its search visibility. 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 ❤️
