Author: John Au-Yeung

Sometimes, we want to write a JavaScript regex for number with decimals and thousand separator.

In this article, we’ll look at how to write a JavaScript regex for number with decimals and thousand separator.

How to write a JavaScript regex for number with decimals and thousand separator?

To write a JavaScript regex for number with decimals and thousand separator, we can use /^\d{1,3}(,\d{3})*(\.\d+)?$/.

^\d{1,3} matches groups of digits up to 3 digits long at the start of the string.

We match the digit groups in the middle of the string with (,\d{3})*.

And we match the digit group at the end of the string with (\.\d+)?$.

Conclusion

To write a JavaScript regex for number with decimals and thousand separator, we can use /^\d{1,3}(,\d{3})*(\.\d+)?$/.

Sometimes, we want to convert a 32 bit integer into 4 bytes of data in JavaScript.

In this article, we’ll look at how to convert a 32 bit integer into 4 bytes of data in JavaScript.

How to convert a 32 bit integer into 4 bytes of data in JavaScript?

To convert a 32 bit integer into 4 bytes of data in JavaScript, we can use the ArrayBuffer and DataView constructors.

For instance, we write:

const toBytesInt32 = (num) => {
  const arr = new ArrayBuffer(4);
  const view = new DataView(arr);
  view.setUint32(0, num, false);
  return arr;
}

console.log(toBytesInt32((57586868).toString(2)))

to define the toBytesInt32 function that takes the num string.

In it, we create an ArrayBuffer with 4 to create a 4 bytes array buffer.

Then create a DataView instance with the array buffer.

And then we populate the view with num.

Conclusion

To convert a 32 bit integer into 4 bytes of data in JavaScript, we can use the ArrayBuffer and DataView constructors.

Sometimes, we want to add a text link inside a div using JavaScript.

In this article, we’ll look at how to add a text link inside a div using JavaScript.

How to add a text link inside a div using JavaScript?

To add a text link inside a div using JavaScript, we can set the innerHTML property of the div to a string with the link code.

For instance, we write:

<div>

</div>

to add a div.

Then we write:

const div = document.querySelector('div')
div.innerHTML = '<a href="http://www.example.com">example</a>'

to select the div with document.querySelector.

And then we set its innerHTML property to the link string.

Now we should see the link displayed on screen.

Conclusion

To add a text link inside a div using JavaScript, we can set the innerHTML property of the div to a string with the link code.

Sometimes, we want to add transitions to React styled components with JavaScript.

In this article, we’ll look at how to add transitions to React styled components with JavaScript.

How to add transitions to React styled components with JavaScript?

To add transitions to React styled components with JavaScript, we can change styles according to props.

For instance, we write:

import React from "react";
import styled, { css } from "styled-components";

const Button = styled.div`
  transform: rotate(0deg);
  transition: transform 0.2s ease-out;
  background: green;
  width: 50px;
  ${(props) =>
    props.expanded &&
    css`
      transform: rotate(45deg);
    `};
`;

export default function App() {
  const [expanded, setExpanded] = React.useState();

  React.useEffect(() => {
    setTimeout(() => {
      setExpanded(true);
    }, 2000);
  }, []);

  return <Button expanded={expanded}>hello</Button>;
}

to create a styled div and assign it to Button.

In it, we set the transform property to rotate the div according to the value of the expanded prop.

Then in App, we have the expanded state that’s set as the value of the expanded prop.

And we call setExpanded in the setTimeout callback 2 seconds after App is mounted.

Conclusion

To add transitions to React styled components with JavaScript, we can change styles according to props.

Sometimes, we want to validate date if is the last day of the month with JavaScript.

In this article, we’ll look at how to validate date if is the last day of the month with JavaScript.

How to validate date if is the last day of the month with JavaScript?

To validate date if is the last day of the month with JavaScript, we can check if the date plus 1 day is in the same month as the original date.

For instance, we write:

const isLastDay = (dt) => {
  const test = new Date(dt.getTime())
  const month = test.getMonth();
  test.setDate(test.getDate() + 1);
  return test.getMonth() !== month;
}

console.log(isLastDay(new Date(2022, 0, 1)))
console.log(isLastDay(new Date(2022, 0, 31)))

to define the isLastDay function that takes the JavaScript date dt.

In it, we create a copy of dt with new Date(dt.getTime()).

Then we get the month from test with getMonth.

Next, we call test.setDate to increment test‘s date by 1.

Then we check if test is the same month as dt with test.getMonth() !== month.

Therefore, the first console log logs false and the 2nd one logs true.

Conclusion

To validate date if is the last day of the month with JavaScript, we can check if the date plus 1 day is in the same month as the original date.