Delivery Method Picker Display

INFORMATION & CODE

The code creates an interactive delivery method selector that allows a user to choose one of three shipping options, submit their selection, and then reset the interface for another selection. It combines HTML for the page structure, CSS for the appearance and visual feedback, and JavaScript for the interactive behaviour.

The HTML defines the layout of the delivery picker. A `.payment-wrapper` contains three delivery options, each made up of a radio button, a custom checkmark, a delivery name, price, and estimated delivery time. All radio buttons share the same name (rad), ensuring that only one option can be selected at a time. A Submit button displays the chosen delivery method, while a hidden Go To Delivery Method button allows the interface to be reopened after it has been reset.

The CSS is responsible for the styling of the picker. It creates card-like containers for each delivery method, customises the radio buttons with circular checkmarks, styles the buttons, and adds colours, borders, shadows, and hover effects to improve the appearance. Additional classes such as .active and .show are used to hide or reveal elements when controlled by JavaScript. The styling also changes the visual state of delivery options, using red to indicate unselected items and green to highlight the currently selected one.

The JavaScript provides the functionality. It first stores references to the key HTML elements, including the delivery options, buttons, wrapper, and text output. When the Submit button is clicked, the script loops through the radio buttons to find the selected option, retrieves its value, and displays it in the <h4> element. After five seconds, the resetWrap() function is automatically called to reset the interface.

The borderChange() function runs whenever a delivery option is selected. It first resets every delivery card to a red, unselected appearance, then highlights the chosen option by changing its background, border, and shadow to green while removing the shadow around its checkmark. This gives the user immediate visual confirmation of their selection.

The resetWrap() function restores the picker to its default state. It removes all radio button selections, returns every delivery option to its red styling, clears the displayed delivery text, hides the main delivery picker by adding the .active class, and displays the Go To Delivery Method button by adding the .show class. Clicking this button removes the hiding classes, making the delivery picker visible again so the user can make a new selection.

To use the code, simply load the HTML page in a web browser. Select one of the delivery methods, click Submit, and the selected delivery option will be displayed beneath the button. Five seconds later, the picker automatically resets and is hidden. Clicking Go To Delivery Method reopens the picker, allowing another delivery method to be selected. This makes the component suitable for demonstrating custom radio button controls, selection highlighting, and interface reset behaviour in a checkout or ordering system.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delivery Method Picker Display</title>
    <link rel="icon" type="image/x-icon" href="https://e-nash.net/photos/modules-favicon.png">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <div class="payment-wrapper">
      <h2>Delivery Method</h2>
      <div class="method-wrap">
      <label class="method-container">
        <input type="radio" name="rad" class="radio" id="0" onclick="borderChange(this.id)" value="Standard delivery - 4 to 5 days - £4.99">
        <span class="checkmark"></span>
        <span class="lab">Standard Delivery</span>
      </label>
      <span class="price">£4.99</span>
      <p class="postype">4-5 days</p>
    </div>
      
    <div class="method-wrap" id="1">
      <label class="method-container">
        <input type="radio" name="rad" class="radio" id="1" onclick="borderChange(this.id)" value="Express delivery - 2 to 3 days - £6.99">
        <span class="checkmark"></span>
        <span class="lab">Express Delivery</span>
      </label>
      <span class="price">£6.99</span>
      <p class="postype">2-3 days</p>
    </div>

    <div class="method-wrap" id="2">
      <label class="method-container">
        <input type="radio" name="rad" class="radio" id="2" onclick="borderChange(this.id)" value="Next day delivery - 1 day - £9.99">
        <span class="checkmark"></span>
        <span class="lab">Next Day Delivery</span>
      </label>
      <span class="price">£9.99</span>
      <p class="postype">Next day</p>
    </div>
    <button class="btn">Submit</button>
    <h4 class="txt"></h4>
    <button class="reopen">Go To Delivery Method</button>
  </body>
</html>

