Dynamic Pricing Card Display

INFORMATION & CODE

Dynamic Pricing Cards Display

What the Code does

This code provides a responsive pricing page component featuring an interactive toggle switch that dynamically updates subscription rates between "Monthly" and "Yearly" billing options.

How the Code Works

The HTML structure establishes the layout by creating a custom toggle switch using a hidden checkbox and styled spans, followed by three pricing cards—two smaller standard tiers and one larger featured tier. The CSS handles the visual presentation, utilizing absolute and flex positioning alongside robust media queries to ensure the layout seamlessly adapts across desktop, tablet, and mobile screen sizes. Meanwhile, the JavaScript listens for state changes on the toggle switch input; when toggled, it shifts the active text colors and updates the inner HTML of the pricing headers to display the corresponding recalculated annual or monthly prices.

How to Use the Code

To use this code, save the HTML snippet into an index.html file, place the CSS styles inside a linked styles.css file, and put the JavaScript logic into a scripts.js file within the same directory. Once your files are properly linked, you can open index.html in any modern web browser to view the interactive pricing table, and integrate it into your own web projects by adjusting the HTML card content and pricing values inside the JavaScript file to fit your specific products or services.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Split Button</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"><span class="first">Monthly</span> <span class="space">Yearly</span></span>
    </label>
    <div class="price_card_small">
      <div class="small_header">
        <h1 class="h1a">£4.99</h1>
      </div>
      <ul class="white">
        <li>1 Website</li>
        <li>5 Databases</li>
        <li>1GB hard drive space</li>
        <li>Unlimited bandwidth</li>
        <li>Easy to use</li>
      </ul>
      <button class="small_footer">Select</button>
    </div>
    <div class="price_card_large">
      <div class="large_header">
        <h1 class="h1b">£9.99</h1>
        </div>
        <ul class="green">
          <li>5 websites</li>
          <li>10 databases</li>
          <li>10GB hard drive space</li>
          <li>Unlimited bandwidth</li>
          <li>Customised for speed</li>
        </ul>
        <button class="large_footer">Select</button>
      </div>
      <div class="price_card_small">
        <div class="small_header">
          <h1 class="h1a">£14.99</h1>
        </div>
        <ul class="white">
          <li>Unlimited websites</li>
          <li>Unlimited databases</li>
          <li>Unlimited hard drive space</li>
          <li>Unlimited bandwidth</li>
          <li>Enhanced security</li>
        </ul>
        <button class="small_footer">Select</button>
      </div>
      <div class="spacer"></div>
    </div>            
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      .container {
        display: none;
        width: 870px;
        margin: auto;
      }
      .focus.container {
        display: block;
      }
      .active.container {
        display: none;
      }
      @media(max-width: 780px) {
        .container {
          max-width: 300px;
        }
      }
      .switch {
        position: absolute;
        top: 120px;
        left: 50%;
        transform: translatex(-50%);
        display: inline-block;
        width: 180px;
        height: 60px;
      }
      

      .switch input { 
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px 10px 0 25px;
        background-color: #a0f0a0;
        -webkit-transition: .4s;
        transition: .4s;
      }
      .first {
        position: relative;
        left: -7px;
        color: #00aa00;
        font-weight: 900;
      }
      .space {
        position: relative;
        margin-left: 20px;
        color: #ff0000;
        font-weight: 900;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 52px;
        width: 90px;
        padding: 16px;
        left: 4px;
        top: 4px;
        background-color: #ddffee;
        -webkit-transition: .4s;
        transition: .4s;
         box-sizing: border-box;
      }

      input:checked + .slider {
        background-color: #50f050;
      }

      input:focus + .slider {
        box-shadow: 2px 2px 10px #777777;
      }

      input:checked + .slider:before {
        -webkit-transform: translateX(82px);
        -ms-transform: translateX(82px);
        transform: translateX(82px);
      }


      .slider.round {
        border-radius: 34px;
        color: #ff0000;
        box-shadow: 2px 2px 10px #777777;
      }

      .slider.round:before {
        border-radius: 26px;
        color: #00aa00;
        box-shadow: inset 0 0 10px #77aa77, inset 2px 2px 7px #77aa77;
      }
      .price_card_small {
        position: relative;
        top: 75px;
        margin: 0 15px 0 15px;
        display: inline-block;
        width: 240px;
        height: 320px;
        background-color: #bbccbb;
        border: 4px solid #00ff00;
        border-radius: 20px;
        box-shadow: 2px 2px 10px #777777;
      }
      
      .price_card_large {
        position: relative;
        top: 84px;
        margin: 0 15px;
        display: inline-block;
        width: 290px;
        height: 405px;
        margin-top: 10px;
        background-color: #ffffff;
        border: 4px solid #00ff00;
        border-radius: 20px;
        box-shadow: 2px 2px 10px #777777;
      }
      
     @media(max-width: 1280px) {
       .price_card_small {
         margin-left: 7vw;
       }
       .price_card_large {
         margin-left: 6.9vw;
       }
     }
     @media(min-width: 1081px) {
      .price_card_small {
        top: 105px;
        display: inline-block;
        width: 30%;
        max-width: 240px;
        margin: 50px 15px 10px 15px;
      }
      .price_card_large {
        top: 134px;
        display: inline-block;
        width: 45%;
        max-width: 280px;
        margin: 10px 15px 130px 15px;
      }
    }
   
    @media(max-width: 1080px) {
      .price_card_small {
        top: 75px;
        display: block;
        width: 70%;
        max-width: 250px;
        margin: 40px auto 10px auto;
      }
      .price_card_large {
        top: 114px;
        display: block;
        width: 85%;
        max-width: 300px;
        margin: 0 auto 90px auto;
      }
    }
      .small_header {
        width: 100%;
        height: 60px;
        padding: 1px;
        background-color: #ffffff;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
      }
      .large_header {
        width: 100%;
        height: 60px;
        padding: 1px;
        background-color: #bbccbb;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
      }
      .spacer {
        position: relative;
        top: 30px;
        width: 100%;
        height: 30px;
      }
      button.small_footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: #ffffff;
        color: #00cc00;
        font-size: 24px;
        font-weight: 900;
        border: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        cursor: pointer;
      }
      button.small_footer:active {
        font-size: 28px;
      }
      button.large_footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: #bbccbb;
        color: #ffffff;
        font-size: 24px;
        font-weight: 900;
        border: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        cursor: pointer;
      }
      button.large_footer:active {
        font-size: 28px;
      }
      h1 {
        margin-top: 3px;
        color: #00cc00;
        font-size: 32px;
        text-align: center;
      }
      .heading {
        margin-top: 0px;
        color: #ffffff;
        text-shadow: 0 0 1px #333333, 2px 2px #333333, 3px 3px #333333;
      }
      .h1b {
        color: #ffffff;
      }
      .white {
        line-height: 30px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 900;
      }
      .green {
        line-height: 40px;
        color: #00cc00;
        font-size: 18px;
        font-weight: 900;
      }
      ul {
        margin-left: -10px
      }

JAVASCRIPT


                const input = document.querySelector("input");
const slider = document.querySelector(".slider");
const first = document.querySelector(".first");
const space = document.querySelector(".space");
const h1a = document.querySelectorAll(".h1a");
const h1b = document.querySelector(".h1b")
input.addEventListener("change", function(event) {
  if (event.target.checked) {
    first.style.color = "#ff0000";
    space.style.color = "#00aa00";
    h1a[0].innerHTML = "£54.89";
    h1a[1].innerHTML = "£164.89";
    h1b.innerHTML = "£109.89";
  }else{
    first.style.color = "#00aa00";
    space.style.color = "#ff0000";
    h1a[0].innerHTML = "£4.99";
    h1a[1].innerHTML = "£14.99";
    h1b.innerHTML = "£9.99";
  }
});

MENU

INFORMATION & CODE

Dynamic Pricing Cards Display

What the Code does

How the Code Works

How to Use the Code

HTML

CSS

JAVASCRIPT

PREVIEW

Pricing Cards

£4.99

£9.99

£14.99