Animated Pricing Table Switcher | HTML CSS JavaScript

Animated Pricing Table Switcher with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #34

Project Overview

The Animated Pricing Table Switcher is an interactive frontend UI component built using HTML, CSS, and JavaScript. It displays different pricing plans in a clean card-based layout and allows users to switch between monthly and yearly pricing with a simple toggle. When the user changes the billing option, the prices update instantly without refreshing the page.

First, the project displays three pricing plans: Basic, Pro, and Enterprise, with different features and prices. Next, CSS creates the toggle switch, responsive pricing cards, hover effects, and smooth transitions. Finally, JavaScript listens for changes on the toggle and updates each plan’s price using stored monthly and yearly values. This project demonstrates DOM manipulation, data attributes, CSS transitions, responsive layouts, and interactive UI state switching.

Key Features

Monthly and Yearly Pricing: Users can switch between monthly and yearly billing options using the toggle switch. The displayed prices change automatically based on the selected option.
Three Pricing Plans: The table includes Basic, Pro, and Enterprise plans with different project limits, storage amounts, and support options. This creates a realistic pricing section for a product website.
Interactive Toggle Switch: A custom toggle control lets users change the billing period with a single click. The switch also changes its position and background color when activated.
Dynamic Price Updates: JavaScript reads the monthly and yearly values stored in each pricing card. Therefore, every plan updates to the correct price when the toggle changes.
Smooth Visual Transitions: CSS transitions create smooth movement for the toggle and pricing cards. This makes the interface feel more interactive when users move between options.
Responsive Pricing Cards: CSS Grid automatically adjusts the number and size of cards based on the available screen width. As a result, the pricing section works across different device sizes.
Popular Plan Highlight: The Pro plan uses a blue border to distinguish it from the other plans. This gives the pricing table a clear visual hierarchy.
Hover Effects: Pricing cards move slightly upward when users hover over them. This small interaction provides visual feedback and makes the cards feel more responsive.
Plan Feature Lists: Each pricing card displays a list of features included with that plan. Users can quickly compare projects, storage, and support options.
Reusable Pricing Component: The component can be adapted for SaaS products, subscriptions, online services, and other websites that offer different pricing tiers.

What You'll Learn

How to create pricing cards using HTML
How to build a custom toggle switch with CSS
How to use CSS Grid for responsive layouts
How CSS transitions create smooth UI effects
How to store values using HTML data-* attributes
How to handle toggle changes with JavaScript
How to update multiple elements using querySelectorAll()
How to create dynamic pricing interfaces

HTML Code

The HTML creates the structure of the pricing table. First, it adds a main container with the Pricing Plans heading and a switcher containing the Monthly and Yearly labels. Next, the toggle uses a checkbox with the ID priceToggle. The pricing section contains three cards for Basic, Pro, and Enterprise plans. Each card includes a plan name, price, feature list, and Select Plan button.

The price elements also store their monthly and yearly values using data-month and data-year attributes. This allows JavaScript to retrieve the correct price when the user changes the billing option.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animated Pricing Table Switcher</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h1>Pricing Plans</h1>

<div class="switcher">

<span>Monthly</span>

<label class="toggle">
<input type="checkbox" id="priceToggle">
<span class="slider"></span>
</label>

<span>Yearly</span>

</div>

<div class="pricing">

<div class="card">
<h2>Basic</h2>
<p class="price" data-month="9" data-year="90">₹9</p>

<ul>
<li>5 Projects</li>
<li>10GB Storage</li>
<li>Email Support</li>
</ul>

<button>Select Plan</button>

</div>


<div class="card popular">

<h2>Pro</h2>
<p class="price" data-month="19" data-year="190">₹19</p>

<ul>
<li>20 Projects</li>
<li>50GB Storage</li>
<li>Priority Support</li>
</ul>

<button>Select Plan</button>

</div>


<div class="card">

<h2>Enterprise</h2>
<p class="price" data-month="39" data-year="390">₹39</p>

<ul>
<li>Unlimited Projects</li>
<li>200GB Storage</li>
<li>24/7 Support</li>
</ul>

<button>Select Plan</button>

</div>

</div>

</div>

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

</body>
</html>

CSS Code

The CSS creates the overall appearance of the pricing component. The main container uses a light background, rounded corners, padding, and a maximum width so the pricing table remains centered and readable. Next, the switcher uses Flexbox to align the Monthly label, toggle, and Yearly label. The custom slider uses a pseudo-element to create the circular switch button, while the :checked selector changes its background and position.

The pricing cards use CSS Grid with auto-fit and minmax() to create a responsive layout. Each card also has a transition and hover effect, while the Pro card receives a blue border to highlight it as the popular option.

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
padding:20px;
}

.container{
background:#f1f5f9;
padding:40px;
border-radius:12px;
width:900px;
max-width:95%;
text-align:center;
}

h1{
margin-bottom:20px;
}

/* SWITCH */

.switcher{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin-bottom:30px;
font-weight:500;
}

.toggle{
position:relative;
width:52px;
height:26px;
display:inline-block;
}

.toggle input{
display:none;
}

.slider{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#ccc;
border-radius:30px;
cursor:pointer;
transition:0.3s;
}

.slider::before{
content:"";
position:absolute;
height:20px;
width:20px;
left:3px;
top:3px;
background:white;
border-radius:50%;
transition:0.3s;
}

.toggle input:checked + .slider{
background:#2563eb;
}

.toggle input:checked + .slider::before{
transform:translateX(26px);
}

/* PRICING */

.pricing{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.card{
background:#e2e8f0;
padding:25px;
border-radius:10px;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
}

.popular{
border:2px solid #2563eb;
}

.card h2{
margin-bottom:10px;
}

.price{
font-size:32px;
font-weight:bold;
margin-bottom:15px;
}

ul{
list-style:none;
margin-bottom:15px;
}

ul li{
margin-bottom:6px;
font-size:14px;
}

button{
padding:10px 15px;
border:none;
background:#2563eb;
color:white;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#1d4ed8;
}

Javascript Code

JavaScript controls the monthly and yearly price switching. First, it selects the pricing toggle using getElementById() and selects all elements with the .price class using querySelectorAll(). Next, an event listener watches for changes to the toggle. JavaScript reads the data-month and data-year values from every price element and checks whether the toggle is currently selected.

If the toggle is checked, JavaScript displays the yearly price. Otherwise, it displays the monthly price. Therefore, all three pricing cards update together whenever the user switches between billing options.

const toggle = document.getElementById("priceToggle")
const prices = document.querySelectorAll(".price")

toggle.addEventListener("change", () => {

prices.forEach(price => {

const month = price.getAttribute("data-month")
const year = price.getAttribute("data-year")

if(toggle.checked){

price.innerText = "₹" + year

}else{

price.innerText = "₹" + month

}

})

})