Javascript Convert SGPA to Percentage

<!DOCTYPE html>
<html>

<body>
  <div class="container">
    <h3 class="title">SGPA to Percentage Converter</h3>
    <label class="input-label" for="sgpaInput">Enter SGPA:</label>
    <div class="input-container">
      <input class="sgpa-input" type="number" id="sgpaInput" step="0.01" placeholder="Enter your SGPA">
      <button class="calculate-button" onclick="convertToPercentage()">Calculate</button>
    </div>
    <p class="result-text" id="result"></p>
  </div>
  <script>
    function sgpaToPercentage(sgpa) {
      const percentage = (sgpa - 0.75) * 10;
      return percentage;
    }

function convertToPercentage() {
      const sgpaInput = document.getElementById("sgpaInput");
      const sgpa = parseFloat(sgpaInput.value);

if (isNaN(sgpa) || sgpa < 0 || sgpa > 10) {
        sgpaInput.value = '';
        document.getElementById("result").style.animation = "none"; // Remove animation on invalid input
        document.getElementById("result").textContent = "";
        alert("Please enter a valid SGPA between 0 and 10.");
        return;
      }

const percentage = sgpaToPercentage(sgpa);
      const resultElement = document.getElementById("result");

resultElement.style.animation = "fade-in-bounce 1s ease"; // Apply the combined animation to the result text
      resultElement.textContent = `SGPA ${sgpa} = ${percentage.toFixed(2)}%`;

// Show the padding after the button is clicked
      resultElement.style.padding = "10px 20px";
    }
  </script>
  <style>
    /* Global Styles */
    body {
      background-color: #f8f8f8;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

/* Container Styles */
    .container {
      background-color: #ffffff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      padding: 20px;
      max-width: 90%;
      margin: 0 auto;
    }

/* Title Styles */
    .title {
      color: #22075e;
      font-size: 20px;
      margin-bottom: 10px;
      text-align: center;
     background-color: #f9f0ff; /* Replace with your desired background color */
      border-radius: 5px; 
    padding: 10px 20px;
    }

/* Input Styles */
    .input-label {
      display: block;
      font-size: 16px;
      color: #120338;
      margin-bottom: 8px;
    }

.input-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.sgpa-input {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      border: 1px solid #120338;
      border-radius: 4px;
      box-sizing: border-box;
      margin-bottom: 12px;
    }

.calculate-button {
      background-color: #531dab;
      color: #ffffff;
      font-size: 16px;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
      width: 100%;
      font-weight: bold;
    text-transform: Uppercase;
  letter-spacing: 0.7px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

.calculate-button:hover {
      background-color: #722ed1;
    }

.result-text {
      /* Background and Box Styling */
      background-color: #fff0f6; /* Replace with your desired background color */
      border-radius: 4px; /* Adjust the value to control the rounded corners */
      padding: 0; /* Initially hide the padding */
      /* Text Styling */
      font-size: 20px;
      color: #9e1068;
      margin-top: 15px;
          margin-bottom: -2px;

text-align: center;
      font-weight: 700;

/* Animation */
      animation: none; /* Add a subtle fadeIn animation */

/* Text Shadow */

}
  </style>
</body>

</html>