Categories
JavaScript Answers

How to create bouncing div animation with JavaScript?

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.

Categories
JavaScript Answers

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

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.

Categories
JavaScript Answers

How to create an array from a generator in JavaScript?

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.

Categories
JavaScript Answers

How to detect element class name changes with JavaScript?

Sometimes, we want to detect element class name changes with JavaScript.

In this article, we’ll look at how to detect element class name changes with JavaScript.

How to detect element class name changes with JavaScript?

To detect element class name changes with JavaScript, we can use the MutationObserver.

For instance, we write:

<div class='foo'>

</div>

to add a div.

Then we write:

const mut = new MutationObserver((mutations, mut) => {
  console.log(mutations, mut)
});
const div = document.querySelector("div")
mut.observe(div, {
  'attributes': true
});

setTimeout(() => {
  div.className = 'bar'
}, 1000)

We create a mutation observer object with the MutationObserver constructor.

Then we call observer on it with the div that we want to watch for changes for and an object that has attributes set to true to watch for attribute changes on the div.

Next, we set the className of the div to 'bar'.

As a result, the mutations iterable object should have the target.className that has the new class name value.

Conclusion

To detect element class name changes with JavaScript, we can use the MutationObserver.

Categories
JavaScript Answers

How to find the maximum scroll position of a page with JavaScript?

Sometimes, we want to find the maximum scroll position of a page with JavaScript.

In this article, we’ll look at how to find the maximum scroll position of a page with JavaScript.

How to find the maximum scroll position of a page with JavaScript?

To find the maximum scroll position of a page with JavaScript, we can find the max value between document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, and document.documentElement.offsetHeight.

For instance, we write:

const limit = Math.max(
  document.body.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.clientHeight,
  document.documentElement.scrollHeight,
  document.documentElement.offsetHeight
);
console.log(limit)

to call Math.max with the listed values to find the max scroll position of the page.

Conclusion

To find the maximum scroll position of a page with JavaScript, we can find the max value between document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, and document.documentElement.offsetHeight.