CSS


                      .payment-wrapper {
        display: block;
        width: 100%;
        max-width: 600px;
        padding: 10px 20px 70px 20px;
        margin: 20px auto;
        background-color: #ffefcf;
        border-radius: 20px;
        filter: grayscale(100%);
        box-shadow: 2px 2px 10px #777777;
      }

      .active.payment-wrapper {
        display: none;
      }
      
      .method-wrap {
        display: block;
        width: 100%;
        padding: 15px;
        background-color: #ffffef;
        border: 1px solid #ff7000;
        border-radius: 10px;
        margin-bottom: 20px;
        box-shadow: inset 2px 2px 10px #ff7000
      }
      .method-container {
        display: block;
        position: relative;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 18px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
      }
      .checkmark {
        position: absolute;
        top: 0px;
        left: 10px;
        height: 25px;
        width: 25px;
        background-color: #ffffcc;
        border-radius: 50%;
        box-shadow: 0px 2px 10px #ff7000;
      }
      .container:hover input ~ .checkmark {
        background-color: #ffffbb;
      }
      .container input:checked ~ .checkmark {
        background-color: #ff7000;
      }
      .checkmark:after {
        content: "";
        position: absolute;
        display: none;
      }
      .container input:checked ~ .checkmark:after {
        display: block;
      }
      .container .checkmark:after {
        top: 8px;
        left: 8px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: white;
      }
      .lab, .price {
        margin-left: 50px;
        color: #505050;
        font-size: 18px;
        font-weight: 900;
      }
      .price {
        position: relative;
        top: -30px;
        float: right;
        margin: 0 0 0 50px;
        color: #303030;
      }
      .postype {
        color: #707070;
        font-size: 15px;
        font-weight: 600;
      }
      .txt {
        position: absolute;
        bottom: 160px;
        left: 50%;
        transform: translatex(-70%);
        font-size: 13px;
        text-align: center;
      }
      .btn,
      .reopen {
        float: right;
        padding: 5px 20px;
        background-color: #ff7000;
        border: 2px solid #dd7000;
        border-radius: 6px;
        color: #ffffff;
        font-size: 18px;
        font-weight: 900;
        box-shadow: 0 6px #dd7000;
        filter: grayscale(100%);
      }

      .reopen {
        display: none;
      }
      .btn:hover,
      .reopen:hover {
        background-color: #ff5000;
      }
      .btn:active,
      .reopen:active {
        background-color: #ff5000;
        box-shadow: 0 2px #dd7000;
        transform: translatey(+4px);
      }

      .show.reopen {
        display: block;
      }

JAVASCRIPT


                const wrapper = document.querySelector(".payment-wrapper");
const txt = document.querySelector(".txt");
const btn = document.querySelector(".btn");
const radioButtons = document.querySelectorAll('input[name="rad"]');
const buttonwraps = document.querySelectorAll(".method-wrap");
const radio = document.querySelectorAll(".radio");
const check = document.querySelectorAll(".checkmark");
const reopen = document.querySelector(".reopen");
var i;
      
btn.addEventListener("click", () => {
  let selectedValue;
  for (const radioButton of radioButtons) {
    if (radioButton.checked) {
      selectedValue = radioButton.value;
      break;
    }
  }
  txt.innerText = selectedValue;
  setTimeout(resetWrap, 5000);
});
        
function borderChange(inc) {
  for (i = 0; i < buttonwraps.length; i++) {
    check[i].style.boxShadow = '0px 2px 10px #ff0000';
    buttonwraps[i].style.background = '#ffeeee';
    buttonwraps[i].style.borderColor = '#ff0000';
    buttonwraps[i].style.boxShadow = 'inset 2px 2px 10px #ff0000';
  }
  check[inc].style.boxShadow = 'none'
  buttonwraps[inc].style.background = '#ddffdd';
  buttonwraps[inc].style.borderColor = '#00aa00';
  buttonwraps[inc].style.boxShadow = '2px 2px 10px #00aa00';
}
        
function resetWrap() {
  for (i = 0; i < buttonwraps.length; i++) {
    check[i].style.boxShadow = '0px 2px 10px #ff0000';
    buttonwraps[i].style.background = '#ffeeee';
    buttonwraps[i].style.borderColor = '#ff0000';
    buttonwraps[i].style.boxShadow = 'inset 2px 2px 10px #ff0000';
    radio[i].checked = false;
  }
  wrapper.classList.add('active');
  reopen.classList.add('active');
  reopen.classList.add('show');
  txt.innerText = "";
}
        
reopen.onclick = function() {
  wrapper.classList.remove('active');
  reopen.classList.remove('active');
  reopen.classList.remove('show');
}

MENU

INFORMATION & CODE

HTML

CSS

JAVASCRIPT

PREVIEW

Delivery Method