Author: John Au-Yeung

Sometimes, we want to remove chars between indexes in a JavaScript string.

In this article, we’ll look at how to remove chars between indexes in a JavaScript string.

How to remove chars between indexes in a JavaScript string?

To remove chars between indexes in a JavaScript string, we can use the JavaScript string substr method.

For instance, we write:

const s = "hi how are you";
const startIndex = 2;
const endIndex = 6;
const newS = s.substr(0, startIndex) + s.substr(endIndex);
console.log(newS)

We want to remove the characters of s between startIndex and endIndex exclusive.

To do this, we call substr with 0 and startIndex to get the part of s between index 0 and startIndex - 1.

And then we call substr again with endIndex to return the part of s between endIndex and the end of the s.

Finally, we concatenate them together and assign it to newS.

Therefore, newS is 'hi are you'.

Conclusion

To remove chars between indexes in a JavaScript string, we can use the JavaScript string substr method.

Sometimes, we want to add gradient instead of solid color fill with JavaScript Chart.js 3.

In this article, we’ll look at how to add gradient instead of solid color fill with JavaScript Chart.js 3.

How to add gradient instead of solid color fill with JavaScript Chart.js 3?

To add gradient instead of solid color fill with JavaScript Chart.js 3, we can set the backgroundColor property of the dataset object to a canvas gradient object.

For instance, we write:

<canvas id="myChart" width="400" height="400"></canvas>

to add the canvas element.

Then we write:

const ctx = document.getElementById('myChart');

const gradient = ctx.getContext('2d').createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(250,174,50,1)');
gradient.addColorStop(1, 'rgba(250,174,50,0)');

const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      fill: true,
      backgroundColor: gradient,
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
  }
});

to add a line chart with the area between the x-axis and the line filled in.

We set fill to true to enable the fill.

Then we set backgroundColor to gradient to add the gradient fill.

We call createLinearGradient to create the gradient.

And we call addColorStop to add the gradient colors.

Conclusion

To add gradient instead of solid color fill with JavaScript Chart.js 3, we can set the backgroundColor property of the dataset object to a canvas gradient object.

Sometimes, we want to hash a password using bcrypt inside a JavaScript async function.

In this article, we’ll look at how to hash a password using bcrypt inside a JavaScript async function.

How to hash a password using bcrypt inside a JavaScript async function?

To hash a password using bcrypt inside a JavaScript async function, we can use the bcrypt.hash method.

For instance, we write:

const bcrypt = require('bcrypt');

(async () => {
  const password = 'password'
  const saltRounds = 2
  const hashedPassword = await bcrypt.hash(password, saltRounds)
  console.log(hashedPassword)
})()

We call bcrypt.hash with the password string that we want to hash and the number of saltRounds.

It returns a promise so we can use await to get the resolved value, which is the hashed password.

Conclusion

To hash a password using bcrypt inside a JavaScript async function, we can use the bcrypt.hash method.

Sometimes, we want to force input to only allow alphabet letters with JavaScript.

In this article, we’ll look at how to force input to only allow alphabet letters with JavaScript.

How to force input to only allow alphabet letters with JavaScript?

To force input to only allow alphabet letters with JavaScript, we can set the keypress event handler of the input to a function that returns whether the key that’s pressed is a alphabet key.

For instance, we write:

<input>

to add an input.

Then we write:

const input = document.querySelector('input')
input.onkeypress = () => {
  return /[a-z]/i.test(event.key)
}

We get the input with document.querySelector.

Then we set the input.onkeypress property to a function that returns /[a-z]/i.test(event.key).

event.key has the character of the key that’s pressed.

So we’re check whether the key pressed is an alphabet key with test.

Conclusion

To force input to only allow alphabet letters with JavaScript, we can set the keypress event handler of the input to a function that returns whether the key that’s pressed is a alphabet key.

To copy the current URL to the clipboard with JavaScript, we can call navigator.clipboard.writeText with window.location.href.

For instance, we write:

<button>
  copy
</button>

to add a button.

Then we write:

const button = document.querySelector('button')
button.onclick = () => {
  navigator.clipboard.writeText(window.location.href);
}

We get the button with document.querySelector.

Then we set the button.onclick property to a function that calls navigator.clipboard.writeText with window.location.href.

window.location.href has the URL of the current page, so the URL will be copied to the clipboard with the copy button is clicked.