Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to increment letters with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to increment letters with JavaScript.

In this article, we’ll look at how to increment letters with JavaScript.

How to increment letters with JavaScript?

To increment letters with JavaScript, we can use the String.fromCharCode method.

For instance, we write

const c = String.fromCharCode("A".charCodeAt() + 1);

to call String.fromCharCode with "A".charCodeAt() + 1 to return 'B'.

We get the character code of 'A' with charCodeAt.

Then we add 1 to it and use the sum as the argument of fromCharCode to get the letter after 'A'.

Conclusion

To increment letters with JavaScript, we can use the String.fromCharCode method.

Categories
JavaScript Answers

How to convert blob from DataURL with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to convert blob from DataURL with JavaScript.

In this article, we’ll look at how to convert blob from DataURL with JavaScript.

How to convert blob from DataURL with JavaScript?

To convert blob from DataURL with JavaScript, we can use fetch.

For instance, we write

const url =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

const res = await fetch(url);
const blob = await res.blob();

to call fetch with url to return a promise with the response.

Then we call res.blob to return a promise with the blob from the response object.

Conclusion

To convert blob from DataURL with JavaScript, we can use fetch.

Categories
JavaScript Answers

How to convert a JavaScript string variable to decimal or money?

Labrador retriever puppy walking on green grass

Sometimes, we want to convert a JavaScript string variable to decimal or money.

In this article, we’ll look at how to convert a JavaScript string variable to decimal or money.

How to convert a JavaScript string variable to decimal or money?

To convert a JavaScript string variable to decimal or money, we can use the Intl.NumberFormat constructor.

For instance, we write

const formatter = new Intl.NumberFormat("en", {
  style: "currency",
  currency: "GBP",
});

console.log(formatter.format(1234.5));

to create the Intl.NumberFormat object by calling it with the locale string and an object with the formatting options.

'currency' formats the string as a currency number.

And currency is set to 'GBP' so the number is formatted into a GBP value.

Then we call formatter.format with the number to format to return a string with the currency number.

Conclusion

To convert a JavaScript string variable to decimal or money, we can use the Intl.NumberFormat constructor.

Categories
React Answers

How to toggle class on click with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to toggle class on click with React.

In this article, we’ll look at how to toggle class on click with React.

How to toggle class on click with React?

To toggle class on click with React, we can set the className prop.

For instance, we write

function MyComponent(props) {
  const [isActive, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!isActive);
  };

  return (
    <div className={isActive ? "your-class" : null} onClick={toggleClass}>
      <p>{props.text}</p>
    </div>
  );
}

to create the MyComponent component.

In it, we have the isActive state.

We set it with the setActive function in the toggleClass function.

In the div, we set the className prop to 'your-class' if isActive is true and null otherwise.

And we set onClick to toggleClass so toggleClass is called when we click on the button.

Conclusion

To toggle class on click with React, we can set the className prop.

Categories
JavaScript Answers

How to convert date to UTC using moment.js and JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to convert date to UTC using moment.js and JavaScript.

In this article, we’ll look at how to convert date to UTC using moment.js and JavaScript.

How to convert date to UTC using moment.js and JavaScript?

To convert date to UTC using moment.js and JavaScript, we can use the moment’s utc method.

For instance, we write

const utcStart = new moment("2022-06-24T09:00", "YYYY-MM-DDTHH:mm").utc();

to create a moment object with the datetime with moment.

Then we call utc to return a moment object with the same date in UTC.

Conclusion

To convert date to UTC using moment.js and JavaScript, we can use the moment’s utc method.