Categories
JavaScript Answers

How to detect iPad Pro as iPad with JavaScript?

Sometimes, we want to detect iPad Pro as iPad with JavaScript.

In this article, we’ll look at how to detect iPad Pro as iPad with JavaScript.

How to detect iPad Pro as iPad with JavaScript?

To detect iPad Pro as iPad with JavaScript, we can check various properties of navigator.

For instance, we write:

const isIOS = () => {
  if (/iPad|iPhone|iPod/.test(navigator.platform)) {
    return true;
  } else {
    return navigator.maxTouchPoints &&
      navigator.maxTouchPoints > 2 &&
      /MacIntel/.test(navigator.platform);
  }
}

const isIpadOS = () => {
  return navigator.maxTouchPoints &&
    navigator.maxTouchPoints > 2 &&
    /MacIntel/.test(navigator.platform);
}

to define the isIOS and isIpadOS functions to check whether the device runs iOS or iPad OS.

In isIOS, we check navigator.platform or check whether there’re more than 2 touch points max supported by the device.

In isIpadOS, we just check whether the max number of touch points.

Conclusion

To detect iPad Pro as iPad with JavaScript, we can check various properties of navigator.

Categories
JavaScript Answers React React Answers

How to set the height of a text area dynamically with JavaScript and React?

Sometimes, we want to set the height of a text area dynamically with JavaScript and React.

In this article, we’ll look at how to set the height of a text area dynamically with JavaScript and React.

How to set the height of a text area dynamically with JavaScript and React?

To set the height of a text area dynamically with JavaScript and React, we can set the height of the text area when we type into it.

For instance, we write:

import React from "react";

export default function App() {
  const handleKeyDown = (e) => {
    e.target.style.height = "inherit";
    e.target.style.height = `${e.target.scrollHeight}px`;
  };

  return <textarea onKeyDown={handleKeyDown} />;
}

to set the onKeyDown prop to the handleKeyDown function.

In it, we set the height of the text area to the e.target.scrollHeight, which is the height of the scrollable area.

As a result, the height of the text area should change to show all the text as we type into it.

Conclusion

To set the height of a text area dynamically with JavaScript and React, we can set the height of the text area when we type into it.

Categories
JavaScript Answers

How to delete multiple items of an array by value with JavaScript?

Sometimes, we want to delete multiple items of an array by value with JavaScript.

In this article, we’ll look at how to delete multiple items of an array by value with JavaScript.

How to delete multiple items of an array by value with JavaScript?

To delete multiple items of an array by value with JavaScript, we can use the array filter method.

For instance, we write:

const arr = [0, 1, 2, 3, 4];
const removal = 2;
const newArr = arr.filter((itm) => {
  return itm !== removal
});
console.log(newArr)

to call arr.filter to return an array without 2 in it.

To do this, we call filter with a callback that returns itm !== removal.

As a result, newArr is [0, 1, 3, 4].

Conclusion

To delete multiple items of an array by value with JavaScript, we can use the array filter method.

Categories
JavaScript Answers

How to combine 2 JavaScript variables into a string?

Sometimes, we want to combine 2 JavaScript variables into a string.

In this article, we’ll look at how to combine 2 JavaScript variables into a string.

How to combine 2 JavaScript variables into a string?

To combine 2 JavaScript variables into a string, we can use the + operator concatenate them.

For instance, we write:

const a = 1;
const b = "abc";
const c = b + a;
console.log(c)

to concatenate b and a together with + and assign the returned result to c.

Therefore, c is 'abc1'.

Conclusion

To combine 2 JavaScript variables into a string, we can use the + operator concatenate them.

Categories
JavaScript Answers

How to add 30 days to date in mm/dd/yy format with JavaScript?

Sometimes, we want to add 30 days to date in mm/dd/yy format with JavaScript.

In this article, we’ll look at how to add 30 days to date in mm/dd/yy format with JavaScript.

How to add 30 days to date in mm/dd/yy format with JavaScript?

To add 30 days to date in mm/dd/yy format with JavaScript, we can parse the date, get its timestamp, and then we can add the days to it.

For instance, we write:

const s = '12/31/21'
const [month, day, year] = s.split(/\D/);
const d = new Date(+year.toString().padStart(4, '20'), month - 1, day)
const newD = new Date(d.getTime() + 30 * 24 * 60 * 60 * 1000)
console.log(newD)

to get the 3 numerical parts of string s with split.

Then we create date d with +year.toString().padStart(4, '20') to prepend the 2 digit year with 20.

The 2nd argument is month - 1 since JavaScript dates are zero based.

And we pass in the day as is.

Next, we call getTime to get the timestamp of d in milliseconds.

And then we add 30 days to it by adding 30 * 24 * 60 * 60 * 1000.

As a result, newD is Sun Jan 30 2022 00:00:00 GMT-0800 (Pacific Standard Time).

Conclusion

To add 30 days to date in mm/dd/yy format with JavaScript, we can parse the date, get its timestamp, and then we can add the days to it.