Netbyzz

#A016
Lighting ON/OFF Opacity

HTML :

<!-- CODE = #A016 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NETBYZZ A016</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3niQHzllfpJWl9Iss3ArAI7HSP4wA-vWMv-oN6X5ZUfZBiM4g9p92gO4mxJwExsrpAtRPLfb8WyFnOpjKWwSShfW0ohM0i3eoocCEF4bg0ppj0QcdOPy77suge-W_u-Dde5wIM4YbO0RQ39uXwpRB5H8yJBir9MWjJ_fO3bMhOdOYrGzBlWmI223Urew/s1000/Netbyzz4.png" alt="Netbyzz Logo" class="Netbyzz">
  <div class="slide">
    <label for="dimmer">Dimmer</label>
    <input type="range" min="0.3" max="1.0" step="0.1" value="1.0" class="dimmer" id="dimmer">
  </div>
  <button class="lightSwitch">Lights On!</button>
  <div class="container">
    <hr>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS :

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000 linear-gradient(transparent 5%, rgba(0, 27, 102, 0.9));
    font-size: 12px;
    font-weight: lighter;
}

label {
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    padding: 5px 10px;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    padding: 25px;
    right: 50%;

    .dimmer {
        transition: all 0.3s linear;
        width: 100%;
        height: 5px;
        margin: 10px 0 0 0;
        opacity: 0.7;
        border-radius: 3px;
        border: 1px solid rgb(88, 136, 169);
        background: #464646;

        &:hover {
            opacity: 1;
        }

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 15px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
        }
    }
}

button {
    color: #000;
    transition: all 0.3s linear;
    border: 2px solid rgba(88, 136, 169, 1);
    background: #ddd;
    position: absolute;
    top: 25px;
    right: 25px;
    border-radius: 3px;
    cursor: pointer;

    &:hover {
        background: rgba(88, 136, 169, 0.5);
        color: #ddd;
    }
}

.Netbyzz {
    margin-left: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 50%;
    /* Adjust the size of the logo */
    opacity: 3%;
}

.container {
    width: 100%;
    height: 45px;
    display: flex;
    position: relative;
    flex-direction: vertical;
    justify-content: space-evenly;

    hr {
        position: absolute;
        top: -3px;
        height: 4px;
        width: 100%;
        background-color: #103718;
        border: none;
        border-bottom: 1px solid #547c55;
        margin: 0;
    }

    .light {
        position: relative;
        z-index: 0;
        width: 20px;
        border-radius: 100%;
        transition: all 0.4s linear;
        background-image: radial-gradient(circle closest-side,
                transparent,
                rgba(0, 0, 0, 0.3),
                rgba(0, 0, 0, 0.7) 180%);
        background-color: #000;
        box-shadow: 0 0 40px 0 rgba(255, 255, 255, 0.1),
            0 20px 80px 8px rgba(15, 240, 255, 0.5);

        &:before {
            content: "";
            position: absolute;
            background: #103718 radial-gradient(circle closest-side, transparent, rgba(0, 0, 0, 0.4) 100%);
            width: 16px;
            height: 8px;
            margin: 0;
            border-radius: 5px 5px 0 0;
            top: -1px;
            left: 9%;
        }
    }
}

JS :

const element = document.querySelector(".container"),
  // query all .light containers
  lights = document.querySelectorAll(".container .light"),
  dimmer = document.querySelector(".dimmer");

// Random colour generator
// #HEX
function getRandomHEX() {
  var letters = "0123456789ABCDEF",
    value = "#";
  for (var i = 0; i < 6; i++) {
    value += letters[Math.floor(Math.random() * 16)];
  }
  return value;
}

// RGBA()
function getRandomRGBA(alpha) {
  function numbers() {
    var x = Math.floor(Math.random() * 256);
    return x;
  }

  alpha = dimmer.value;

  // Change alpha of RGBA on dimmer change
  dimmer.oninput = () => {
    alpha.innerHTML = this.value;
  };

  return (
    "rgba(" +
    numbers() +
    ", " +
    numbers() +
    ", " +
    numbers() +
    ", " +
    alpha /*.toFixed(1)*/ +
    ")"
  );
}

function randomLights() {
  // random colours applied to each light
  lights.forEach(function (self) {
    let color = getRandomRGBA();
    self.style.backgroundColor = color;
    self.style["boxShadow"] =
      "0 0 0 rgba(255,255,255,0.2), 0 20px 100px 8px " +
      color +
      ", 0 5px 50px 0 #fff";
  });
}

// button with .lightSwitch
let lightsToggle = document.querySelector(".lightSwitch");

//lights on/off toggle button
lightsToggle.addEventListener("click", () => {
  element.classList.toggle("flash");

  if (lightsToggle.innerHTML === "Lights On!") {
    lightsToggle.innerHTML = "Lights Off.";
  } else {
    lightsToggle.innerHTML = "Lights On!";
  }

  // Trigger random lights at set interval
  let random = setInterval(() => {
    randomLights();

    if (element.classList.contains("flash") === false) {
      clearInterval(random);
      //remove inline styles from all lights
      for (i = 0; i < lights.length; i++) {
        lights[i].removeAttribute("style");
      }
    }
  }, 800);
});
 

Source Code