Author: John Au-Yeung

Sometimes, we want to make a chainable function with JavaScript.

In this article, we’ll look at how to make a chainable function with JavaScript.

How to make a chainable function with JavaScript?

To make a chainable function with JavaScript, we can return this in our methods.

For instance, we write:

const obj = {
  foo() {
    this.foo = 'foo';
    return this;
  },
  bar() {
    this.bar = 'bar';
    return this;
  }
}
obj.foo().bar()
console.log(obj)

to define the obj object that had the foo and bar methods that sets the value of this.foo and this.bar respectively and returns this.

Since this is obj, we can call foo and bar by chaining them.

As a result, obj is {foo: 'foo', bar: 'bar'} after we run obj.foo().bar().

Conclusion

To make a chainable function with JavaScript, we can return this in our methods.

Sometimes, we want to get value from data attribute of selected dropdown with JavaScript.

In this article, we’ll look at how to get value from data attribute of selected dropdown with JavaScript.

How to get value from data attribute of selected dropdown with JavaScript?

To get value from data attribute of selected dropdown with JavaScript, we can get the selected option from the selectedOptions property.

Then we get the data attribute value from the dataset property.

For instance, we write:

<select>
  <option data-fruit='apple'>apple</option>
  <option data-fruit='grape'>grape</option>
  <option data-fruit='grape'>grape</option>
</select>

to add a select drop down.

Then we write:

const select = document.querySelector('select')
select.onchange = (e) => {
  const [option] = e.target.selectedOptions
  console.log(option.dataset.fruit)
}

to select the select element with querySelector.

Then we set the select.onchange property to a function that gets the select option with e.target.selectedOptions.

Then we get the data-fruit attribute from the selected option element with dataset.fruit.

Now we see the data-fruit value logged when we pick an option.

Conclusion

To get value from data attribute of selected dropdown with JavaScript, we can get the selected option from the selectedOptions property.

Then we get the data attribute value from the dataset property.

Sometimes, we want to create bouncing div animation with JavaScript.

In this article, we’ll look at how to create bouncing div animation with JavaScript.

How to create bouncing div animation with JavaScript?

To create bouncing div animation with JavaScript, we can use the div’s animate method.

For instance, we write:

<div style='width: 50px; height: 50px; background-color: red; position: fixed'>

</div>

to add the div that we want to animate.

Then we write:

document.querySelector("div")
  .animate([{
      bottom: '5px'
    },
    {
      bottom: '15px'
    },
    {
      bottom: '20px'
    },
    {
      bottom: '0px'
    }
  ], {
    duration: 1000,
    iterations: Infinity
  });

to select the div with querySelector and call animate on it with an array of keyframes.

Each keyframe object has the CSS styles we want to apply to the div for each keyframe.

We set the duration to 1 second and iterations to Infinity to repeat the animation every second forever.

Conclusion

To create bouncing div animation with JavaScript, we can use the div’s animate method.

Sometimes, we want to remove required property from input field on form submit with JavaScript.

In this article, we’ll look at how to remove required property from input field on form submit with JavaScript.

How to remove required property from input field on form submit with JavaScript?

To remove required property from input field on form submit with JavaScript, we can set the input’s required property to false in the form submit handler.

For instance, we can write:

<form>
  <input required>
  <button type='submit'>
    Submit
  </button>
</form>

to add a form with an input and a submit button.

Then we write:

const input = document.querySelector("input")
const form = document.querySelector("form")

form.onsubmit = (e) => {
  e.preventDefault()
  input.required = false
}

to select the input and the form.

Then we set the form.onsubmit function to a function that sets input.required to false to remove the required attribute from the input on submit.

Conclusion

To remove required property from input field on form submit with JavaScript, we can set the input’s required property to false in the form submit handler.

Sometimes, we want to create an array from a generator in JavaScript.

In this article, we’ll look at how to create an array from a generator in JavaScript.

How to create an array from a generator in JavaScript?

To create an array from a generator in JavaScript, we can use the spread operator.

For instance, we write:

function* seq(minVal, maxVal) {
  let currVal = minVal;
  while (currVal < maxVal) {
    yield currVal++;
  }
}
const list = [...seq(1, 10)]
console.log(list)

to create the seq generator function.

Then we call it with 1 and 10 and spread the returned results into an array.

Therefore list is  [1, 2, 3, 4, 5, 6, 7, 8, 9].

Conclusion

To create an array from a generator in JavaScript, we can use the spread operator.