Building a Responsive Sports Dashboard using HTML, CSS, and JavaScript

Faraz

By Faraz -

Discover how to build a responsive sports dashboard using HTML, CSS, and JavaScript. Source code included

Join us on Telegram
Building a Responsive Sports Dashboard using HTML, CSS, and JavaScript.jpg
Read AlsoCreate Neumorphism Video Player using HTML, CSS, and JavaScript.webpCreate Neumorphism Video Player using HTML, CSS, and JavaScript (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

Sports dashboards are invaluable tools for enthusiasts and professionals, providing real-time insights into various aspects of the sporting world. In this guide, we will walk you through the process of creating a responsive sports dashboard using HTML, CSS, and JavaScript.

Let's start making an amazing responsive sports dashboard using HTML, CSS, and JavaScript step by step.

Join My Telegram Channel to Download the Project Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our sports dashboard.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let me break down the code for you:

1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used (HTML5 in this case).

2. <html lang="en">: This tag defines the root element of the HTML document and specifies the language as English.

3. <head>: This section contains meta-information about the HTML document, such as character set, viewport settings, and links to external stylesheets.

  • <meta charset="UTF-8">: Specifies the character encoding as UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport to the width of the device and initial scale to 1.
  • <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css'>: Links to an external stylesheet for Font Awesome icons.
  • <title>Sports Dashboard</title>: Sets the title of the webpage.
  • <link rel="stylesheet" href="styles.css">: Links to an external stylesheet named "styles.css."

4. <body>: This is the main content of the webpage.

5. <main>: Contains the main content of the page.

6. <nav class="main-menu">: Navigation section with links to different parts of the app.

7. <section class="content">: Main content section of the page.

8. Left Content (<div class="left-content">): Contains popular activities, weekly schedule, and personal bests.

  • Popular Activities (<div class="activities">): Displays popular activities with images and overlays.
  • Weekly Schedule (<div class="weekly-schedule">): Displays a weekly schedule with activities, participants, and a "Join" button.
  • Personal Bests (<div class="personal-bests">): Displays personal best achievements.

9. Right Content (<div class="right-content">): Contains user information, active calories, mobile personal bests, and friends' activity.

  • User Info (<div class="user-info">): Displays user information, notifications, and profile image.
  • Active Calories (<div class="active-calories">): Displays active calories information.
  • Mobile Personal Bests (<div class="mobile-personal-bests">): Displays personal bests in a mobile view.
  • Friends Activity (<div class="friends-activity">): Displays friends' recent activities in cards.

10. <script src="script.js"></script>: Links to an external JavaScript file named "script.js."

This is the basic structure of our sports dashboard using HTML, and now we can move on to styling it using CSS.

Read Alsomake your own responsive pizza shop website using html, css and javascript.jpgMake Your Own Responsive Pizza Shop Website Using HTML, CSS and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the sports dashboard is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our sports dashboard. Let me break down the code and explain each section:

1. Font Import:

@import url("https://fonts.googleapis.com/css2?
family=Nunito:wght@200;300;400;500;600;700;800;900;1000&
family=Roboto:wght@300;400;500;700&display=swap");
  • This imports the Nunito and Roboto fonts from Google Fonts.

2. Global Reset:

*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
  • This snippet applies a global reset to eliminate default padding and margin and sets the box-sizing property to "border-box" for all elements.

3. Styling for Navigation:

nav {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}
  • This disables text selection on the navigation element for various browsers.

4. Body Styling:

body {
  font-family: "Nunito", sans-serif;
  // Other styles for body background, display, and alignment
}
  • Sets the default font family, background image, and other styles for the body.

5. Main Menu Styling:

main {
  // Styles for the main container
}
.main-menu {
  // Styles for the main menu
}
  • Styles for the main container and the main menu within it.

6. Styling for Navigation Items:

.nav-item {
  // Styles for navigation items
}
  • Styles for individual navigation items.

7. Content Section Styling:

.content {
  // Styles for the content section
}
  • Styles for the main content section.

8. Left Content Styling:

.left-content {
  // Styles for the left content area
}
  • Styles for the left content area within the main content section.

9. Activities Styling:

.activities {
  // Styles for the activities section
}
  • Styles for the activities section within the left content area.

10. Styling for Activity Containers:

.activity-container {
  // Styles for the container of activities
}
  • Styles for the container of activities within the activities section.

11. Styling for Image Containers:

.image-container {
  // Styles for the image container
}
  • Styles for the container of images within activities.

12. Styling for Overlay on Images:

.overlay {
  // Styles for the overlay on images
}
  • Styles for the overlay on images that appear on hover.

13. Left Bottom Section Styling:

.left-bottom {
  // Styles for the left-bottom section
}
  • Styles for the left-bottom section within the left content area.

14. Weekly Schedule Styling:

.weekly-schedule {
  // Styles for the weekly schedule
}
  • Styles for the weekly schedule within the left-bottom section.

15. Styling for Calendar and Day-Activity Sections:

.calendar,
.day-and-activity {
  // Styles for the calendar and day-activity sections
}
  • Styles for the calendar and day-activity sections within the weekly schedule.

16. Right Content Styling:

.right-content {
  // Styles for the right content area
}
  • Styles for the right content area within the main content section.

17. User Info Styling:

.user-info {
  // Styles for the user info section
}
  • Styles for the user info section within the right content area.

18. Active Calories Styling:

.active-calories {
  // Styles for the active calories section
}
  • Styles for the active calories section within the right content area.

19. Mobile Responsiveness:

@media (max-width: ...) {
  // Responsive styles for different screen widths
}
  • Media queries for adjusting styles based on different screen widths, making the layout responsive.

This will give our sports dashboard an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&family=Roboto:wght@300;400;500;700&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

nav {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}

nav ul,
nav ul li {
  outline: 0;
}

nav ul li a {
  text-decoration: none;
}

body {
  font-family: "Nunito", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-image: url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/5baf8325-ed69-40b0-b9d2-d8c5d2bde3b0);
  background-repeat: no-repeat;
  background-size: cover;
	/* background: #212140; */
}

/* MAIN MENU */

main {
  display: grid;
  grid-template-columns: 13% 87%;
  min-height: 100vh;
  width: 100%;
  margin: 40px;
  background: rgb(254, 254, 254);
  box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
  border-radius: 15px;
  z-index: 10;
}

.main-menu {
  overflow: hidden;
  background: rgb(73, 57, 113);
  padding-top: 10px;
  border-radius: 15px 0 0 15px;
  font-family: "Roboto", sans-serif;
}

.main-menu h1 {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  margin: 20px 0 30px;
  color: #fff;
  font-family: "Nunito", sans-serif;
}

.logo {
  display: none;
}

.nav-item {
  position: relative;
  display: block;
}

.nav-item a {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  padding: 15px 0;
  margin-left: 10px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.nav-item b:nth-child(1) {
  position: absolute;
  top: -15px;
  height: 15px;
  width: 100%;
  background: #fff;
  display: none;
}

.nav-item b:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 20px;
  background: rgb(73, 57, 113);
}

.nav-item b:nth-child(2) {
  position: absolute;
  bottom: -15px;
  height: 15px;
  width: 100%;
  background: #fff;
  display: none;
}

.nav-item b:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-right-radius: 20px;
  background: rgb(73, 57, 113);
}

