A simple interview question

I went on an interview and I was asked a question like the one in the codepen. I was asked to fix it as its broken. Just curious how others would answer this one

Here it is on CodePen

Comments

[Isaac Lyman]

Change:

if ($element.filter('.js-cool, .js-beans')) {

to

if ($element.filter('.js-cool, .js-beans').length) {

.filter returns an Array, which inherits from Object, and all Objects are truthy in JavaScript.

[John Costanzo]

That is a good way to solve this

[Ahmedur Rahman Shovon]

We can use a check to see what values the input has at keyboard events. Then if it has empty string we can simply restore the original font-size of the mentioned classes.

Here is an approach to do so:

$(function() {
  $(".checker").on("keydown keyup", function(ev) {
    $(".js-cool, .js-beans").css("font-size", "24px");
    $input_val = $(this).val();
    if ($input_val == "") {
      $(".js-cool, .js-beans").css("font-size", "inherit");
    }
  });
});

[Birger Hoornaert]

Why looping over all objects and filter out then when you can start with a beter filter.

$('.js-cool, .js-beans').each(function() {
    $(this).css("font-size", "24px");
});