Author: John Au-Yeung

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

Categories
JavaScript Answers

How to Calculate the UTC Offset Given a Time Zone String in JavaScript?

Seal lying on rock covered with snow

Sometimes, we want to calculate the UTC offset given a time zone string in JavaScript.

In this article, we’ll look at how to calculate the UTC offset given a time zone string in JavaScript.

Calculate the UTC Offset Given a Time Zone String in JavaScript

To calculate the UTC offset given a time zone string in JavaScript, we can use the JavaScript date’s toLocaleString method to get the time zone offset.

For instance, we can weite:

const getTimezoneOffset = (d, timeZone) => {
  const a = d.toLocaleString("ja", {
    timeZone
  }).split(/[/s:]/);
  a[1]--;
  const t1 = Date.UTC(...a);
  const t2 = new Date(d).setMilliseconds(0);
  return (t2 - t1) / 60 / 1000;
}

console.log(getTimezoneOffset(new Date(2016, 0, 1), "America/New_York"))

to create the getTimezoneOffset function that takes the d date and timeZone .

We get the date parts in an array with the toLocaleString method which we called with the timeZone .

Then we subtract the month number by 1 to match the JavaScript convention with:

a[1]--;

Next, we call Date.UTC with the a array spread as the arguments to create t1

Then we create t2 with 0 milliseconds.

Next, we subtract t2 and t1 and divide that by 60 seconds and return that.

Now we get the time zone offset in minutes.

Conclusion

To calculate the UTC offset given a time zone string in JavaScript, we can use the JavaScript date’s toLocaleString method to get the time zone offset.

Categories
React Answers

How to Retrieve Values from a Select Element with Multiple Options in React?

white seal on soil

Sometimes, we want to retrieve values from a select element with multiple options in React.

In this article, we’ll look at how to retrieve values from a select element with multiple options in React.

Retrieve Values from a Select Element with Multiple Options in React

To retrieve values from a select element with multiple options in React, we can get the selected values from the e.target.selectedOptions property.

For instance, we can write:

import { useState } from "react";

export default function App() {
  const [val, setVal] = useState([]);

  const handleChange = (e) => {
    const value = Array.from(
      e.target.selectedOptions,
      (option) => option.value
    );
    setVal(value);
  };

  return (
    <div className="App">
      <select multiple value={val} onChange={handleChange}>
        <option value={1}>First option</option>
        <option value={2}>Second option</option>
        <option value={3}>Third option</option>
      </select>
    </div>
  );
}

We create the val state to store the selected values with the useState hook.

Then we create the handleChange function to get the values from the e.target.selectedOptions by calling Array.from with a callback to map them to the value of each option selected.

e.target.selectedOptions has the selected options.

We then call setVal with value to set val to value .

Then finally, we add the select element with the multiple prop to let us pick multiple options.

We also set the value prop to val to let us see the values we selected.

And we set onChange to handleChange to set val to the updated variables.

Conclusion

To retrieve values from a select element with multiple options in React, we can get the selected values from the e.target.selectedOptions property.

Categories
JavaScript Answers

How to Change the First Letter of Each Word to Upper Case with JavaScript?

shallow focus photography of brown seal lying on stone

To change the first letter of each word to upper case with JavaScript, we can use the JavaScript string’s replace method with a callback to change the first letter of each word to uppercase.

For instance, we can write:

const str = "hello world";
const newStr = str.toLowerCase().replace(/b[a-z]/g, (letter) => {
  return letter.toUpperCase();
});
console.log(newStr)

We call str.toLowerCase to convert str to lower case.

Then we call replace on it with a regex to match all lowercase letters that are the first letter of a word with /b[a-z]/g .

The callback gets the matched letter and call toUpperCase on it.

Therefore, newStr is 'Hello World' .

Categories
JavaScript Answers

How to Convert Negative Numbers to a Binary String in JavaScript?

photo of seals

To convert negative numbers to a binary string in JavaScript, we can use the toString method or a zero-fill right shift to convert negative numbers to binary strings.

For instance, we can write:

const str = (-3).toString(2);  
console.log(str)

to convert -3 to '-11' .

The negative sign is preserved with this conversion.

To use the bit shift operation to convert a negative number to a binary string, we write:

const str = (-3 >>> 0).toString(2);  
console.log(str)

Then str is '11111111111111111111111111111101' , which is the unsigned 32-bit integer version of the decimal number -3.

Categories
JavaScript Answers

How to Insert a Space Before Each Capital Letter with JavaScript?

closeup photo of swimming rodent

To insert a space before each capital letter with JavaScript, we can use a regex to grab each capital letter and add a space before each one with the replace method

For instance, we can write:

const str = "MySites"
const newStr = str.replace(/([A-Z])/g, ' $1').trim()
console.log(newStr)

We call replace on the string str with /([A-Z])/g to get all capital letters from the string.

The g flag matches all capital letters.

Then we pass in ' $1' as the second argument to add a space before each match.

Finally, we call trim to trim off any leading and trailing whitespaces.