Rating List with Tab Navigation

Organize and compare ratings effortlessly with tab navigation. Learn how to implement a rating list with tab navigation, allowing users to explore and compare different rating categories conveniently.

Enhance user interaction on your website with a dynamic rating list featuring tab navigation. This comprehensive guide will walk you through the process of integrating and customizing a rating list using HTML, CSS, and JavaScript, ensuring it aligns with your website's design and functionality.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML, CSS, and JavaScript code snippet for the rating list with tab navigation. This snippet includes the structure, styles, and interactive behavior needed to display and switch between rating categories.

Step 2: Link CSS and JavaScript Files

Ensure the CSS (styles.css) and JavaScript (script.js) files are correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles:

<link rel="stylesheet" href="styles.css">

Include the following <script> tag at the end of your <body> section to import the JavaScript file:

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

Step 3: Customize and Make it Yours

  • Personalize the rating list and tab navigation to fit your website's theme and requirements. Modify the content inside each tab and adjust the CSS styles (styles.css) to change colors, fonts, or layout as needed. Experiment with different rating symbols or additional features to create an engaging user experience.

By following these steps, you can implement and customize a rating list with tab navigation using HTML, CSS, and JavaScript, enhancing user interaction and content organization on your website.

Code Explanation

HTML Code

Article and Header:
  • <article class="card">: Defines the entire card structure as an <article> with the class card.
  • <header>: Contains the header section of the card.
  • <div>: Contains textual information about new members (<h2> and <h4>).
  • <div class="buttons">: Contains buttons for filtering data by month, week, and day.
Tables (Member Entries):
  • <div class="tables">: Wraps the tables that contain member information.
  • <table class="active">: Represents a table of active members (class active indicates it's currently displayed).
  • <tbody class="active">: Body of the table.
  • <tr>: Represents a row of member data.
  • <td>: Contains an avatar (<img>).
  • <td>: Contains member name (<h3>) and job title (<h4>).
  • <td>: Contains member rating (<h4>) and star rating icons (<img> inside <div class="stars">).
  • <td>: Contains social media icons (<img class="social">).
Additional Tables and Entries:
  • The structure repeats for additional tables and member entries.

CSS Code

Global Styles
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #f5f8fa;
  color: #181c32;
  font-family: "Euclid Circular A", "Poppins";
}
  • body: Sets the styles for the entire document.
  • height: 100vh;: Makes the body height equal to the viewport height.
  • margin: 0;: Removes default margin.
  • display: grid;: Uses CSS Grid layout.
  • place-items: center;: Centers the grid items (in this case, centers everything inside body).
  • background: #f5f8fa;: Sets a light background color.
  • color: #181c32;: Sets the text color.
  • font-family: "Euclid Circular A", "Poppins";: Sets the font for the entire document, prioritizing "Euclid Circular A" and falling back to "Poppins".
