How to use an icon library to create an animated battery icon
Tags: javascript, tutorial, beginners, codenewbie
Published: 2023-05-07 10:05:05

First import the [Font Awesome icon library](https://fontawesome.com/) 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 = ["&#xf244;", "&#xf243;", "&#xf242;", "&#xf241;", "&#xf240;"];
      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 `batteryLevels`array.

 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 
`batteryLevels`array.
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 = ["&#xf244;", "&#xf243;", "&#xf242;", "&#xf241;", "&#xf240;"];`

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:
* `&#xf244;`    Full battery icon
* `&#xf243;`    4/5 battery icon
* `&#xf242;`    3/5 battery icon
* `&#xf241;`    2/5 battery icon
* `&#xf240;`    1/5 battery icon

the first element of the array is 
`&#xf244;`, 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 
`batteryLevels`array.

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