How to use an icon library to create an animated battery icon

First import the Font Awesome icon library and sets the font size of the battery icon to 48 pixels.

Then use this JavaScript code

const batteryIcon = document.getElementById("battery-icon");
      const batteryLevels = ["", "", "", "", ""];
      let currentLevel = 0;

      function chargeBattery() {
        batteryIcon.innerHTML = batteryLevels[currentLevel];
        currentLevel = (currentLevel + 1) % batteryLevels.length;
      }

      chargeBattery();
      setInterval(chargeBattery, 1000);

The JavaScript code creates an array const batteryLevels of battery levels represented by Font Awesome icons.

It then defines a function called chargeBattery() that updates the battery icon with the next level in the array and cycles back to the beginning of the array when it reaches the end.

The chargeBattery() function is called once to initialize the battery icon and then repeatedly every second using the setInterval() method.

currentLevel = (currentLevel + 1) % batteryLevels.length;
This line of code updates the currentLevel variable to the next index in the batteryLevelsarray.

The % operator is the modulus operator, which returns the remainder of a division operation.

In this case, the modulus operator is used to ensure that the
currentLevel variable always stays within the bounds of the
batteryLevelsarray.
If currentLevel is equal to the last index of the array, the modulus operator will return 0, which will set currentLevel back to the first index of the array.

So, this line of code ensures that the chargeBattery() function cycles through the batteryLevels array indefinitely, without ever going out of bounds.

const batteryLevels = ["", "", "", "", ""];

This array contains five string elements.
Each string element represents a Font Awesome icon that corresponds to a different level of battery charge.

The strings are written using HTML character entities, which represent special characters that cannot be typed directly on a keyboard.
In this case, the character entities represent the Unicode values of the Font Awesome icons.

The battery icons are represented by the following Unicode values:

•  Full battery icon
•  4/5 battery icon
•  3/5 battery icon
•  2/5 battery icon
•  1/5 battery icon

the first element of the array is
, which represents the full battery icon.
The &#x prefix indicates that the following characters represent a hexadecimal value, and f244 is the hexadecimal value of the full battery icon in the Font Awesome icon set.

Similarly, the other elements of the array represent the 4/5, 3/5, 2/5, and 1/5 battery icons, respectively.
The chargeBattery() function uses these string elements to update the battery icon with the appropriate level of charge. The function sets the innerHTML property of the batteryIcon
element to the string element at the current index of the
batteryLevelsarray.

The currentLevel variable is used to keep track of the current index in the batteryLevels array. The line of code
currentLevel = (currentLevel + 1) % batteryLevels.length;
increments the currentLevel variable by 1 and uses the modulus operator %
to ensure that the variable stays within the bounds of the
batteryLevels array.

This allows the chargeBattery() function to cycle through the
batteryLevels array indefinitely, updating the battery icon with the appropriate level of charge every second.

Thats it, I hope you enjoyed