Learn how to design and implement a dynamic pricing table using HTML, CSS, and JavaScript. Follow our tutorial for step-by-step guidance!
Table of Contents
In today's digital landscape, having a compelling pricing table on your website is crucial for showcasing your products or services effectively. Whether you're a small business or a large enterprise, a well-designed pricing table can make a significant difference in converting visitors into customers. In this tutorial, we'll walk you through the process of creating a dynamic pricing table using HTML, CSS, and JavaScript. By the end, you'll have the skills to design and implement a professional-looking pricing table that enhances user experience and boosts conversions. Let's get started!
Source Code
Step 1 (HTML Code):
Setting Up HTML Structure:
- Create a new HTML file.
- Define the structure for your pricing table using HTML elements such as <div>, <ul>, and <li>.
- Include placeholders for plan names, features, prices, and action buttons.
Let's break down the HTML code:
1. <!DOCTYPE html>: This declares the document type and version of HTML being used.
2. <html lang="en">: This declares the beginning of the HTML document and specifies the language as English.
3. <head>: This section contains meta-information about the HTML document, such as character encoding, viewport settings, and links to external resources like stylesheets and scripts.
- <meta charset="UTF-8">: Sets the character encoding to UTF-8, which supports a wide range of characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: Instructs Internet Explorer to use the latest rendering engine.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport width to the device's width and sets the initial zoom level to 1.0.
- <link rel="preconnect" href="https://fonts.gstatic.com" />: Preconnects to the Google Fonts server to speed up font loading.
- <link href="https://fonts.googl.." rel="stylesheet" />: Links to the Montserrat font with a weight of 700 from Google Fonts.
- <title>Pricing Table Component</title>: Sets the title of the HTML document to "Pricing Table Component".
- <link rel="stylesheet" href="styles.css">: Links to an external stylesheet named "styles.css" to apply styles to the HTML document.
4. <body>: This section contains the content of the HTML document that will be displayed in the browser.
- <header>: Defines the header section of the document which contains the title "Our Pricing" and a toggle switch between "Annually" and "Monthly".
- <div class="cards">: Contains a set of pricing cards, each representing a different pricing plan.
- Each card (<div class="card">) represents a pricing plan and contains details such as the plan name, price, storage, users allowed, and a button to learn more.
- <script src="script.js"></script>: Links to an external JavaScript file named "script.js" to add interactivity and functionality to the HTML document.
Step 2 (CSS Code):
Styling with CSS:
- Link your CSS file to the HTML document.
- Style the pricing table elements to enhance visual appeal.
- Utilize CSS techniques such as gradients, borders, and typography to make the table visually appealing and easy to read.
Let's break down the CSS code:
1. The first block of code (* {...}) sets the box-sizing to border-box for all elements, which means that padding and border are included in the element's total width and height. It also removes default margin and padding from all elements.
2. The html block sets the base font size to 15 pixels.
3. The body block styles the body of the webpage. It sets the background color to a light purplish-gray, specifies a preferred font family, sets the width to 80% of the viewport width with a maximum width of 1440 pixels, centers the body horizontally using auto margins, and makes it a flex container with items stacked vertically.
4. The header block styles the header section of the webpage. It sets the text color to a grayish-blue, adds a top margin, and makes it a flex container with items stacked vertically and centered horizontally.
5. The .toggle block styles an element with the class "toggle". It adds some top margin, sets the text color to a light grayish-blue, and makes it a flex container with items aligned vertically.
6. The .toggle-btn block styles an element with the class "toggle-btn" and adds some margin.
7. The .checkbox block hides elements with the class "checkbox".
8. The .sub block styles an element with the class "sub". It sets a background gradient, makes it a flex container with items aligned to the start, sets a fixed height and width, and adds some padding.
9. The .circle block styles an element with the class "circle". It sets a background color, height, width, and border-radius to create a circular shape.
10. The .checkbox:checked + .sub block styles the "sub" element when the associated checkbox is checked, making its content align to the end.
11. The .cards block styles a container for a collection of cards. It makes it a flex container with items centered horizontally and wrapped onto multiple lines.
12. The .card block styles individual cards within the container. It sets the background color to white, text color to a light grayish-blue, and adds border-radius for rounded corners.
13. The .cards .card.active block styles active cards within the container. It sets a background gradient, changes the text color to white, scales up the size, and brings it to the front using z-index.
14. The ul block styles unordered lists, setting margin, making it a flex container with items stacked vertically, and justifying content around the space.
15. The ul li block styles list items within unordered lists, removing default list styles, centering content horizontally, setting padding, and setting the width to 100%.
16. The .shadow block adds a box shadow to elements.
17. The .card.active .price block styles the price within an active card, changing its color to white.
18. The .btn block styles buttons, setting dimensions, background gradient, text color, and font weight.
19. The .active-btn block styles active buttons, changing background and text color.
20. The .bottom-bar block styles a bottom border.
21. Media queries are used to apply different styles based on the viewport width. Various breakpoints are defined to adjust the layout and styles for different screen sizes.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 15px;
}
body {
background: #f7f7ff;
font-family: "Montserrat", sans-serif;
width: 80%;
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
}
header {
color: hsl(233, 13%, 49%);
margin: 3.3rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.toggle {
margin-top: 2rem;
color: hsl(234, 14%, 74%);
display: flex;
align-items: center;
}
.toggle-btn {
margin: 0 1rem;
}
.checkbox {
display: none;
}
.sub {
background: linear-gradient(
135deg,
rgba(163, 168, 240, 1) 0%,
rgba(105, 111, 221, 1) 100%
);
display: flex;
justify-content: flex-start;
align-items: center;
/* height: 25px;
width: 50px; */
height: 1.6rem;
width: 3.3rem;
border-radius: 1.6rem;
padding: 0.3rem;
}
.circle {
background-color: #fff;
height: 1.4rem;
width: 1.4rem;
border-radius: 50%;
}
.checkbox:checked + .sub {
justify-content: flex-end;
}
.cards {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.card {
background: #fff;
color: hsl(233, 13%, 49%);
border-radius: 0.8rem;
}
.cards .card.active {
background: linear-gradient(
135deg,
rgba(163, 168, 240, 1) 0%,
rgba(105, 111, 221, 1) 100%
);
color: #fff;
display: flex;
align-items: center;
transform: scale(1.1);
z-index: 1;
}
ul {
margin: 2.6rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
ul li {
list-style-type: none;
display: flex;
justify-content: center;
width: 100%;
padding: 1rem 0;
}
ul li.price {
font-size: 3rem;
color: hsl(232, 13%, 33%);
padding-bottom: 2rem;
}
.shadow {
box-shadow: -5px 5px 15px 1px rgba(0, 0, 0, 0.1);
}
.card.active .price {
color: #fff;
}
.btn {
margin-top: 1rem;
height: 2.6rem;
width: 13.3rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
background: linear-gradient(
135deg,
rgba(163, 168, 240, 1) 0%,
rgba(105, 111, 221, 1) 100%
);
color: #fff;
outline: none;
border: 0;
font-weight: bold;
}
.active-btn {
background: #fff;
color: hsl(237, 63%, 64%);
}
.bottom-bar {
border-bottom: 2px solid hsla(240, 8%, 85%, 0.582);
}
.card.active .bottom-bar {
border-bottom: 2px solid hsla(240, 8%, 85%, 0.253);
}
.pack {
font-size: 1.1rem;
}
@media (max-width: 280px) {
ul {
margin: 1rem;
}
h1 {
font-size: 1.2rem;
}
.toggle {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 80px;
}
.cards {
margin: 0;
display: flex;
flex-direction: column;
}
.card {
transform: scale(0.8);
margin-bottom: 1rem;
}
.cards .card.active {
transform: scale(0.8);
}
}
@media (min-width: 280px) and (max-width: 320px) {
ul {
margin: 20px;
}
.cards {
display: flex;
flex-direction: column;
}
.card {
margin-bottom: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
@media (min-width: 320px) and (max-width: 414px) {
.cards {
display: flex;
flex-direction: column;
}
.card {
margin-bottom: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
@media (min-width: 414px) and (max-width: 768px) {
.card {
margin-bottom: 1rem;
margin-right: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
@media (min-width: 768px) and (max-width: 1046px) {
.cards {
display: flex;
}
.card {
margin-bottom: 1rem;
margin-right: 1rem;
}
.cards .card.active {
transform: scale(1);
}
} Step 3 (JavaScript Code):
Adding Interactivity with JavaScript:
- Link your JavaScript file to the HTML document.
- Implement functionality such as toggling between monthly and yearly plans.
- Use JavaScript to update prices dynamically based on user selections.
Here's a breakdown of how it works:
1. It selects HTML elements with specific IDs and assigns them to variables:
- checkbox: represents the checkbox element.
- professional: represents an element displaying a professional subscription price.
- master: represents an element displaying a master subscription price.
- basic: represents an element displaying a basic subscription price.
2. It adds an event listener to the checkbox element, which listens for a "click" event.
3. When the checkbox is clicked, the event listener triggers an anonymous function (an arrow function) that contains the following logic:
- It checks the text content of the basic, professional, and master elements.
- If the text content of the basic is "$199.99", it changes it to "$19.99"; otherwise, it changes it back to "$199.99".
- If the text content of the professional is "$249.99", it changes it to "$24.99"; otherwise, it changes it back to "$249.99".
- If the text content of the master is "$399.99", it changes it to "$39.99"; otherwise, it changes it back to "$399.99".
const checkbox = document.getElementById("checkbox");
const professional = document.getElementById("professional");
const master = document.getElementById("master");
const basic = document.getElementById("basic");
checkbox.addEventListener("click", () => {
basic.textContent = basic.textContent === "$199.99" ? "$19.99" : "$199.99";
professional.textContent =
professional.textContent === "$249.99" ? "$24.99 " : "$249.99";
master.textContent = master.textContent === "$399.99" ? "$39.99" : "$399.99";
});Final Output:
Conclusion:
By following this tutorial, you can create a professional and interactive pricing table for your website. HTML provides the structure, CSS adds style, and JavaScript brings functionality to ensure an engaging user experience. Start implementing these steps to enhance your website's pricing presentation today!
Code by: Aniruddha Banerjee
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
