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 a frontend UI component developed using HTML, CSS, and JavaScript that displays pricing plans with an interactive toggle switch. Users can switch between different pricing options such as monthly and yearly plans, and the pricing values update dynamically with smooth animations. This project demonstrates concepts like UI state switching, DOM manipulation, CSS transitions, and responsive card layouts, making it a useful component for SaaS or product websites.

Key Features

Toggle between monthly and yearly pricing plans
Smooth animated pricing transitions
Responsive pricing card layout
Interactive pricing switch button
Clean and modern UI design
Dynamic price updates using JavaScript
Reusable pricing component for websites

HTML Code

<!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

*{
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

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

}

})

})