Category: JavaScript

Sometimes, we want to resize HTML5 canvas to parent’s size with JavaScript.

In this article, we’ll look at how to resize HTML5 canvas to parent’s size with JavaScript.

How to resize HTML5 canvas to parent’s size with JavaScript?

To resize HTML5 canvas to parent’s size with JavaScript, we can set the canvas’ width and height properties.

For instance, we write:

<div>
  <canvas></canvas>
</div>

to add a div and a canvas.

Then we write:

const canvas = document.querySelector('canvas')
const theDiv = document.querySelector('div')
canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;

to resize the canvas to the size of the div by setting the canvas‘s height and width to the theDivs‘s clientHeight and clientWidth properties respectively.

As a result, the size of the canvas is now the same as as the parent div.

Conclusion

To resize HTML5 canvas to parent’s size with JavaScript, we can set the canvas’ width and height properties. to select the canvas and a div.

Sometimes, we want to get the text after a specific word with JavaScript.

In this article, we’ll look at how to get the text after a specific word with JavaScript.

How to get the text after a specific word with JavaScript?

To get the text after a specific word with JavaScript, we can use some string methods.

For instance, we write:

const x = 'foobarbaz'
const y = 'bar'
const z = x.slice(x.indexOf(y) + y.length);
console.log(z)

to get the part of x after 'bar'.

To do this, we call x.slice with the index of the first character of y, which we get from indexOf.

We didn’t pass in a second argument to slice, so the end index is the end of the string.

Then we add y.length to it to get the last index of 'bar' in x.

Therefore, z is 'baz'.

Conclusion

To get the text after a specific word with JavaScript, we can use some string methods.

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.