Order Select Items List:

Order Select Items List:

Output:

Items Order Form

Item Section Select Item Section 🔽 Item Section 1 Item Section 2 Item Section 3 Item Section 4 Items Select Item 🔽 Item 1 Item 2 Item 3 Item 4 Price Quantity

Code:

CSS:

HTML:

<div style="display: flex; align-items: center; justify-content: center; height: 100vh; gap: 20px; flex-wrap: wrap; padding: 20px; box-sizing: border-box;">

  

  <!-- 🔷 Left Section -->

  <div id="coustomer-details-input-div" style="flex: 1 1 350px; background-color: #e6ffff; border-radius: 20px; border: 1px solid rgb(185, 185, 186); box-shadow: 0px 2px 8px rgb(185, 185, 186); padding: 20px; max-width: 420px;">

    <div style="text-align: center;">

      <h2 style="font-size: 35px; margin: 0;">Items Order Form</h2>

    </div>

    <div id="selected-item-callbtn-id-div" style="margin-top: 20px; text-align: center;">

      <button id="selected-item-table-callbtn" style="background-color: deepskyblue; border-radius: 8px; border: none; box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 5px; color: white; cursor: pointer; font-size: 24px; padding: 8px 16px;">

        Selected Items

      </button>

    </div>

  

  <!-- 🔶 Right Section: Form -->

  

    <form id="coustomer-details-input-form" onsubmit="handleOrderForm(event)" style="background: rgb(255, 183, 153); border-radius: 16px; border: 1px solid rgb(185, 185, 186); box-shadow: 0px 2px 8px rgb(185, 185, 186); padding: 20px; box-sizing: border-box; width: 350;margin-top: 20px;">

      

      <!-- Item Section -->

      <label style="font-size: 20px; font-weight: bold;">Item Section</label>

      <select name="item-section" required style="width: 100%; padding: 8px 12px; margin: 10px 0 15px; font-size: 18px; font-weight: bold; border-radius: 8px; border: 1px solid #ccc;">

        <option disabled selected value="">Select Item Section 🔽</option>

        <optgroup label=" ── Salad ── ">

          <option value="Item-Section-1">Item Section 1</option>

          <option value="Item-Section-2">Item Section 2</option>

          <option value="Item-Section-3">Item Section 3</option>

          <option value="Item-Section-4">Item Section 4</option>

        </optgroup>

      </select>

      <!-- Items -->

      <label style="font-size: 20px; font-weight: bold;">Items</label>

      <select name="item-name" required style="width: 100%; padding: 8px 12px; margin: 10px 0 15px; font-size: 18px; font-weight: bold; border-radius: 8px; border: 1px solid #ccc;">

        <option disabled selected value="">Select Item 🔽</option>

        <optgroup label=" ── Salad ── ">

          <option value="Item-1">Item 1</option>

          <option value="Item-2">Item 2</option>

          <option value="Item-3">Item 3</option>

          <option value="Item-4">Item 4</option>

        </optgroup>

      </select>

      

      <!-- Price -->

      <label style="font-size: 20px; font-weight: bold;">Price</label>

      <input type="text" name="price" required style="width: 100%; padding: 8px 12px; margin-bottom: 15px; font-size: 18px; font-weight: bold; border-radius: 8px; border: 1px solid #ccc; box-sizing: border-box;" />

     <!-- Quantity -->

<label style="font-size: 20px; font-weight: bold; ">Quantity</label>

<div style="position: relative; width: 150px; height: 40px; margin-bottom: 15px; justify-content: center;">

  

  <!-- Quantity Input -->

  <input

    id="qty-input"

    type="number"

    name="quantity"

    value="1"

    min="1"

    style="

      width: 100%;

      height: 100%;

      text-align: center;

      font-size: 18px;

      font-weight: bold;

      border-radius: 8px;

      border: 1px solid #ccc;

      padding: 0 30px 0 30px; /* Space for buttons inside */

      box-sizing: border-box;

    "

  />

  <!-- Minus Button -->

  <button

    type="button"

    onclick="decrementQty()"

    style="

      position: absolute;

      left: 0;

      top: 0;

      width: 40px;

      height: 100%;

      font-size: 22px;

      font-weight: bold;

      border: 2px solid white;

      border-radius: 8px 0 0 8px;

      background-color: #ffc107;

      cursor: pointer;

    "

  >−</button>

  <!-- Plus Button -->

  <button

    type="button"

    onclick="incrementQty()"

    style="

      position: absolute;

      right: 0;

      top: 0;

      width: 40px;

      height: 100%;

      font-size: 22px;

      font-weight: bold;

      border: 2px solid white;

      border-radius: 0 8px 8px 0;

      background-color: #28a745;

      color: white;

      cursor: pointer;

    "

  >+</button>

</div>

      <!-- Buttons -->

      <div style="margin-top: 20px;">

        <div style="display: flex; gap: 30px; justify-content: space-between; margin-bottom: 10px;">

          <button type="reset" style="flex: 1; padding: 10px; background-color: #ffc107; font-size: 20px; border: none; border-radius: 8px; cursor: pointer;">Refresh</button>

          <button type="button" onclick="toggleSelectionList()" style="flex: 1; padding: 10px; background-color: #dc3545; font-size: 20px; border: none; border-radius: 8px; color: white; cursor: pointer;">Close</button>

        </div>

        <button type="submit" style="width: 100%; padding: 10px; background-color: #28a745; font-size: 20px; border: none; border-radius: 8px; color: white; cursor: pointer;">Submit to Your Order</button>

      </div>

    </form>

  </div>

</div>

JS:

<!-- JavaScript Functions -->

<script>

  function incrementQty() {

    const input = document.getElementById("qty-input");

    input.value = parseInt(input.value || "0") + 1;

  }

  function decrementQty() {

    const input = document.getElementById("qty-input");

    const value = parseInt(input.value || "1");

    if (value > 1) input.value = value - 1;

  }

  function toggleSelectionList() {

    alert("Close button clicked. Add your logic here.");

  }

  function handleOrderForm(event) {

    event.preventDefault();

    alert("Order submitted!");

  }

</script>