Micro Coding Exercise Using CSS Grid, Web API and Vanilla Javascript

This afternoon I came up with a useful coding challenge after spending some time reading about Web APIs – make a battery status using CSS grid, Web APIs and vanilla javascript. I created this small pen.

Use the slider to change the battery status

The idea is to use a grid with fours rows, each row represents a quarter of battery life. Using the slider, the user can change the battery capacity. Some div are removed from the grid when a certain threshold is reached.

See the Pen Battery Status VanillaJS by Surya S (@suryast) on CodePen.

Please let me know if you know of a better way to refactor the javascript component of the pen.

// Set consts
const slider = document.getElementById("batteryRange");
const output = document.getElementById("batteryPercentage");
const children = document.querySelector(".grid").children

// Get value of slider
output.innerHTML = slider.value;

// Add battery percentage status
window.onload = () => {
  output.innerHTML = "50%";
} 

// Update battery percentage
slider.oninput = function() {
  const formattedOutput = this.value.toString() + "%"
  output.innerHTML = formattedOutput;
  checkBattery();
}

function checkBattery() {
  switch(true){
    case ( slider.value == 100 ):
      setToOneHundred();
      break;
    case ( slider.value > 75 ):
      setToOneHundred();
      break;
    case ( slider.value == 75 ):
      setToSeventyFive();
      break;
    case ( slider.value > 50 && slider.value < 75):
      setToSeventyFive();
      break;
    case ( slider.value == 50 ):
      setToFifty();
      break;
    case ( slider.value > 25 && slider.value < 50 ):
      setToFifty();
      break;
    case ( slider.value > 1 && slider.value < 25 ):
      setToTwentyFive();
      break;
    case ( slider.value < 1 ):
      setToZero();
      break;
    default:
      return;
  }
}

// Setters
setToZero = () => {
  for (let i = 0; i < children.length; i++) {
    children[i].className = "hidden";
  }
}

setToTwentyFive = () => {
  for (let i = 0; i < children.length-1 ; i++) {
    children[i].className = "hidden";
  }
  children[3].className = "grid-item_darkred";
}

setToFifty = () => {
  for (let i = 0; i < children.length-1 ; i++) {
    children[i].className = "hidden";
  }
  for (let i = 2; i < children.length; i++) {
    children[i].className = "grid-item_orangered";
  }
}

setToSeventyFive = () => {  
  children[0].className = "hidden";
  for (let i = 1; i < children.length; i++) {
    children[i].className = "grid-item_green";
  }
}

setToOneHundred = () => {
  for (let i = 0; i < children.length; i++) {
    children[i].className = "grid-item_darkgreen";
  }
}

// Set consts
const slider = document.getElementById("batteryRange");
const output = document.getElementById("batteryPercentage");
const children = document.querySelector(".grid").children;
const childrenArray = Array.from(children);

// Get value of slider
output.innerHTML = slider.value;

// Add battery percentage status
window.onload = () => {
  output.innerHTML = "50%";
};

// Update battery percentage
slider.oninput = function() {
  const formattedOutput = this.value.toString() + "%";
  output.innerHTML = formattedOutput;
  checkBattery();
};

function checkBattery() {
  switch (true) {
    case slider.value > 75:
      childrenArray.map(item => (item.className = "grid-item_darkgreen"));
      break;
    case slider.value > 50 && slider.value <= 75:
      children[0].className = "hidden";

      childrenArray
        .filter(item => childrenArray.indexOf(item) > 0)
        .map(item => {
          item.className = "grid-item_green";
        });
      break;
    case slider.value > 25 && slider.value <= 50:
      childrenArray
        .filter(item => childrenArray.indexOf(item) < 2)
        .map(item => {
          item.className = "hidden";
        });

      childrenArray
        .filter(item => childrenArray.indexOf(item) > 1)
        .map(item => {
          item.className = "grid-item_orangered";
        });
      break;
    case slider.value >= 1 && slider.value < 25:
      childrenArray
        .filter(item => childrenArray.indexOf(item) < 3)
        .map(item => {
          item.className = "hidden";
        });
      children[3].className = "grid-item_darkred";
      break;
    case slider.value < 1:
      childrenArray.map(item => (item.className = "hidden"));
      break;
    default:
      return;
  }
}