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

Join Medium with my referral link - Thon Ly

New Podcast: One-Liner JavaScript Coding Challenge for Frontend Engineers

If you’re looking for A Complete Frontend Developer Course for Beginners, check out this textbook written by Thon Ly exclusively for Medium:

TK: coming soon!

To help you achieve full mastery, all three web languages (HTML, CSS, and JavaScript) are taught together in parallel in order to deepen your understanding of their interrelationships.

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:

1. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
2. 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!

‎One-Liner JavaScript Coding Challenge for Frontend Engineers: 1: Style a DOM Element on Apple…

One-Liner JavaScript Coding Challenge for Frontend Engineers - [1] Style a DOM Element

All Episodes

Next Episode

For more coding exercises, check out:

Algorithms in JavaScript

Join Medium with my referral link - Thon Ly