Calculate IT project estimate based on user inputs

by Harry Mu

HTML

<div style="font-family: Arial; padding: 20px; max-width: 500px; border: 1px solid #ccc;">
  <h2>Apex IT Scoping Tool</h2>
  
  <label><strong>1. Cloud Tier:</strong></label><br>
  <select id="cloudTier">
    <option value="1500">Public Cloud (£1500)</option>
    <option value="4000">Private Data Centre (£4000)</option>
    <option value="3000">Hybrid Cloud (£3000)</option>
  </select>
  <br><br>

  <label><strong>2. Cloud Storage (GB):</strong></label><br>
  <input type="number" id="storageGb" value="1000">
  <br><br>

  <label><strong>3. Current Internet Speed (Mbps):</strong></label><br>
  <input type="number" id="netSpeed" value="60">
  <br><br>

  <button onclick="calculateEstimate()" style="padding: 10px; background: #0078D4; color: white; border: none; cursor: pointer;">
    Calculate Estimate
  </button>

  <hr>

  <h3>Final Project Estimate: <span id="finalOutput">£0.00</span></h3>
  <p id="warningOutput" style="color: red;"></p>
</div>

JavaScript

function calculateEstimate() {
  // 1. Get the values the user typed into the HTML inputs
  let cloudCost = parseFloat(document.getElementById("cloudTier").value);
  let storage = parseFloat(document.getElementById("storageGb").value);
  let speed = parseFloat(document.getElementById("netSpeed").value);
  
  // 2. Set up our starting variables
  let grandTotal = 0.0;
  let warnings = "";
  
  // 3. Add the base cloud cost
  grandTotal = grandTotal + cloudCost;
  
  // 4. Calculate storage cost (5 pence per GB)
  let storageCost = storage * 0.05;
  grandTotal = grandTotal + storageCost;
  
  // 5. Use an IF statement to check internet speed
  if (speed < 100) {
    warnings = "WARNING: Speed is below 100 Mbps. £1200 Fibre upgrade added.";
    grandTotal = grandTotal + 1200;
  } else {
    warnings = "Speed is sufficient. No upgrade needed.";
  }
  
  // 6. Calculate 20% UK VAT
  let tax = grandTotal * 0.20;
  let finalPrice = grandTotal + tax;
  
  // 7. Push the final math back to the HTML screen for the user to see
  document.getElementById("finalOutput").innerText = "£" + finalPrice.toFixed(2);
  document.getElementById("warningOutput").innerText = warnings;
}