//index.html

Shipping form

<br>

<input type="number" id="cost" placeholder="Cost">
<div id="costErr" style="color:red;"></div>

<br>

<input type="number" id="Acost" placeholder="Additional Cost">
<div id="addCostErr" style="color:red;"></div>

<br>

<button id="addbtn">Add</button>
<button id="resetbtn">Reset</button>

<table border="1">
    <thead id="tableHead">
        <tr>
            <th>Shipping Method</th>
            <th>Cost</th>
            <th>Additional Cost</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="myList"></tbody>
    </table>

    <button id="submitbtn">Submit</button>



    <script src="index.js"></script>
</body>

///index.js

let shippingmethod = document.getElementById("shipping"); let addbtn = document.getElementById("addbtn"); let resetbtn = document.getElementById("resetbtn"); let submitbtn = document.getElementById("submitbtn"); let list = document.getElementById("myList");

let shipErr = document.getElementById("shipErr"); let costErr = document.getElementById("costErr"); let addCostErr = document.getElementById("addCostErr");

const MAX_COST = 10000; const MAX_ADD_COST = MAX_COST * 0.10;

// dropdown options added dynamically let shippingOptions = ["USPS", "Pickup", "Fedx", "Other"];

// load dropdown on page load window.onload = function () { loadDropdown(); rebuildList(); };

// load dropdown dynamically function loadDropdown() { shippingmethod.innerHTML = "";

let defaultOpt = document.createElement("option");
defaultOpt.text = "Choose option";
defaultOpt.value = "";
shippingmethod.add(defaultOpt);

shippingOptions.forEach(opt => {
    let option = document.createElement("option");
    option.text = opt;
    option.value = opt;
    shippingmethod.add(option);
});

}

// store list let items = JSON.parse(localStorage.getItem("items")) || [];

// ADD BUTTON addbtn.addEventListener("click", function () {

clearErrors();

let cost = document.getElementById("cost").value;
let ADDcost = document.getElementById("Acost").value;
let valid = true;

// shipping validation
if (shippingmethod.value === "") {
    shipErr.innerText = "Please select shipping method";
    valid = false;
}

// cost validation
if (cost === "") {
    costErr.innerText = "Cost is required";
    valid = false;
} else if (cost <= 0 || cost > MAX_COST) {
    costErr.innerText = "Cost must be between 1 and 10000";
    valid = false;
}

// additional cost validation
if (ADDcost !== "" && ADDcost > MAX_ADD_COST) {
    addCostErr.innerText = "Additional cost cannot exceed 1000";
    valid = false;
}

if (!valid) return;

let obj = {
    method: shippingmethod.value,
    cost: Number(cost).toFixed(2),
    addCost: ADDcost ? Number(ADDcost).toFixed(2) : ""
};

items.push(obj);
localStorage.setItem("items", JSON.stringify(items));

shippingmethod.remove(shippingmethod.selectedIndex);
rebuildList();

document.getElementById("cost").value = "";
document.getElementById("Acost").value = "";

});

// rebuild table list function rebuildList() { list.innerHTML = "";

let tableHead = document.getElementById("tableHead");
tableHead.style.display = items.length === 0 ? "none" : "";

items.forEach((item, i) => {
    let tr = document.createElement("tr");

    tr.innerHTML = `
        <td>${item.method}</td>
        <td>$${item.cost}</td>
        <td>${item.addCost ? "$" + item.addCost : "-"}</td>
        <td><button>Remove</button></td>
    `;

    tr.querySelector("button").addEventListener("click", function () {
        items.splice(i, 1);
        localStorage.setItem("items", JSON.stringify(items));
        loadDropdown();
        rebuildList();
    });

    list.appendChild(tr);
});

}

// reset resetbtn.addEventListener("click", function () { items = []; localStorage.removeItem("items"); loadDropdown(); rebuildList(); clearErrors(); });

// submit validation submitbtn.addEventListener("click", function () { clearErrors(); if (items.length === 0) { shipErr.innerText = "Please add at least one record before submit"; return; } window.location.href = "summary.html"; });

// helper function clearErrors() { shipErr.innerText = ""; costErr.innerText = ""; addCostErr.innerText = ""; }

///summary.html

<h2>Shipping Summary</h2>

<table border="1">
<thead id="summaryHead">
    <tr>
        <th>Shipping Method</th>
        <th>Cost</th>
        <th>Additional Cost</th>
    </tr>
</thead>
<tbody id="summaryList">
    <!-- rows added dynamically -->
</tbody>