.nav-item.active b:nth-child(1),
.nav-item.active b:nth-child(2) {
  display: block;
}

.nav-item.active a {
  text-decoration: none;
  color: #000;
  background: rgb(254, 254, 254);
}

.nav-icon {
  width: 60px;
  height: 20px;
  font-size: 20px;
  text-align: center;
}

.nav-text {
  display: block;
  width: 120px;
  height: 20px;
  font-family: "Mulish", sans-serif;
}

/* CONTENT */

.content {
  display: grid;
  grid-template-columns: 75% 25%;
}

/* LEFT CONTENT */

.left-content {
  display: grid;
  grid-template-rows: 50% 50%;
  background: #f6f7fb;
  margin: 15px;
  padding: 20px;
  border-radius: 15px;
}

/* ACTIVITIES */

.activities h1 {
  margin: 0 0 20px;
  font-size: 1.4rem;
  font-weight: 700;
}

.activity-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 150px);
  column-gap: 10px;
}

.img-one {
  grid-area: 1 / 1 / 2 / 2;
}

.img-two {
  grid-area: 2 / 1 / 3 / 2;
}

.img-three {
  display: block;
  grid-area: 1 / 2 / 3 / 4;
}

.img-four {
  grid-area: 1 / 4 / 2 / 5;
}

.img-five {
  grid-area: 1 / 5 / 2 / 6;
}

