Author: John Au-Yeung

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

Categories
React Answers

How to use setInterval in a React app?

Labrador retriever puppy walking on green grass

Sometimes, we want to use setInterval in a React app.

In this article, we’ll look at how to use setInterval in a React app.

How to use setInterval in a React app?

To use setInterval in a React app, we call setInterval in the useEffect hook callback.

For instance, we write

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Clock = () => {
  const [currentCount, setCount] = useState(10);
  const timer = () => setCount(currentCount - 1);

  useEffect(() => {
    if (currentCount <= 0) {
      return;
    }
    const id = setInterval(timer, 1000);
    return () => clearInterval(id);
  }, [currentCount]);

  return <div>{currentCount}</div>;
};

const App = () => <Clock />;

to call useEffect with a callback that calls setInterval to run the timer function every 1000 milliseconds.

We return a function that calls clearInterval with the timer id to clear the timer when currentCount changes.

Conclusion

To use setInterval in a React app, we call setInterval in the useEffect hook callback.

Categories
JavaScript Answers

How to set background color of HTML element using CSS properties in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to set background color of HTML element using CSS properties in JavaScript.

In this article, we’ll look at how to set background color of HTML element using CSS properties in JavaScript.

How to set background color of HTML element using CSS properties in JavaScript?

To set background color of HTML element using CSS properties in JavaScript, we can set the backgroundColor style.

For instance, we write

const setColor = (element, color) => {
  element.style.backgroundColor = color;
};

const el = document.getElementById("elementId");
setColor(el, "green");

to create the setColor function.

In it, we set the lement.style.backgroundColor property to color to set the background color to color.

Then we select the element we want to set the background color for with getElementById.

And we call setColor with it and 'green' to set its background color to green.

Conclusion

To set background color of HTML element using CSS properties in JavaScript, we can set the backgroundColor style.

Categories
JavaScript Answers

How to create an accurate timer in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to create an accurate timer in JavaScript.

In this article, we’ll look at how to create an accurate timer in JavaScript.

How to create an accurate timer in JavaScript?

To create an accurate timer in JavaScript, we should get the time from the Date object.

For instance, we write

setInterval(() => {
  console.log(new Date().toUTCString());
}, 1000);

to call setInterval with a callback that gets the latest datetime with the Date constructor.

And we call toUTCString to return a human readable datetime string.

1000 is the 2nd argument so the callback runs about every 1000 milliseconds.

Conclusion

To create an accurate timer in JavaScript, we should get the time from the Date object.

Categories
JavaScript Answers

How to detect Android phone via JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to detect Android phone via JavaScript.

In this article, we’ll look at how to detect Android phone via JavaScript.

How to detect Android phone via JavaScript?

To detect Android phone via JavaScript, we can check if the user agent has 'android' in it.

For instance, we write

const ua = navigator.userAgent.toLowerCase();
const isAndroid = ua.indexOf("android") > -1;
if (isAndroid) {
  //...
}

to get the user agent with navigator.userAgent.

Then we convert it to lower case with toLowerCase.

Next we check if 'android' is in the user agent string with indexof.

Conclusion

To detect Android phone via JavaScript, we can check if the user agent has 'android' in it.

Categories
JavaScript Answers

How to create table using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to create table using JavaScript.

In this article, we’ll look at how to create table using JavaScript.

How to create table using JavaScript?

To create table using JavaScript, we can use the insertRow and insertCell methods.

For instance, we write

const createTable = (row, col) => {
  let body = document.body;
  let tbl = document.createElement("table");

  for (let i = 0; i < row; i++) {
    let tr = tbl.insertRow();
    for (let j = 0; j < col; j++) {
      let td = tr.insertCell();
      td.appendChild(document.createTextNode(`${i},${j}`));
      td.style.border = "1px solid black";
    }
  }
  body.appendChild(tbl);
};

createTable(5, 5);

to create the table element with createElement.

Then we create a nested for loop to create the rows and cells and put them in the table.

We call tbl.insertRow to insert a tr element.

And then we call tr.insertCell to insert a td element into the tr element.

Then we call createTextNode to create a text node and call td.appendChild to append the text node as its child.

Finally, we call body.appendChild to append the table as the child of the body.

Conclusion

To create table using JavaScript, we can use the insertRow and insertCell methods.