combine the following code to make it as one: Html:<!DOCTYPE html>
<html lang="en">

<head>
  <title>Steel Construction Cost Estimate</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <div class="form-container">
    <form id="fd88d2c" onsubmit="return calculateCost()">

      <fieldset>
        <label for="name-764" class="required">Name:</label>
        <input type="text" id="name-764" name="name-764" required>

        <label for="email-254" class="required">Email:</label>
        <input type="email" id="email-254" name="email-254" required>

        <label for="tel-784" class="required">Telephone Number:</label>
        <input type="tel" id="tel-784" name="tel-784" required>
      </fieldset>

      <div class="radio-group">
        <label>Select Material:</label>
        <label><input type="radio" name="material" value="chromadek" checked> Chromadek</label>
        <label><input type="radio" name="material" value="galvanized"> Galvanized</label>
      </div>

      <div class="dropdown-group">
        <label for="lengthInput">Enter Length (in meters):</label>
        <input type="number" id="lengthInput" name="length" min="5" max="100" oninput="checkFormValidity()">
      </div>

      <div class="dropdown-group">
        <label for="widthDropdown">Select Width (in meters):</label>
        <select id="widthDropdown" name="width" onchange="checkFormValidity()">
                <option value="">Select Width</option>
                <option value="40">40m</option>
                <option value="35">35m</option>
                <option value="30">30m</option>
                <option value="25">25m</option>
                <option value="20">20m</option>
                <option value="18">18m</option>
                <option value="15">15m</option>
                <option value="12">12m</option>
            </select>
      </div>

      <div class="dropdown-group">
        <label for="sourceDropdown">Where did you hear about us?</label>
        <select id="sourceDropdown" name="source" onchange="checkFormValidity()">
                <option value="">Select Source</option>
                <option value="website">Website</option>
                <option value="referral">Referral from someone</option>
                <option value="onsite">Saw us on site</option>
                <option value="linkedin">LinkedIn</option>
                <option value="facebook">Facebook</option>
                <option value="instagram">Instagram</option>
                <option value="vehicle">Vehicle branding</option>
                <option value="other">Other</option>
            </select>
      </div>

      <button type="button" id="calculateButton" onclick="calculateCost()" disabled>Calculate Cost</button>
      <input type="hidden" id="hiddenCost" name="hiddenCost" value="">
    </form>

    <div id="estimatedCost"></div>
  </div>

  <script src=“scripts.js”></script>
</body>

</html> , css: .form-container {
  max-width: 800px;
  margin: auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label,
input,
button,
select {
  display: block;
  padding: 5px;
  margin: 3px 0;
}

.dropdown-group {
  margin-bottom: 5px;
}

.dropdown-group label {
  display: block;
}

button {
    background-color: orangered;
    color: white;
    cursor: pointer;
}

label.required::after {
    content: "";
    color: orangered;
    margin-left: 5px;
}

#estimatedCost {
    font-weight: bold;
    margin-top: 5px;
}

.radio-group label {
    display: inline-block;
    margin-right: 10px;
}