.img-six {
  display: block;
  grid-area: 2 / 4 / 3 / 6;
}

.image-container {
  position: relative;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
  border-radius: 10px;
}

.image-container img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent,
    transparent,
    rgba(3, 3, 185, 0.5)
  );
  border-radius: 10px;
  transition: all 0.6s linear;
}

.image-container:hover .overlay {
  opacity: 0;
}

.overlay h3 {
  margin-bottom: 8px;
  margin-right: 10px;
  color: #fff;
}

/* LEFT BOTTOM */

.left-bottom {
  display: grid;
  grid-template-columns: 55% 40%;
  gap: 40px;
}

/* WEEKLY SCHEDULE */

.weekly-schedule {
  display: flex;
  flex-direction: column;
}

.weekly-schedule h1 {
  margin-top: 20px;
  font-size: 1.3rem;
  font-weight: 700;
}

.calendar {
  margin-top: 10px;
}

.day-and-activity {
  display: grid;
  grid-template-columns: 15% 60% 25%;
  align-items: center;
  border-radius: 14px;
  margin-bottom: 5px;
  color: #484d53;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}

.activity-one {
  background-color: rgb(124, 136, 224, 0.5);
  background-image: linear-gradient(
    240deg,
    rgb(124, 136, 224) 0%,
    #c3f4fc 100%
  );
}

.activity-two {
  background-color: #aee2a4a1;
  background-image: linear-gradient(240deg, #e5a243ab 0%, #f7f7aa 90%);
}

.activity-three {
  background-color: #ecfcc376;
  background-image: linear-gradient(240deg, #97e7d1 0%, #ecfcc3 100%);
}

.activity-four {
  background-color: #e6a7c3b5;
  background-image: linear-gradient(240deg, #fc8ebe 0%, #fce5c3 100%);
}

.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-10px);
}

.day h1 {
  font-size: 1.6rem;
  font-weight: 600;
}

.day p {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
  transform: translateY(-3px);
}

.activity {
  border-left: 3px solid #484d53;
}

.participants {
  display: flex;
  margin-left: 20px;
}

.participants img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  z-index: calc(2 * var(--i));
  margin-left: -10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}

.activity h2 {
  margin-left: 10px;
  font-size: 1.25rem;
  font-weight: 600;
  border-radius: 12px;
}

.btn {
  display: block;
  padding: 8px 24px;
  margin: 10px auto;
  font-size: 1.1rem;
  font-weight: 500;
  outline: none;
  text-decoration: none;
  color: #484b57;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  cursor: pointer;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn:visited {
  transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  animation: gelatine 0.5s 1;
}

@keyframes gelatine {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}

/* PERSONAL BESTS */

.personal-bests {
  display: block;
}

.personal-bests h1 {
  margin-top: 20px;
  font-size: 1.3rem;
  font-weight: 700;
}

.personal-bests-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 150px);
  gap: 10px;
  margin-top: 10px;
}

.best-item {
  display: flex;
  gap: 20px;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}

.box-one {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  grid-area: 1 / 1 / 2 / 3;
  background-color: rgba(185, 159, 237, 0.6);
  padding: 15px;
  font-size: 1rem;
  font-weight: 700;
}

.box-one img {
  max-width: 100px;
  aspect-ratio: 4/3;
}

.box-two {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px;
  grid-area: 2 / 1 / 3 / 2;
  background-color: rgba(238, 184, 114, 0.6);
}

.box-two img {
  max-width: 90px;
  aspect-ratio: 3/2;
  align-self: flex-end;
}

.box-three {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px;
  grid-area: 2 / 2 / 3 / 3;
  background-color: rgba(184, 224, 192, 0.6);
}

.box-three img {
  max-width: 70px;
  aspect-ratio: 1/1;
  align-self: flex-end;
}

/* RIGHT CONTENT */

.right-content {
  display: grid;
  grid-template-rows: 5% 20% 75%;
  background: #f6f7fb;
  margin: 15px 15px 15px 0;
  padding: 10px 0;
  border-radius: 15px;
}

/* USER INFO */

.user-info {
  display: grid;
  grid-template-columns: 30% 55% 15%;
  align-items: center;
  padding: 0 10px;
}

.icon-container {
  display: flex;
  gap: 15px;
}

.user-info h4 {
  margin-left: 40px;
}

