Pc

<!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>
    async function runScript() {
      console.log('Search button clicked');

      var inputValue = document.getElementById("postcodeInput").value;
      console.log('Input value:', inputValue);
      // 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 Validate with input:', inputValue);

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

      try {
        isValid = await validate(inputValue);

        if (isValid) {
          try {
            const modifiedValue = await getPC(inputValue);

            console.log('getPC resolved. Modified Value:', modifiedValue);

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

            // 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");
            // Set the input box text to "Invalid postcode"
            document.getElementById("postcodeInput").value = "Invalid postcode";
          }
        } else {
          // Handle case where validation is false
          console.log('Invalid Postcode');
          alert("Invalid Postcode");
          // Set the input box text to "Invalid postcode"
          document.getElementById("postcodeInput").value = "Invalid postcode";
          // Hide loading bar
          loadingBar.style.display = "none";
        }
      } catch (error) {
        console.error('Error:', error);
      }
    }
  </script>
</body>

</html>


PcFinder.js

function getPC(inputValue) {
  var uppercasedValue = inputValue.toUpperCase();
  var modifiedValue = uppercasedValue.slice(0, -3) + ' ' + uppercasedValue.slice(-3);

  return modifiedValue;
}

function validate(inputValue) {
  // Remove spaces from the inputValue
  var inputValueStr = inputValue.replace(/\s/g, '');

  var url = 'https://api.postcodes.io/postcodes/' + inputValueStr + '/validate';
  console.log(url);

  var options = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    }
  };

  console.log('before fetch');

  return fetch(url, options)
    .then((response) => response.json())
    .then((data) => {
      var validation = data.result;
      console.log(validation);
      return validation; // return the validation result if needed
    });
}