.radio-group input[type=“radio”] {
    display: inline-block;
    margin-right: 5px; 
} , javascript: var pricing = {
    'chromadek': {
        '5 - 20': {'40': 1091, '35': 1201, '30': 1068, '25': 1022, '20': 944, '18': 871, '15': 799, '12': 1010 },
        '21 - 30': {'40': 1057, '35': 1167, '30': 1029, '25': 984, '20': 913, '18': 844, '15': 778, '12': 983 },
        '31 - 40': {'40': 1018, '35': 1127, '30': 985, '25': 942, '20': 877, '18': 814, '15': 754, '12': 952 },
        '41 - 50': {'40': 996, '35': 1104, '30': 960, '25': 917, '20': 857, '18': 796, '15': 741, '12': 935 },
        '51 - 60': {'40': 983, '35': 1090, '30': 945, '25': 902, '20': 845, '18': 786, '15': 733, '12': 924 },
        '61 - 70': {'40': 973, '35': 1081, '30': 934, '25': 892, '20': 836, '18': 778, '15': 727, '12': 917 },
        '71 - 80': {'40': 966, '35': 1073, '30': 926, '25': 884, '20': 830, '18': 773, '15': 723, '12': 911 },
        '81 - 90': {'40': 961, '35': 1068, '30': 920, '25': 878, '20': 825, '18': 769, '15': 720, '12': 907 },
        '91 - 100': {'40': 951, '35': 1064, '30': 915, '25': 874, '20': 821, '18': 765, '15': 717, '12': 903 }
},
    'galvanized': {
        '5 - 20': {'40': 1029, '35': 1140, '30': 1006, '25': 960, '20': 882, '18': 807, '15': 734, '12': 930 },
        '21 - 30': {'40': 995, '35': 1105, '30': 968, '25': 922, '20': 851, '18': 781, '15': 713, '12': 903 },
        '31 - 40': {'40': 957, '35': 1066, '30': 925, '25': 880, '20': 816, '18': 751, '15': 690, '12': 873 },
        '41 - 50': {'40': 935, '35': 1044, '30': 900, '25': 856, '20': 796, '18': 734, '15': 678, '12': 856 },
        '51 - 60': {'40': 922, '35': 1030, '30': 885, '25': 841, '20': 783, '18': 724, '15': 670, '12': 845 },
        '61 - 70': {'40': 912, '35': 1020, '30': 874, '25': 831, '20': 775, '18': 716, '15': 664, '12': 838 },
        '71 - 80': {'40': 905, '35': 1013, '30': 866, '25': 823, '20': 768, '18': 711, '15': 660, '12': 832 },
        '81 - 90': {'40': 900, '35': 1008, '30': 860, '25': 818, '20': 764, '18': 707, '15': 657, '12': 828 },
        '91 - 100': {'40': 896, '35': 1004, '30': 855, '25': 813, '20': 760, '18': 704, '15': 654, '12': 825 }
}
};

function checkFormValidity() {
  var name = document.getElementById('name - 764').value;
  var email = document.getElementById('email - 254').value;
  var tel = document.getElementById('tel - 784').value;
  var length = document.getElementById('lengthInput').value;
  var width = document.getElementById('widthDropdown').value;
  var source = document.getElementById('sourceDropdown').value;

  var isValid = name !== '' && email !== '' && tel !== '' && length !== '' && width !== '' && source !== '';

  document.getElementById('calculateButton').disabled = !isValid;
}

function calculateCost() {
  var material = document.querySelector('input[name =“material”]: checked').value;
  var length = document.getElementById('lengthInput').value;
  var width = document.getElementById('widthDropdown').value;

  if (length === "" || width === "") {
    document.getElementById ("estimatedCost").innerHTML = "Please enter length and select width.";
    return false;
  }

  var totalCost = calculateLengthWidthCost(length, width, material);

  document.getElementById('hiddenCost').value = totalCost.toFixed(2);
  document.getElementById("estimatedCost").innerHTML = "Estimated Total Cost: R " + totalCost.toFixed(2);
  return false;
}

function calculateLengthWidthCost(length, width, material) {
  var totalLength = parseInt(length);
  var widthCost = parseInt(width);

  var lengthRange = getLengthRange(totalLength);
  var costPerSquareMeter = pricing[material][lengthRange][widthCost.toString()];

  return totalLength * widthCost * costPerSquareMeter;
}

function getLengthRange(length) {
  if (length >= 5 && length <= 20) {
    return '5 - 20';
  } else if (length >= 21 && length <= 30) {
    return '21 - 30';
  } else if (length >= 31 && length <= 40) {
    return '31 - 40';
  } else if (length >= 41 && length <= 50) {
    return '41 - 50';
  } else if (length >= 51 && length <= 60) {
    return '51 - 60';
  } else if (length >= 61 && length <= 70) {
    return '61 - 70';
  } else if (length >= 71 && length <= 80) {
    return '71 - 80';
  } else if (length >= 81 && length <= 90) {
    return '81 - 90';
  } else if (length >= 91 && length <= 100) {
    return '91 - 100';
  } else {
    return '';
  }
}