index.html

Shipping form

USPS Pickup Fedx Other

        <br>
        <input type ="number" id="cost" placeholder="Cost" required>
        <br>
        <input type ="number" id="Acost" placeholder="Additional Cost" >
        <br>
   
        <button id="addbtn">Add</button>

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

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

    <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");

// store original dropdown order let originalOptions = Array.from(shippingmethod.options).map((opt, index) => { return { text: opt.text, value: opt.value, index: index }; });

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

// restore on page load window.onload = function () { rebuildDropdown(); rebuildList(); };

addbtn.addEventListener('click', function () {

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

if (cost === "" || shippingmethod.selectedIndex === -1) {
    console.log("shipping method and cost are compulsory");
    return;
}

cost = parseFloat(cost);
if (cost <= 0) {
    console.log("cost cant be 0 or less than 0");
    return;
}

if (ADDcost !== "" && parseFloat(ADDcost) <= 0) {
    console.log("Additional cost cant be less than or equal to 0");
    return;
}

let selectedOption = shippingmethod.options[shippingmethod.selectedIndex];
let original = originalOptions.find(o => o.value === selectedOption.value);

// save item
let obj = {
    method: selectedOption.text,
    value: selectedOption.value,
    cost: cost.toFixed(2),
    addCost: ADDcost ? parseFloat(ADDcost).toFixed(2) : "",
    index: original.index
};

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

// remove from dropdown
shippingmethod.remove(shippingmethod.selectedIndex);

rebuildList();

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

});

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

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

    let text = item.method + " $" + item.cost;
    if (item.addCost !== "") {
        text += " ($" + item.addCost + ")";
    }

    li.appendChild(document.createTextNode(text + " "));

    let button = document.createElement("button");
    button.innerText = "Remove";

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

    li.appendChild(button);
    list.appendChild(li);
});

}

// rebuild dropdown (keeps original order) function rebuildDropdown() { shippingmethod.innerHTML = "";

originalOptions.forEach(opt => {
    let exists = items.some(i => i.value === opt.value);
    if (!exists) {
        let option = document.createElement("option");
        option.text = opt.text;
        option.value = opt.value;
        shippingmethod.add(option);
    }
});

}

// reset button resetbtn.addEventListener("click", function () { items = []; localStorage.removeItem("items"); rebuildDropdown(); rebuildList(); document.getElementById("cost").value = ""; document.getElementById("Acost").value = ""; });

// submit button submitbtn.addEventListener("click", function () { if (items.length === 0) { console.log("no items to submit"); return; } window.location.href = "summary.html"; });

summary.html

<h2>Shipping Summary</h2>

<ul id="summaryList"></ul>

<button id="backbtn">Go Back</button>

<!-- External JS file -->
<script src="summary.js"></script>

summary.js let list = document.getElementById("summaryList"); let backbtn = document.getElementById("backbtn");

// get stored data let data = JSON.parse(localStorage.getItem("items")) || [];

// build list for (let i = 0; i < data.length; i++) {

let li = document.createElement("li");

let text = data[i].method + " $" + data[i].cost;

if (data[i].addCost !== "") {
    text += " ($" + data[i].addCost + ")";
}

li.innerText = text;
list.appendChild(li);

}

// go back button backbtn.addEventListener("click", function () { window.location.href = "index.html"; });