Plz help boss

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      text-align: center;
      margin-bottom: 150px; /* Adjust the margin as needed */
    }

    input[type="text"] {
      font-size: 5vw;
      padding: 10px;
      margin-bottom: 10px;
      text-align: center;
    }

    button {
      font-size: 5vw;
      padding: 10px;
      text-align: center;
      position: relative; /* Position relative for child elements */
      width: 150px; /* Set the desired width for the button */
    }

    #loading-container {
      position: relative;
      margin-top: 40px; /* Set the margin beneath the button */
    }

    #loading {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      height: 5px;
      background-color: #4CAF50; /* Green loading bar color */
      transition: width 5s; /* Transition duration */
    }
  </style>
</head>

<body>
  <div class="container">
    <div>
      <input type="text" id="postcodeInput" placeholder="Enter Post Code" onclick="this.placeholder=''"
        style="font-size: 5vw;">
      <br>
      <button onclick="runScript()" style="font-size: 5vw;">Search</button>
    </div>

    <div id="loading-container">
      <div id="loading"></div>
    </div>
  </div>

  <script src="pcFinder.js"></script>
  <script>
    function runScript() {
      console.log('Search button clicked');

      var inputValue = document.getElementById("postcodeInput").value;

      // Check if the input value is not empty
      if (inputValue.trim() === "") {
        console.log('Invalid input. Please enter a valid postcode.');
        alert("Please enter a valid postcode.");
        return;
      }

      console.log('Calling getPC with input:', inputValue);

      getPC(inputValue)
        .then(modifiedValue => {
          console.log('getPC resolved. Modified Value:', modifiedValue);

          // Update input field with modified value
          document.getElementById("postcodeInput").value = modifiedValue;

          // Show loading bar
          var loadingBar = document.getElementById("loading");
          loadingBar.style.display = "block";

          // Reset loading bar to 0% width
          loadingBar.style.width = "0%";

          // Gradually fill the loading bar over 5 seconds
          setTimeout(function () {
            loadingBar.style.width = "100%";
          }, 0); // Using a minimal delay for a smooth transition

          // Simulate processing logic (replace this with your actual logic)
          setTimeout(function () {
            // Hide loading bar
            loadingBar.style.display = "none";
            console.log('Processing completed');
          }, 5000); // Replace 5000 with the actual processing time in milliseconds
        })
        .catch(error => {
          console.error('Error:', error);
          console.log('Invalid Postcode');
          alert("Invalid Postcode");
        });
    }
  </script>
</body>

</html>


//Js file Code;


function getPC(inputValue) {
  var capitalizedValue = inputValue.toUpperCase();
  var url = 'http://api.postcodes.io/postcodes/' + inputValue + '/validate';

  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.text(); // Return the raw text for non-JSON responses
    })
    .then(data => {
      try {
        var jsonData = JSON.parse(data);
        console.log('API Response:', jsonData);

        if (jsonData && jsonData.status === 200 && jsonData.result !== undefined) {
          var modifiedValue = insertSpace(capitalizedValue, capitalizedValue.length - 3);
          console.log('Modified Value:', modifiedValue);
          return modifiedValue;
        } else {
          console.log('Invalid Postcode. Data:', jsonData);
          return 'Invalid Postcode';
        }
      } catch (parseError) {
        console.error('Error parsing JSON:', parseError);
        return 'Invalid Postcode';
      }
    })
    .catch(error => {
      console.error('Error during fetch:', error.message || error);
      throw error;  // Re-throw the error for further investigation
    });
}