Podcast Episode 3: Add Hover Effect to DOM Element
Season 1: One-Liner JavaScript Coding Challenge for Frontend Engineers
--
One-Liner Buddhist Quote of Week
There is no path to happiness: Happiness is the path.
— Buddha
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 3
ATTN Coding Ninjas: Can you add the CSS hover effect to 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 go over the problem, solution, and explanation. 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 Hard:
Your challenge is to add a hover effect to this paragraph tag such that on hover the text color changes to green. Do this in only one line of JavaScript code.
Solution
The best answer is:
document.styleSheets[0].insertRule(“#p1:hover {color:green}”)At first, you might be tempted to add a pair of event listeners such as onmouseenter and onmouseleave to mimic the behavior of the CSS hover effect.
However, this solution will require two lines of JavaScript code. To do it in just one line, a different solution is needed.
The simplest approach is to insert the hover pseudo-class via JavaScript to the paragraph element. Unfortunately, there is no JavaScript method that allows us to directly add a pseudo-class to an element.
The next best thing is to either create a new stylesheet or select an existing one and then insert a CSS rule that includes the pseudo-class.
The code:
document.styleSheets[0]finds and selects the first stylesheet in the HTML document.
Then the code:
.insertRule(“#p1:hover {color:green}”)adds a new CSS rule that changes the color to green whenever the hover event is triggered by the paragraph element.
References:
- https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
- https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets
- https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
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:
<input id="pw" type="password">
<button id="sb">Submit</button>In the HTML code, there is an input tag with an id attribute of pw and a type attribute of password. There is also a button tag with an id attribute of sb and a text content of Submit.
Level Easy:
When the Submit button is clicked, log to the console the length of the password that has been entered into the input. Do this in only one line of JavaScript code.
Level Medium:
When the Submit button is clicked, also change the outline color of the button to blue. Again, do this in only one line of JavaScript code.
Level Hard:
When the Submit button is clicked, if the password length is less than 5 characters, change the outline color of the input to red; otherwise, change it to green. Of course, do this in only one line of JavaScript code.
Outro
If you know a clever solution to this challenge, please call in and leave a voice message to share your technical knowledge!
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 air it to benefit your fellow coders!
Lastly, if you find this show helpful, please leave a positive review to help increase its search visibility. Thanks so much!
