Categories
JavaScript Answers

How to partition an array in JavaScript?

Sometimes, we want to partition an array in JavaScript.

In this article, we’ll look at how to partition an array in JavaScript.

How to partition an array in JavaScript?

To partition an array in JavaScript, we can use the Lodash chunk function.

For instance, we write:

const arrayAll = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const chunked = _.chunk(arrayAll, 3)
console.log(chunked)

to call chunk with arrayAll and 3 to return an array with entries in arrayAll divided into chunks of 3.

As a result, chunked is:

[[1, 2, 3], [4, 5, 6], [7, 8, 9]]

Conclusion

To partition an array in JavaScript, we can use the Lodash chunk function.

Categories
JavaScript Answers

How to get the URL parameters inside the HTML page with JavaScript?

Sometimes, we want to get the URL parameters inside the HTML page with JavaScript.

In this article, we’ll look at how to get the URL parameters inside the HTML page with JavaScript.

How to get the URL parameters inside the HTML page with JavaScript?

To get the URL parameters inside the HTML page with JavaScript, we can use the URLSearchParams constructor.

For instance, we write:

const params = new URLSearchParams(document.location.search);
const s = params.get("s");
const o = params.get("o");
console.log(s, o)

to create a URLSearchParams instance with the query string of the current page URL, which we get from document.location.search.

Next, we get the value of the s and o query parameters with params.get.

Therefore, if the current page URL has the query string s=1&o=2, then s is 1, and o is 2.

Conclusion

To get the URL parameters inside the HTML page with JavaScript, we can use the URLSearchParams constructor.

Categories
JavaScript Answers

How to decode a base64 string using CryptoJS with JavaScript?

Sometimes, we want to decode a base64 string using CryptoJS with JavaScript.

In this article, we’ll look at how to decode a base64 string using CryptoJS with JavaScript.

How to decode a base64 string using CryptoJS with JavaScript?

To decode a base64 string using CryptoJS with JavaScript, we can use the CryptoJS.enc.Base64.parse method.

For instance, we write:

const base64 = 'SGVsbG8gd29ybGQ=';
const words = CryptoJS.enc.Base64.parse(base64);
const textString = CryptoJS.enc.Utf8.stringify(words);
console.log(textString)

We call CryptoJS.enc.Base64.parse with the base64 string to parse the base64 string.

Then we call CryptoJS.enc.Utf8.stringify to convert the decrypted words into a string.

Therefore, textString is 'Hello world'.

Conclusion

To decode a base64 string using CryptoJS with JavaScript, we can use the CryptoJS.enc.Base64.parse method.

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.