<h2>Box Shadow Visualizer</h2>

<div class="shadow-element"></div>

<button id="addShadow">Add Shadow</button>
<div id="shadowList"></div>
<div id="fullShadowValue" style="margin-top: 20px;">Full Box-Shadow Value: none</div>

@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

body {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.shadow-element {
  margin-inline: auto;
  border: 2px solid black;
  height: 200px;
  width: 200px;
}

document.addEventListener("DOMContentLoaded", function () {
  let shadows = []; // Array to hold all shadow configurations

  const shadowList = document.getElementById("shadowList"); // Container for shadow inputs
  const addShadowButton = document.getElementById("addShadow"); // Button to add a new shadow
  const shadowElement = document.querySelector(".shadow-element");
  const fullShadowValue = document.getElementById("fullShadowValue"); // Display full boxShadow value

  // Function to create shadow input elements
  function createShadowInputs(index) {
    const container = document.createElement("div");
    container.className = "shadow-controls";
    container.innerHTML = `
      <div>Shadow ${index + 1}</div>
      <label>Offset X: <input type="range" id="offsetX${index}" min="-100" max="100" value="0"><span id="offsetXValue${index}">0px</span></label>
      <label>Offset Y: <input type="range" id="offsetY${index}" min="-100" max="100" value="0"><span id="offsetYValue${index}">0px</span></label>
      <label>Blur Radius: <input type="range" id="blurRadius${index}" min="0" max="100" value="10"><span id="blurRadiusValue${index}">10px</span></label>
      <label>Spread Radius: <input type="range" id="spreadRadius${index}" min="0" max="100" value="5"><span id="spreadRadiusValue${index}">5px</span></label>
      <label>Color: <input type="color" id="shadowColor${index}" value="#000000"></label>
      <label>Opacity: <input type="range" id="shadowOpacity${index}" min="0" max="1" step="0.1" value="0.5"><span id="shadowOpacityValue${index}">0.5</span></label>
      <button onclick="removeShadow(${index})">Remove</button>
    `;
    shadowList.appendChild(container);

    const inputs = container.querySelectorAll('input');
    inputs.forEach(input => input.addEventListener("input", () => {
      updateBoxShadow();
      displayIndividualValues(index);
    }));
  }

  // Function to display individual shadow values as they change
  function displayIndividualValues(index) {
    document.getElementById(`offsetXValue${index}`).textContent = `${document.getElementById(`offsetX${index}`).value}px`;
    document.getElementById(`offsetYValue${index}`).textContent = `${document.getElementById(`offsetY${index}`).value}px`;
    document.getElementById(`blurRadiusValue${index}`).textContent = `${document.getElementById(`blurRadius${index}`).value}px`;
    document.getElementById(`spreadRadiusValue${index}`).textContent = `${document.getElementById(`spreadRadius${index}`).value}px`;
    document.getElementById(`shadowOpacityValue${index}`).textContent = document.getElementById(`shadowOpacity${index}`).value;
  }

  // Function to update box shadow
  function updateBoxShadow() {
    shadows = [];
    Array.from(shadowList.children).forEach((container, index) => {
      const offsetX = document.getElementById(`offsetX${index}`).value;
      const offsetY = document.getElementById(`offsetY${index}`).value;
      const blurRadius = document.getElementById(`blurRadius${index}`).value;
      const spreadRadius = document.getElementById(`spreadRadius${index}`).value;
      const shadowColor = document.getElementById(`shadowColor${index}`).value;
      const shadowOpacity = document.getElementById(`shadowOpacity${index}`).value;

      const rgbaColor = hexToRGBA(shadowColor, shadowOpacity);
      shadows.push(`${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px rgba(${rgbaColor})`);
    });

    shadowElement.style.boxShadow = shadows.join(", ");
    fullShadowValue.textContent = `Full Box-Shadow Value: ${shadowElement.style.boxShadow}`;
  }

  // Convert hex to RGBA
  function hexToRGBA(hex, opacity) {
    let r = parseInt(hex.slice(1, 3), 16);
    let g = parseInt(hex.slice(3, 5), 16);
    let b = parseInt(hex.slice(5, 7), 16);
    return `${r}, ${g}, ${b}, ${opacity}`;
  }

  // Function to add a new shadow configuration
  addShadowButton.addEventListener("click", () => {
    createShadowInputs(shadowList.children.length);
    updateBoxShadow();
  });

  // Function to remove a shadow
  window.removeShadow = function(index) {
    shadowList.removeChild(shadowList.children[index]);
    updateBoxShadow();
  }

  // Initialize with one shadow
  createShadowInputs(0);
});