.user-info img {
  width: 40px;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

/* ACTIVE CALORIES  */

.active-calories {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(214, 227, 248);
  padding: 0 10px;
  margin: 15px 10px 0;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}

.active-calories h1 {
  margin-top: 10px;
  font-size: 1.2rem;
}

.active-calories-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.calories-content p {
  font-size: 1rem;
}

.calories-content p span {
  font-weight: 700;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  padding: 10px 0;
  /* width: 200px; */
}

.box h2 {
  position: relative;
  text-align: center;
  font-size: 1.25rem;
  color: rgb(91, 95, 111);
  font-weight: 600;
}

.box h2 small {
  font-size: 0.8rem;
  font-weight: 600;
}

.circle {
  position: relative;
  width: 80px;
  aspect-ratio: 1/1;
  background: conic-gradient(
    from 0deg,
    #590b94 0%,
    #590b94 0% var(--i),
    #b3b2b2 var(--i),
    #b3b2b2 100%
  );
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle::before {
  content: "";
  position: absolute;
  inset: 10px;
  background-color: rgb(214, 227, 248);
  border-radius: 50%;
}

/* MOBILE PERSONAL BESTS  */

.mobile-personal-bests {
  display: none;
}

/* FRIEND ACTIVITIES  */

.friends-activity {
  display: flex;
  flex-direction: column;
}

.friends-activity h1 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 15px 0 10px 15px;
}

.card-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card {
  background-color: #fff;
  margin: 0 10px;
  padding: 5px 7px;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}

.card-two {
  display: block;
}

.card-user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 5px;
}

.card-user-info img {
  width: 25px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
}

.card-user-info h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-left: 5px;
}

.card-img {
  display: block;
  width: 100%;
  aspect-ratio: 7/4;
  margin-bottom: 10px;
  object-fit: cover;
  border-radius: 10px;
  object-position: 50% 30%;
}

.card p {
  font-size: 0.9rem;
  padding: 0 5px 5px;
}

@media (max-width: 1500px) {
  main {
    grid-template-columns: 6% 94%;
  }

  .main-menu h1 {
    display: none;
  }

  .logo {
    display: block;
    width: 30px;
    margin: 20px auto;
  }

  .nav-text {
    display: none;
  }

  .content {
    grid-template-columns: 70% 30%;
  }
}

@media (max-width: 1310px) {
  main {
    grid-template-columns: 8% 92%;
    margin: 30px;
  }

  .content {
    grid-template-columns: 65% 35%;
  }

  .day-and-activity {
    margin-bottom: 10px;
  }

  .btn {
    padding: 8px 16px;
    margin: 10px 0;
    margin-right: 10px;
    font-size: 1rem;
  }

  .personal-bests-container {
    grid-template-rows: repeat(3, 98px);
    gap: 15px;
  }

  .box-one {
    flex-direction: row;
    justify-content: space-between;
    grid-area: 1 / 1 / 2 / 3;
    padding: 10px;
    font-size: 0.9rem;
  }

  .box-one img {
    max-width: 80px;
  }

  .box-two {
    flex-direction: row;
    justify-content: space-between;
    grid-area: 2 / 1 / 3 / 3;
  }

  .box-two img {
    max-width: 70px;
    align-self: center;
  }

  .box-three {
    flex-direction: row;
    justify-content: space-between;
    grid-area: 3 / 1 / 4 / 3;
  }

  .box-three img {
    max-width: 60px;
    align-self: center;
  }
	
	.right-content {
		grid-template-rows: 4% 20% 76%;
		margin: 15px 15px 15px 0;
	}
}

@media (max-width: 1150px) {
  .content {
    grid-template-columns: 60% 40%;
  }

  .left-content {
    grid-template-rows: 50% 50%;
    margin: 15px;
    padding: 20px;
  }

  .btn {
    padding: 8px 8px;
    font-size: 0.9rem;
  }

  .personal-bests-container {
		grid-template-rows: repeat(3, 70px);
    gap: 10px;
  }

  .activity-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 150px);
  }

  .img-one {
    grid-area: 1 / 1 / 2 / 2;
  }

  .img-two {
    grid-area: 2 / 1 / 3 / 2;
  }

  .img-three {
    display: none;
  }

  .img-four {
    grid-area: 1 / 2 / 2 / 3;
  }

  .img-five {
    grid-area: 1 / 3 / 2 / 4;
  }

  .img-six {
    grid-area: 2 / 2 / 3 / 4;
  }

  .left-bottom {
    grid-template-columns: 100%;
    gap: 0;
  }

  .right-content {
    grid-template-rows: 4% 19% 36% 41%;
  }

  .personal-bests {
    display: none;
  }

  .mobile-personal-bests {
    display: block;
    margin: 0 10px;
  }

  .mobile-personal-bests h1 {
    margin-top: 20px;
    font-size: 1.2rem;
  }

  .card-two {
    display: none;
  }

  .card-img {
    aspect-ratio: 16/9;
  }
}

