Categories
JavaScript Answers

How to find the time left in a setTimeout() timer with JavaScript?

Sometimes, we want to find the time left in a setTimeout() timer with JavaScript.

In this article, we’ll look at how to find the time left in a setTimeout() timer with JavaScript.

How to find the time left in a setTimeout() timer with JavaScript?

To find the time left in a setTimeout() timer with JavaScript, we can use the timer’s _idleStart and _idleTimeout properties.

For instance, we write

const timeout = setTimeout(() => {}, 3600 * 1000);

const getTimeLeft = (timeout) => {
  return Math.ceil(
    (timeout._idleStart + timeout._idleTimeout - Date.now()) / 1000
  );
};

setInterval(() => {
  console.log("Time left: ", getTimeLeft(timeout), "s");
}, 2000);

to create the timeout timer object with setTimeout.

Then we calculate the time left before running the setTimeout callback with the getTimeLeft function.

In it, we use timeout._idleStart + timeout._idleTimeout - Date.now() to compute the time left before the setTimeout callback is run in milliseconds.

Then we divide the ceiling of the number and divide it by 1000 to get the number of seconds.

Next, we call setInterval with a callback that calls getTimeLeft with timeout in the callback to get the number of seconds left before the setTimeout callback is called every 2 seconds.

Conclusion

To find the time left in a setTimeout() timer with JavaScript, we can use the timer’s _idleStart and _idleTimeout properties.

Categories
JavaScript Answers

How to evaluate a string as a mathematical expression in JavaScript?

Sometimes, we want to evaluate a string as a mathematical expression in JavaScript.

In this article, we’ll look at how to evaluate a string as a mathematical expression in JavaScript.

How to evaluate a string as a mathematical expression in JavaScript?

To evaluate a string as a mathematical expression in JavaScript, we can use the mathjs library.

To install it, we run

npm install mathjs

Then we can use it by writing

import { evaluate } from "mathjs";

const n = evaluate("1.2 * (2 + 4.5)");

to call evaluate with the math expression we want to evaluate.

The return value is the value of the expression after evaluating as a number.

Conclusion

To evaluate a string as a mathematical expression in JavaScript, we can use the mathjs library.

Categories
JavaScript Answers

How to use getElementsByClassName() with two classes with JavaScript?

Sometimes, we want to use getElementsByClassName() with two classes with JavaScript.

In this article, we’ll look at how to use getElementsByClassName() with two classes with JavaScript.

How to use getElementsByClassName() with two classes with JavaScript?

To use getElementsByClassName() with two classes with JavaScript, we can use the querySelectorAll method.

For instance, we write

const els = document.querySelectorAll(".a,.b");

to call document.querySelectorAll to select all elements on the page with classes a and b.

We separate each class with commas in the selector.

Conclusion

To use getElementsByClassName() with two classes with JavaScript, we can use the querySelectorAll method.

Categories
JavaScript Answers

How to remove ‘&quot’ from JSON in JavaScript?

Sometimes, we want to remove ‘&quot’ from JSON in JavaScript.

In this article, we’ll look at how to remove ‘&quot’ from JSON in JavaScript.

How to remove ‘&quot’ from JSON in JavaScript?

To remove ‘&quot’ from JSON in JavaScript, we call the string replace method.

For instance, we write

const obj = JSON.parse(data.replace(/"/g, '"'));

to call data.replace with /"/g and '"' to replace all instances of '&quot' with double quotes on the data string.

Then we call JSON.parse to parse the string returned by replace into the obj object.

Conclusion

To remove ‘&quot’ from JSON in JavaScript, we call the string replace method.

Categories
React Answers

How to retrieve value from select with multiple option in React?

Sometimes, we want to retrieve value from select with multiple option in React.

in this article, we’ll look at how to retrieve value from select with multiple option in React.

How to retrieve value from select with multiple option in React?

To retrieve value from select with multiple option in React, we can get the selected options from the element’s selectedOptions property.

For instance, we write

const Comp = () => {
  const [arrayOfOptionValues, setArrayOfOptionValues] = useState();

  const onSelectChange = (e) => {
    const values = [...e.target.selectedOptions].map((opt) => opt.value);
    setArrayOfOptionValues(values);
  };

  //...

  return (
    <select multiple value={arrayOfOptionValues} onChange={handleChange}>
      <option value={1}>First option</option>
      <option value={2}>Second option</option>
      <option value={3}>Third option</option>
    </select>
  );
};

to define the arrayOfOptionValues state with the useState hook.

Then we add the onSelectChange function that gets the selected options from e.target.selectedOptions.

We then spread that into an array and call map to get the values.

Next, we call setArrayOfOptionValues to set the values as the value of arrayOfOptionValues.

Finally, we add a select element that takes multiple values and set the value prop to arrayOfOptionValues and the onChange prop to the handleChange function.

Then then selected options are set as the value of arrayOfOptionValues when they change.

Conclusion

To retrieve value from select with multiple option in React, we can get the selected options from the element’s selectedOptions property.