static/script.js

document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("sentiment-form");
  const textArea = document.getElementById("text-input");
  const btn = document.getElementById("analyze-btn");
  const btnText = btn.querySelector(".btn-text");
  const spinner = btn.querySelector(".spinner");

  const resultContainer = document.getElementById("result-container");
  const sentimentValue = document.getElementById("sentiment-value");
  const confidenceBar = document.getElementById("confidence-bar");
  const confidenceText = document.getElementById("confidence-text");
  const errorMsg = document.getElementById("error-message");

  // Auto-resize textarea
  textArea.addEventListener("input", function () {
    this.style.height = "auto";
    this.style.height = this.scrollHeight + "px";
  });

  form.addEventListener("submit", async (e) => {
    e.preventDefault();

    const text = textArea.value.trim();
    if (!text) {
      showError("Please enter some text to analyze.");
      return;
    }

    // UI Reset
    hideError();
    setLoading(true);
    resultContainer.classList.add("hidden");

    try {
      const response = await fetch("/analyze", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ text }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "An error occurred during analysis.");
      }

      // Animate results
      displayResult(data.sentiment, data.confidence);
    } catch (error) {
      showError(error.message);
    } finally {
      setLoading(false);
    }
  });

  function setLoading(isLoading) {
    if (isLoading) {
      btn.disabled = true;
      btnText.style.opacity = "0";
      spinner.classList.remove("hidden");
    } else {
      btn.disabled = false;
      btnText.style.opacity = "1";
      spinner.classList.add("hidden");
    }
  }

  function showError(message) {
    errorMsg.textContent = message;
    errorMsg.classList.remove("hidden");
  }

  function hideError() {
    errorMsg.textContent = "";
    errorMsg.classList.add("hidden");
  }

  function displayResult(sentiment, confidence) {
    // Reset old classes
    sentimentValue.className = "metric-value";
    confidenceBar.className = "progress-bar-fill";
    confidenceBar.style.width = "0%";

    // Show container
    resultContainer.classList.remove("hidden");

    // Setup new values
    sentimentValue.textContent = sentiment;

    const confPercentage = Math.round(confidence * 100);
    confidenceText.textContent = confPercentage + "%";

    // Force reflow for animation
    void confidenceBar.offsetWidth;

    // Add color classes
    if (sentiment.toLowerCase() === "positive") {
      sentimentValue.classList.add("positive");
      confidenceBar.classList.add("positive");
    } else {
      sentimentValue.classList.add("negative");
      confidenceBar.classList.add("negative");
    }

    // Animate progress bar
    setTimeout(() => {
      confidenceBar.style.width = Math.max(confPercentage, 5) + "%";
    }, 50);
  }
});