<h2>Text Shadow Visualizer</h2>

<h2 class="shadow-element">Sample Text</h2>

<div id="cssDisplay" style="white-space: pre; margin: 20px; font-family: monospace;"></div>

<div id="shadowControlsContainer"></div>

<button id="addShadow">Add Shadow</button>
</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 {
  font-size: 12rem;
  text-transform: uppercase;
  margin-inline: auto;
  inline-size: fit-content;
  text-shadow: 6px 2px 2px oklch(0.42 0.22 269 / 0.25);
  margin-block: 0;
}

document.addEventListener("DOMContentLoaded", function () {
  const shadowControlsContainer = document.getElementById(
    "shadowControlsContainer"
  );
  const addShadowButton = document.getElementById("addShadow");
  const shadowElement = document.querySelector(".shadow-element");
  const cssDisplayElement = document.getElementById("cssDisplay");

  function createShadowControls() {
    const div = document.createElement("div");
    div.classList.add("shadow-controls");
    div.innerHTML = `
      <label>Offset X: <input type="range" class="offsetX" min="-50" max="50" value="0" step="1"> <span class="offsetXValue">0px</span></label><br>
      <label>Offset Y: <input type="range" class="offsetY" min="-50" max="50" value="0" step="1"> <span class="offsetYValue">0px</span></label><br>
      <label>Blur Radius: <input type="range" class="blurRadius" min="0" max="30" value="0" step="0.5"> <span class="blurRadiusValue">0px</span></label><br>
      <label>Shadow Color: <input type="color" class="shadowColor" value="#000000"></label><br>
      <label>Shadow Opacity: <input type="range" class="shadowOpacity" min="0" max="1" step="0.01" value=".25"> <span class="shadowOpacityValue">1</span></label><br>
      <button type="button" class="removeShadow">Remove</button>
    `;
    shadowControlsContainer.appendChild(div);

    div.querySelector(".removeShadow").addEventListener("click", function () {
      removeShadowControl(div);
    });

    const sliders = div.querySelectorAll(
      "input[type=range], input[type=color]"
    );
    sliders.forEach((slider) =>
      slider.addEventListener("input", () => updateShadows())
    );
  }

  function removeShadowControl(div) {
    shadowControlsContainer.removeChild(div);
    updateShadows();
  }

  function updateShadows() {
    const allShadows = Array.from(shadowControlsContainer.children).map(
      (control) => {
        const offsetX = control.querySelector(".offsetX").value;
        const offsetY = control.querySelector(".offsetY").value;
        const blurRadius = control.querySelector(".blurRadius").value;
        const shadowColor = control.querySelector(".shadowColor").value;
        const shadowOpacity = control.querySelector(".shadowOpacity").value;

        control.querySelector(".offsetXValue").textContent = `${offsetX}px`;
        control.querySelector(".offsetYValue").textContent = `${offsetY}px`;
        control.querySelector(
          ".blurRadiusValue"
        ).textContent = `${blurRadius}px`;
        control.querySelector(
          ".shadowOpacityValue"
        ).textContent = shadowOpacity;

        return `${offsetX}px ${offsetY}px ${blurRadius}px rgba(${hexToRGBA(
          shadowColor,
          shadowOpacity
        )})`;
      }
    );

    shadowElement.style.textShadow = allShadows.join(", ");
    cssDisplayElement.textContent = `text-shadow: ${allShadows.join(", ")};`;
  }

  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}`;
  }

  addShadowButton.addEventListener("click", createShadowControls);

  createShadowControls(); // Create the initial set of controls
});