Podcast Episode 5: Validate Password Input for a Digit
Season 1: One-Liner JavaScript Coding Challenge for Frontend Engineers
One-Liner Buddhist Quote of Week
My actions are my only true belongings.
— 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!
← Episode 4: Validate Password Length
Transcript for Podcast Episode 5
ATTN Coding Ninjas: Can you validate a password for the existence of a digit 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:
<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.
Solution
For level hard, the solution is:
sb.onclick = () => pw.style.outlineColor = /\d/.test(pw.value) ? "green" : "red"Let’s break this down the way the JavaScript engine executes it:
First, let’s analyze:
sb.onclick = () =>sb is the “id” of the Submit button. In JavaScript, sb becomes a global variable that references the button element. As a DOM element, we can set the onclick attribute of the button by calling its onclick property.
For this onclick variable to work as intended, it needs to be set to a function. This way, it can be called at a later time. In other words, it needs to be set to a “callback” function.
Whenever the button is clicked by the user, the onclick event handler will execute this callback function. To write this callback function in only one line, we write it as an arrow function expression.
Second, let’s analyze:
pw.style.outlineColor =pw is the “id” of the password input. Like sb, pw becomes a global JavaScript variable that references the input element. As a DOM element, we can get the style attribute of the input by calling its style property.
This returns a JavaScript object with names and values that are rendered into 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 plan to set the outlineColor property to the correct color. So, what is the correct color?
To find out, let’s analyze the right side of the assignment operator:
/\d/.test(pw.value) ? "green" : "red"The problem tells us to set the outline color to green if the password contains a digit; otherwise, set it to red.
To express this conditional statement in only one line, we use a ternary operator.
How can we check the password for a digit? In other words, the number 0 through 9?
The simplest and easiest way is to take advantage of regular expressions. And it so happens that the regular expression:
[0–9]will match any digit of a string.
In fact, there is an even more elegant regular expression that we can use:
/\d/As a regular expression, this has a very convenient built-in test() method where we can pass it the string we want to test.
And the string we want to test is the password that was entered by the user which we can get by calling the value property of pw.
If this password passes the test, the method will return true. But if it fails the test, the method will return false.
Per the ternary operation, this boolean will cause green to be returned if true and red if false.
This completes the assignment operation.
Level Extreme:
For level extreme, the solution is:
sb.onclick = () => pw.style.outlineColor = pw.value.split("").some(character => !isNaN(character)) ? "green" : "red"Let’s also break this down the way JavaScript executes it:
First, let’s analyze:
sb.onclick = () => pw.style.outlineColor =This part of the code is identical to the solution for level medium.
Basically, the onclick handler of the Submit button is set to an arrow function that will update the outline color of the password input.
For a thorough and detailed explanation of this code, please rewind back to the previous solution.
Finally, let’s analyze the ternary operation:
pw.value.split("").some(character => !isNaN(character)) ? "green" : "red"In particular, let’s analyze the conditional expression preceding the question mark which is the only difference compared to the previous solution.
Here, we are asked to implement another way to test for a digit in the password that do not involve using regular expressions.
Regular expressions are so simple and elegant sometimes that it’s almost like cheating. So much so that it takes away most of the challenge of the algorithm. For this reason, most interviewers ban their use in order to really assess your critical thinking and coding skills.
Without using regular expressions, how then can we test for a digit inside a string?
Obviously, we would need to check each character. And as soon as we find one digit, the string would pass the test.
To do this in code, we can loop through the string using a for of loop. However, this will require more than one line of code.
To see this implementation, check out the link to my codepen in the show notes.
To loop through each character in only one line:
First, we split up the string into an array of characters. This way, we can take advantage of all the built-in array methods that loop through each character.
In code, it is:
pw.value.split("").some(As we have already discussed, pw.value returns the password as a string. And as a string, we can use its built-in split() method and pass it an empty string in order for it to split up the password into an array of individual characters.
Now, as an array, we can take advantage of the some() method which tests whether at least one element passes the test implemented by the provided callback function.
Here, we want the callback function to be:
character => !isNaN(character)For each character, we want the callback function to test if it’s a digit.
To do this in only one line, we can take advantage of the global isNaN() function which tests if a string is not a number.
Then, if we negate this function with the not operator, we can effectively transform it to test if a character is a digit instead.
References:
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
- 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
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
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 Medium:
When the Submit button is clicked, if the password contains at least one lowercase letter AND at least one uppercase letter, 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:
Without using regular expressions, solve this problem 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!
→ Episode 6: Validate Password Input for Uppercase and Lowercase
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 ❤️