Typography
h2, h3, h4 {
  margin: 0;
  font-weight: 500;
}
h2 {
  font-size: 18px;
}
h3 {
  font-size: 14px;
}
h4 {
  color: #a1a5b7;
  font-size: 12px;
}
  • h2, h3, h4: Styles headings (<h2>, <h3>, <h4>).
  • margin: 0;: Removes default margins.
  • font-weight: 500;: Sets the font weight to medium.
  • Specific styles for each heading level:
    • h2: Font size 18px.
    • h3: Font size 14px.
    • h4: Font size 12px, light gray color (#a1a5b7).
Table Styles
table {
  width: 100%;
}
table tr td {
  padding: 10px 0;
}
  • table: Makes tables span 100% of their container.
  • table tr td: Styles table rows and cells.
  • padding: 10px 0;: Adds padding above and below each cell.
Card Styles
.card {
  padding: 20px;
  border-radius: 10px;
  background: #ffffff;
  width: 400px;
}
  • .card: Styles the container with class card.
  • padding: 20px;: Adds padding inside the card.
  • border-radius: 10px;: Rounds the corners of the card.
  • background: #ffffff;: Sets a white background.
  • width: 400px;: Fixes the width of the card to 400 pixels.
Header Styles
.card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.card header button {
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
  • .card header: Styles the header section within .card.
  • display: flex;: Uses Flexbox layout.
  • align-items: center;: Centers items vertically.
  • justify-content: space-between;: Distributes items evenly along the main axis.
  • margin-bottom: 20px;: Adds bottom margin.
  • .card header button: Styles buttons within the header.
  • background: transparent;: Transparent background.
  • border: 0;: Removes border.
  • font-family: inherit;: Inherits font from parent.
  • cursor: pointer;: Changes cursor to pointer.
Avatar, Stars, and Social Icons
.avatar {
  width: 36px;
  height: 36px;
}
.stars {
  display: flex;
  gap: 3px;
}
.stars img {
  width: 16px;
  height: 16px;
}
.social {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}
  • .avatar: Styles avatar images.
  • width: 36px; height: 36px;: Sets dimensions.
  • .stars: Styles star ratings.
  • display: flex; gap: 3px;: Uses Flexbox with gap between items.
  • .stars img: Styles star images.
  • width: 16px; height: 16px;: Sets dimensions.
  • .social: Styles social icons.
  • width: 32px; height: 32px;: Sets dimensions.
  • vertical-align: middle;: Aligns icons vertically.
Buttons and Active State
.buttons {
  display: flex;
}
.buttons button {
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 6px;
  color: #a1a5b7;
}
.buttons button.active {
  background: #ecf5fd;
  color: #009ef7;
}
  • .buttons: Styles container for buttons.
  • display: flex;: Uses Flexbox layout.
  • .buttons button: Styles buttons within .buttons.
  • display: grid; place-items: center;: Uses CSS Grid for centering content.
  • padding: 14px;: Adds padding around buttons.
  • border-radius: 6px;: Rounds button corners.
  • color: #a1a5b7;: Sets button text color.
  • .buttons button.active: Styles active button state.
  • background: #ecf5fd;: Sets background color for active state.
  • color: #009ef7;: Sets text color for active state.
Tables Animation and Positioning
.tables {
  position: relative;
  height: 196px;
}
table {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  animation: table-out 0.2s both;
}
  • .tables: Styles the container for tables.
  • position: relative;: Allows absolute positioning of child elements.
  • height: 196px;: Sets container height.
  • table: Styles tables within .tables.
  • position: absolute;: Absolutely positions tables.
  • top: 0; left: 0; right: auto; bottom: auto;: Positions tables at the top-left corner.
  • animation: table-out 0.2s both;: Applies animation table-out to tables.
Keyframe Animations
@keyframes table-in {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes table-out {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
  • @keyframes table-in: Defines a keyframe animation table-in.
  • 0%: Starting point.
  • opacity: 0; visibility: hidden;: Makes tables invisible initially.
  • 100%: End point.
  • opacity: 1; visibility: visible;: Makes tables fully visible.
  • @keyframes table-out: Defines a keyframe animation table-out.
  • 100%: End point.
  • opacity: 0; visibility: hidden;: Makes tables invisible.
Active Table Animation
table.active {
  animation: table-in 0.2s 0.2s both;
}
  • table.active: Targets tables with class active.
  • animation: table-in 0.2s 0.2s both;: Applies animation table-in with a delay of 0.2s after 0.2s.

JavaScript Code

const buttons = document.querySelectorAll(".buttons button");

const tables = document.querySelectorAll(".tables table");
  • buttons: This variable stores all <button> elements that are descendants of an element with the class buttons. It uses document.querySelectorAll to select all such elements.
  • tables: This variable stores all <table> elements that are descendants of an element with the class tables. Similarly, it uses document.querySelectorAll to select all <table> elements.
const selectList = (element, index = 0) => {
  tables.forEach((table) => table.classList.remove("active"));
  tables[index].classList.add("active");

  if (element) {
    buttons.forEach((button) => button.classList.remove("active"));
    element.classList.add("active");
  }
};
  • selectList is a function that takes two parameters:
  • element: Represents an element (usually a button) that triggers the selection.
  • index: Represents the index of the table that should be selected (default value is 0).
  • Inside selectList function:
  • tables.forEach((table) => table.classList.remove("active"));
  • Loops through all elements in the tables NodeList and removes the CSS class active from each <table> element. This step clears any previously active table.
  • tables[index].classList.add("active");
  • Adds the CSS class active to the table at the specified index. This marks the specific table as active, presumably highlighting it or showing it differently based on CSS rules.
  • if (element) { ... }
  • Checks if element exists (i.e., it's truthy). This typically represents a button that triggered the selection.
  • buttons.forEach((button) => button.classList.remove("active"));
  • Loops through all elements in the buttons NodeList and removes the CSS class active from each <button> element. This clears any previously active button.
  • element.classList.add("active");
  • Adds the CSS class active to the element, which is the button that triggered the selection. This visually highlights or marks the button as active.
selectList();
  • Calls the selectList function without any parameters. This likely initializes or sets an initial state where the first table (tables[0]) and the first button (buttons[0]) are marked as active.