Podcast Episode 4: Validate Password Length
Season 1: One-Liner JavaScript Coding Challenge for Frontend Engineers
One-Liner Buddhist Quote of Week
There is no wealth like knowledge, no poverty like ignorance.
— Buddha
If you’re looking for A Complete Frontend Developer Course for Beginners, check out this textbook written by
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 3: Add Hover Effect to DOM Element
Transcript for Podcast Episode 4
ATTN Coding Ninjas: Can you validate the length of a password 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
(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:
<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.
Solution
For level easy, the solution is:
sb.onclick = () => console.log(pw.value.length)Let’s break it down the way the JavaScript engine executes it:
First, let’s analyze:
sb.onclicksb is the id of the Submit button. In JavaScript, sb becomes a global variable that directly references the button element. As such, we can set the onclick attribute of the button by calling .onclick.
Second, let’s analyze:
= () =>onclick needs to be set to a function so that it can be called at a later time. In order words, onclick is an event handler and the function is a callback.
Whenever the button is clicked by the user, the event handler will execute the callback.
To write this callback function in only one line, we use an arrow function expression.
Third, let’s analyze:
console.log(Now, inside this callback function, we can use the console API to log the number of characters in the password by calling its .log() method.
Finally, let’s analyze:
pw.value.length)pw is the id of the password input. Like sb, pw becomes a global JavaScript variable that directly references the input element. As such, we can get the value attribute of the input by calling .value.
This returns the password as a String that was entered. And as a String, we can get the number of characters by calling .length.
Level Medium:
For level medium, the solution is:
sb.addEventListener("click", () => sb.style.outlineColor = "blue")Let’s break this down as well the way the JavaScript engine executes it.
First, let’s analyze:
sb.addEventListener(Again, sb is a global variable that references the button element. As such, we can add any event listener to the button by calling the addEventListener() method.
You may be thinking: Why not simply use the onclick attribute like before?
Unfortunately, if we use onclick again, this new event handler will replace the previous one, and therefore will not work anymore.
But, by using the addEventListener() method, as the name implies, we can add as many event listeners as we want that behave just like the onclick handler.
Second, let’s analyze:
"click"The addEventListener() method expects 2 parameters. The first parameter it expects is the name of the event it should listen for. Here, we want it to listen for the “click” event.
This makes it behave just like the onclick event handler.
Finally, let’s analyze:
, () => sb.style.outlineColor = "blue")The second parameter that the addEventlistener() method expects is the callback function. Again, this function will be called whenever the listener hears the “click” event.
To write this function in only one line, we write it as an arrow function expression.
Inside this arrow function, we can change the outline color of the button to blue. To do this, we can call the style attribute of the button. This will allow us to set any inline CSS properties.
The only thing to keep in mind is that CSS property names are hyphenated, but as Javascript variable names, they become camelcased.
Here, we want to set the outlineColor property to blue.
Level Hard:
For level hard, the solution is:
sb.addEventListener("click", () => pw.style.outlineColor = pw.value.length < 5 ? "red" : "green")Again, let’s break it down the way JavaScript executes it.
First, let’s analyze:
sb.addEventListener("click"Like before, sb is a global variable that references the button element. And like before, we add a “click” event listener by calling the addEventListener() method and passing it the String “click” as the first parameter.
Lastly, let’s analyze:
, () => pw.style.outlineColor = pw.value.length < 5 ? "red" : "green")Again, like before, the addEventListener() method expects a callback function for its second parameter. To write it in only one line, we use an arrow function.
The problem tells us to make the outline color red if the password length is less than 5. But if it’s 5 or greater, make the outline color green.
Therefore, inside the arrow function, we can easily write these two conditions in only one line using a ternary operator.
Let’s analyze this ternary operation:
pw.value.length < 5 ? “red” : “green”As we have discussed, pw.value.length returns the number of characters in the password. By using the less than operator, question mark operator, and colon operator, if the length is less than 5, the ternary operation will return red; otherwise, it will return green.
Finally, we set this color return to:
pw.style.outlineColorwhich, like we already discussed, changes the outline color of the input.
References:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
- https://developer.mozilla.org/en-US/docs/Web/API/Console_API
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
- 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 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 Hard:
When the Submit button is clicked, if the password contains a digit, change the outline color of the input to green; otherwise, change it to red.
Do this in only one line of JavaScript code. You may use regular expressions.
Level Extreme:
Do it in only one line of JavaScript code, BUT without using regular expressions.
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!
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 ❤️