@media (max-width: 1050px) {
	 .right-content {
    grid-template-rows: 5% 19% 36% 40%;
  }
}

@media (max-width: 910px) {
  main {
    grid-template-columns: 10% 90%;
    margin: 20px;
  }

  .content {
    grid-template-columns: 55% 45%;
  }

  .left-content {
    grid-template-rows: 50% 50%;
    padding: 30px 20px 20px;
  }

  .activity-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 150px);
  }

  .img-one {
    grid-area: 1 / 1 / 2 / 2;
  }

  .img-two {
    grid-area: 2 / 1 / 3 / 2;
  }

  .img-three {
    display: none;
  }

  .img-four {
    grid-area: 1 / 2 / 2 / 3;
  }

  .img-five {
    grid-area: 2 / 2 / 3 / 3;
  }

  .img-six {
    display: none;
  }
}

@media (max-width: 800px) {
  .content {
    grid-template-columns: 52% 48%;
  }
}

@media (max-width: 700px) {
  main {
    grid-template-columns: 15% 85%;
  }

  .content {
    grid-template-columns: 100%;
    grid-template-rows: 45% 55%;
    grid-template-areas:
      "rightContent"
      "leftContent";
  }

  .left-content {
    grid-area: leftContent;
		grid-template-rows: 45% 55%;
    padding: 10px 20px 10px;
  }

  .right-content {
    grid-area: rightContent;
		grid-template-rows: 5% 40% 50%;
    margin: 15px 15px 0 15px;
    padding: 10px 0 0;
    gap: 15px;
  }

  .activities,
  .weekly-schedule {
    margin-top: 10px;
  }

  .active-calories-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .friends-activity {
    display: none;
  }
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. Let's break the code

1. It selects all elements with the class "nav-item" and stores them in the navItems constant using document.querySelectorAll(".nav-item").

2. It then uses the forEach method to iterate over each of the selected navigation items (navItems). For each item, it adds a click event listener.

3. Inside the click event listener, the code first resets the class of all navigation items to "nav-item" using another forEach loop. This ensures that all navigation items have the default class.

4. After resetting the classes, the class of the clicked navigation item (navItem) is set to "nav-item active". This effectively highlights the clicked navigation item by applying the "active" class to it.

Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

const navItems = document.querySelectorAll(".nav-item");

navItems.forEach((navItem, i) => {
  navItem.addEventListener("click", () => {
    navItems.forEach((item, j) => {
      item.className = "nav-item";
    });
    navItem.className = "nav-item active";
  });
});

Final Output:

Building a Responsive Sports Dashboard using HTML, CSS, and JavaScript.gif
Read Alsoindustrial web design how to create a standout landing page with html and pure css.jpgIndustrial Web Design: How to Create a Standout Landing Page with HTML and Pure CSS

Conclusion:

In conclusion, you've embarked on a journey to create a cutting-edge sports dashboard, leveraging the trifecta of HTML, CSS, and JavaScript. This guide has equipped you with the foundational knowledge and practical skills needed to design and develop a responsive interface that brings sports data to life.

As you wrap up your web development endeavor, remember that the world of sports and technology is ever-evolving. Stay curious, explore new design trends, and consider integrating emerging technologies to keep your dashboard relevant and engaging.

Thank you for joining us on this exploration of responsive sports dashboard creation. Keep coding, innovating, and pushing the boundaries of what's possible in the dynamic realm of web development. Best of luck on your coding adventures, and may your sports dashboard inspire and delight its users!

Code by: Ecem Gokdogan

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 😊

Tags: sports dashboard, responsive web design, html, css, javascript, web development, data visualization, source code, interactive sports dashboard, front-end web development, css grid layout, real-time data display, javascript chart libraries, user-friendly dashboard design
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post