Build a Cricket Team Card App with HTML, CSS and JavaScript

Learn how to create a Team Card App (Cricket) with feature comparison using HTML, CSS, and JavaScript. Step-by-step guide for beginners.

Cricket Team Card App: HTML, CSS & JS Tutorial

This Cricket Team Card App is an interactive web application built with HTML, CSS, and JavaScript that showcases detailed information about top international cricket teams. Users can explore team statistics, filter players by position (batsman, bowler, wicketkeeper, all-rounder), and switch between light and dark themes for optimal viewing. This beginner-friendly tutorial demonstrates how to organize cricket data, style player cards with CSS, and implement dynamic filtering using JavaScript. Perfect for learning modern web development techniques while building a practical sports statistics viewer.

Introduction
HTML Code
CSS Code
JavaScript Code
Conclusion
Preview

Prerequisites

HTML
CSS
JavaScript

Implementation Details

The Team Card App HTML file lays out the structure for a cricket team showcase web page. It organizes sections for the app title, theme toggle, team selector, team details (sport, year, coach), player cards, and links to styling and JavaScript. This foundation lets users browse teams, filter players, and enjoy light/dark themes.

HTML Code (index.html)

                            
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cricket Team Cards</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body>
    <div class="head">
        <img src="image.png" alt="">
        <h1 class="title"><span>T</span><span>E</span><span>A</span><span>M</span>
            <span>S</span><span>T</span><span>A</span><span>T</span><span>S</span>
        </h1>
        <button class="theme-toggle">
            <i class="fa-solid fa-moon"></i>
        </button>
    </div>
    <hr>
    <main>
        <div class="team-stats">
            <div class="teams">
                <label for="team-select" class="option-label">SELECT TEAM:</label>
                <select name="team-select" id="team-select">
                    <option value="India">India</option>
                    <option value="Sri Lanka">Sri Lanka</option>
                    <option value="Australia">Australia</option>
                    <option value="England">England</option>
                    <option value="South Africa">South Africa</option>
                    <option value="New Zealand">New Zealand</option>
                    <option value="Afghanistan">Afghanistan</option>
                    <option value="Bangladesh">Bangladesh</option>
                    <option value="Netherlands">Netherlands</option>
                    <option value="Pakistan">Pakistan</option>
                </select>
            </div>
            <!-- <p>Team: <span id="team"></span></p> -->
            <p>SPORT: <span id="sport"></span></p>
            <p>YEAR: <span id="year"></span></p>
            <p>HEAD COACH: <span id="coach"></span></p>
        </div>
        <!-- Dropdown menu -->
        <label for="players" class="options-label">Filter Teammates: </label>
        <select name="players" id="players" style="height: 30px;">
            <option value="all">All</option>
            <option value="nickname">Nicknames</option>
            <option value="batsman">Batsman</option>
            <option value="bowler">Bowlers</option>
            <option value="wicketkeeper">Wicketkeepers</option>
            <option value="all-rounder">All Rounders</option>
        </select>
        <div class="cards" id="player-cards">
            <div class="player-card">
                <h2>Rohit Sharma (Captain)</h2>
                <p>Position: <span class="position-batsman">batsman</span></p>
                <p>Number: 45</p>
                <p>Nickname: Hitman</p>
            </div>
            <div class="player-card">
                <h2>Hardik Pandya</h2>
                <p>Position: <span class="position-all-rounder">all-rounder</span></p>
                <p>Number: 33</p>
                <p>Nickname: N/A</p>
            </div>
            <div class="player-card">
                <h2>Virat Kohli</h2>
                <p>Position: <span class="position-batsman">batsman</span></p>
                <p>Number: 18</p>
                <p>Nickname: Cheeku</p>
            </div>
            <div class="player-card">
                <h2>Suryakumar Yadav</h2>
                <p>Position: <span class="position-batsman">batsman</span></p>
                <p>Number: 63</p>
                <p>Nickname: SKY</p>
            </div>
            <div class="player-card">
                <h2>Yashasvi Jaiswal</h2>
                <p>Position: <span class="position-batsman">batsman</span></p>
                <p>Number: N/A</p>
                <p>Nickname: N/A</p>
            </div>
            <div class="player-card">
                <h2>Rishabh Pant</h2>
                <p>Position: <span class="position-wicketkeeper">wicketkeeper</span></p>
                <p>Number: 17</p>
                <p>Nickname: N/A</p>
            </div>
            <div class="player-card">
                <h2>Sanju Samson</h2>
                <p>Position: <span class="position-wicketkeeper">wicketkeeper</span></p>
                <p>Number: N/A</p>
                <p>Nickname: N/A</p>
            </div>
            <div class="player-card">
                <h2>Shivam Dube</h2>
                <p>Position: <span class="position-all-rounder">all-rounder</span></p>
                <p>Number: 25</p>
                <p>Nickname: N/A</p>
            </div>
            <div class="player-card">
                <h2>Axar Patel</h2>
                <p>Position: <span class="position-all-rounder">all-rounder</span></p>
                <p>Number: 20</p>
                <p>Nickname: N/A</p>
            </div>
            <div class="player-card">
                <h2>Ravindra Jadeja</h2>
                <p>Position: <span class="position-all-rounder">all-rounder</span></p>
                <p>Number: 8</p>
                <p>Nickname: Jaddu</p>
            </div>
            <div class="player-card">
                <h2>Kuldeep Yadav</h2>
                <p>Position: <span class="position-bowler">bowler</span></p>
                <p>Number: 23</p>
                <p>Nickname: Chinaman</p>
            </div>
            <div class="player-card">
                <h2>Yuzvendra Chahal</h2>
                <p>Position: <span class="position-bowler">bowler</span></p>
                <p>Number: 3</p>
                <p>Nickname: N/A</p>
            </div>
            <div class="player-card">
                <h2>Arshdeep Singh</h2>
                <p>Position: <span class="position-bowler">bowler</span></p>
                <p>Number: 2</p>
                <p>Nickname: N/A</p>
            </div>
            <div class="player-card">
                <h2>Mohammed Siraj</h2>
                <p>Position: <span class="position-bowler">bowler</span></p>
                <p>Number: 13</p>
                <p>Nickname: Miyaan</p>
            </div>
            <div class="player-card">
                <h2>Jasprit Bumrah</h2>
                <p>Position: <span class="position-bowler">bowler</span></p>
                <p>Number: 93</p>
                <p>Nickname: Jassi</p>
            </div>
        </div>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

HTML File Tutorial (index.html)

The HTML file creates the basic structure and layout of your cricket team webpage.

Step 1: Set Up the Page Foundation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cricket Team Cards</title>

Declares this as an HTML5 document
Sets the page to use English language
Makes sure it displays properly on all devices
Sets the browser tab title

Step 2: Link External Files

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

Connects your CSS file for styling
Adds Font Awesome icons (like the moon icon for theme toggle)

Step 3: Create the Header Section

<div class="head">
  <img src="image.png" alt="">
  <h1 class="title">
    <span>T</span><span>E</span><span>A</span><span>M</span>
    <span>S</span><span>T</span><span>A</span><span>T</span><span>S</span>
  </h1>
  <button class="theme-toggle">
    <i class="fa-solid fa-moon"></i>
  </button>
</div>

Shows your app logo
Displays "TEAM STATS" as separate letters for animation effects
Adds a moon button for switching themes

Step 4: Add Team Selection and Information

<div class="teams">
  <label for="team-select" class="option-label">SELECT TEAM:</label>
  <select name="team-select" id="team-select">
    <option value="India">India</option>
    <option value="Australia">Australia</option>
    <!-- more teams -->
  </select>
</div>
<p>SPORT: <span id="sport"></span></p>
<p>YEAR: <span id="year"></span></p>
<p>HEAD COACH: <span id="coach"></span></p>

Creates a dropdown to choose cricket teams
Sets up empty spaces that JavaScript will fill with team details

Step 5: Add Player Filter

<label for="players" class="options-label">Filter Teammates: </label>
<select name="players" id="players">
  <option value="all">All</option>
  <option value="batsman">Batsman</option>
  <option value="bowler">Bowlers</option>
  <!-- more filters -->
</select>

Lets users filter players by their position

Step 6: Create Player Cards Container

<div class="cards" id="player-cards">
  <!-- JavaScript will add player cards here -->
</div>

Empty container where JavaScript will insert all player cards

Step 7: Link JavaScript

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

Connects the JavaScript file to make everything interactive

CSS Code (style.css)

                                
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {
    --dark-bg: #1a1a1a;
    --dark-black: #030303;
    --dark-gray: #333;
    --light-text: #f0f0f0;
    --secondary-bg: #2a2a2a;
    --accent-programming: #ffa500;
    --program: #f57c00;
    --size: 1.8rem;
    --mobile-size-h2: 1.6rem;
    --mobile-size-h3: 1.3rem;
    --p-size: 1rem;
    --h3: 1.15rem;
    --p: 0.85rem;
    --p-weight: 200;
    --level-tag: 0.7rem;
    --tag-weight: 400;
    --accent-hacking: #CB0404;
    --hacking-bg: #381717;
    --guide: #7b1fa2;
    --guide-bg: #311e38;
    --accent-blue: #007bff;
    --accent-blue-hover: #0056b3;
    --button-primary-hover: #0056b3;
    --button-secondary-bg: transparent;
    --button-secondary-border: #007bff;
    --button-secondary-hover-border: #0056b3;
    --python: #2482cf;
    --js: #f7df1e;
    --terminal: #1f4788;
    --html: #e34f26;
    --css: #296d9e;

    --problem-section-bg: #1f1f1f;
    --problem-header-color: #00bcd4;
    --problem-card-bg: #282828;
    --problem-card-border: #00bcd4;
    --problem-tag-bg: #005f6b;
    --problem-tag-text: #e0f7fa;
    --solve-btn-bg: #00bcd4;
    --solve-btn-hover: #0097a7;
}

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

body {
    font-family: "Ubuntu", sans-serif;
    background-color: var(--dark-bg);
    font-weight: 700;
    color: var(--light-text);
    line-height: 1.6;
    min-height: 100vh;
}

.container {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar {
    background-color: var(--dark-gray);
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1000;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--light-text);
}

.navbar .logo i {
    margin-right: 8px;
    color: #007bff;
}

.navbar .logo span {
    font-family: "Winky Rough", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: bolder;
}

.navbar nav ul {
    list-style: none;
    display: flex;
    gap: 10px;
}

.navbar nav ul li {
    margin-left: 20px;
}

.navbar nav ul li a {
    color: var(--light-text);
    padding: 18px 8px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.navbar nav ul li a:hover {
    color: #007bff;
    background-color: var(--secondary-bg);
}

.navbar .search-bar {
    display: flex;
    align-items: center;
    background-color: var(--dark-bg);
    border-radius: 5px;
    padding: 8px 12px;
    margin-left: 25px;
    border: 1px solid #444;
}

.navbar .search-bar:focus-within {
    border-color: var(--button-primary-hover);
}

.navbar .search-bar i {
    color: #aaa;
    margin-right: 10px;
}

.navbar .search-bar input {
    background-color: var(--dark-bg);
    border: none;
    outline: none;
    color: var(--light-text);
    font-size: 1rem;
    width: 200px;
}

.navbar .search-bar input::placeholder {
    color: #aaa;
}

.hero-section {
    text-align: center;
    padding: 100px 0;
}

.hero-section h1 {
    font-size: 3.2rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-section .highlight-programming {
    color: var(--accent-programming);
}

.hero-section .highlight-hacking {
    color: var(--accent-hacking);
}

.hero-section p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 40px auto;
    color: #ccc;
}

.menu-toggle {
    display: none;
    font-size: 1.4rem;
    cursor: pointer;
    background: var(--dark-gray);
    border: 2px solid var(--dark-bg);
    padding-top: 2px;
    padding-left: 6px;
}

.welcome-section {
    background-color: var(--dark-black);
    padding: 80px 0;
    text-align: center;
}

.welcome-section .section-header {
    margin-bottom: 50px;
}

.welcome-section .section-header h2 {
    font-size: 1.8rem;
    color: var(--accent-blue);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-section .section-header h2::after {
    content: " ";
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--accent-blue);
    left: 50%;
    transform: translateX(-50px);
    bottom: 145px;
    border-radius: 2px;
    animation: typewriter 2s steps(20) infinite;
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 10%;
    }
}

.welcome-section .section-header h2 i {
    margin-right: 15px;
    font-size: 1.8rem;
}

.welcome-section .section-header p {
    font-size: var(--p-size);
    max-width: 700px;
    margin: 0 auto;
    color: #bbb;
    font-weight: 200;
}

.welcome-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.card {
    background-color: #1e1e1e;
    border: 2px solid var(--button-primary-hover);
    border-radius: 5px;
    padding: 30px;
    text-align: left;
    max-width: 300px;
    max-height: 400px;
    box-shadow: 0 4px 10px rgba(9, 13, 252, 0.6);
    transition: transform 0.3s ease;
}

.card:hover {
    background-color: #1d3a62;
    transform: translateY(-5px);
}

.card .icon {
    font-size: 1.4rem;
    color: var(--accent-blue);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.card h3 {
    font-size: 1.15rem;
    color: var(--light-text);
    margin-bottom: 15px;
}

.card p {
    font-size: 0.9rem;
    font-weight: 300;
    color: #ccc;
    margin-bottom: 10px;
    line-height: 1.5;
    min-height: 75px;
}

.card a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

.card a i {
    margin-left: 8px;
    transition: margin-left 0.3s ease;
    font-size: 0.8rem;
}

.featured-content-section {
    background-color: var(--dark-bg);
    padding: 80px 0;
    text-align: center;
}

.featured-content-section .section-header {
    margin-bottom: 50px;
}

.featured-content-section .section-header h2 {
    font-size: var(--size);
    color: #28a745;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-bottom: 15px;
}

.featured-content-section .section-header h2 i {
    margin-right: 15px;
    font-size: var(--size);
}

.featured-content-section .section-header h2::after {
    content: " ";
    position: absolute;
    width: 0;
    height: 2px;
    background-color: #28a745;
    left: 50%;
    transform: translateX(-50px);
    bottom: 22px;
    border-radius: 2px;
    animation: typewriter 2s steps(20) infinite;
}

.featured-content-section .section-header p,
.programming-tutorials-section .section-header p {
    font-size: var(--p-size);
    max-width: 700px;
    margin: 0 auto;
    color: #bbb;
    font-weight: var(--p-weight);
}

.content-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 50px;
}

.content-card {
    background-color: var(--dark-black);
    border: 1px solid #28a745;
    border-radius: 5px;
    width: 300px;
    max-height: 500px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(48, 178, 44, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(48, 178, 44, 0.4);
}

.content-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.content-card-body {
    padding: 20px;
}

.content-card .tags {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.content-card .tag {
    padding: 5px 10px;
    border-radius: 3px;
    font-size: var(--level-tag);
    font-weight: var(--tag-weight);
    text-transform: uppercase;
    color: #28a745;
}

.content-card .tag.new {
    background-color: #192a1a;
}

.content-card .tag.program {
    color: var(--program);
    background-color: #493118;
}

.content-card .tag.hacking {
    color: var(--accent-hacking);
    background-color: var(--hacking-bg);
}

.content-card .tag.guide {
    color: var(--guide);
    background-color: var(--guide-bg);
}

.content-card .tag.level {
    color: #aaa;
}

.content-card h3 {
    font-size: var(--h3);
    color: var(--light-text);
    margin-bottom: 10px;
    line-height: 1.3;
}

.content-card p {
    font-size: var(--p);
    color: #cccc;
    margin-bottom: 15px;
    line-height: 1.5;
    min-height: 50px;
    font-weight: 200;
}

.content-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 15px;
    font-weight: 200;
}

.content-card .read-more {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: color-left 0.3s ease;
}

.content-card .read-more i {
    margin-left: 8px;
    transition: margin-left 0.3s ease;
}

.content-card .read-more:hover {
    color: var(--button-primary-hover);
}

.content-card .read-more:hover i {
    margin-left: 12px;
}

.view-all-btn {
    background-color: #28a745;
    color: #f0f0f0;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.8rem;
    transition: background-color 0.3s ease, transform 0.1s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.content-card.one.hidden-release,
.tutorial-project-card.hidden-project {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    visibility: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease, margin 0.5s ease, visibility 0.5s ease;
}

.content-card.one.show-release,
.tutorial-project-card.show-project {
    max-height: 500px;
    opacity: 1;
    margin-top: 30px;
    margin-bottom: 0;
    visibility: visible;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease, visibility 0.5s ease;
    padding-top: 30px;
    padding-bottom: 30px;
    border: 2px solid var(--program);
}

.view-all-btn:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

.programming-tutorials-section {
    background-color: var(--dark-black);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: visible;
}

.programming-tutorials-section .section-header {
    margin-bottom: 50px;
}

.programming-tutorials-section .section-header h2 {
    font-size: var(--size);
    color: var(--program);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-bottom: 15px;
}

.programming-tutorials-section .section-header h2 i {
    margin-right: 15px;
    font-size: var(--size);
}

.programming-tutorials-section .section-header h2::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--program);
    left: 50%;
    transform: translateX(-50px);
    bottom: 18px;
    border-radius: 2px;
    animation: typewriter 2s steps(20) infinite;
}

.programming-tutorials-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 20px;
}

.programming-tutorials-header h3,
.tutorial-projects-header h3 {
    font-size: 1.6rem;
    color: var(--program);
    margin: 0;
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 10px;
}

.carousel-nav {
    position: relative;
}

.carousel-nav button {
    width: 30px;
    height: 30px;
    font-size: larger;
    background-color: var(--program);
    border: none;
    cursor: pointer;
    color: #f0f0f0;
    border-radius: 3px;
    margin: 0 5px;
    transition: background-color 0.3s ease;
}

.carousel-nav button:hover {
    background-color: #c3670c;
}

.carousel-nav button.disabled {
    background-color: var(--dark-gray);
    cursor: not-allowed;
    opacity: 0.5;
}

.carousel-nav button.disabled:hover {
    background-color: var(--dark-gray);
}

.language-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    padding: 15px 0 50px 20px;
    scroll-padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
}

.language-cards::-webkit-scrollbar {
    display: none;
}

.language-card {
    position: relative;
    background-color: var(--dark-bg);
    border: 2px solid var(--program);
    border-radius: 5px;
    padding: 25px;
    text-align: left;
    box-shadow: 0 4px 10px rgba(211, 114, 18, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    max-width: 450px;
    max-height: 500px;
    scroll-snap-align: start;
    flex: 0 0 350px;
    margin-bottom: 15px;
    scroll-snap-align: start;
}

.language-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(211, 114, 18, 0.4);
}

.language-card .icon {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.language-card .tag.level,
.tutorial-project-card .tag.level {
    color: #aaa;
    font-size: var(--level-tag);
    font-weight: 400;
    text-transform: uppercase;
}

.language-card .icon.python {
    color: #3776ab;
}

.language-card .icon.javascript {
    color: #f7df1e;
}

.language-card .icon.windows {
    color: #1f4788;
}

.language-card h3,
.tutorial-project-card h3 {
    font-size: var(--h3);
    color: var(--light-text);
    margin-bottom: 10px;
}

.language-card p,
.tutorial-project-card p {
    font-size: var(--p-size);
    color: #ccc;
    flex-grow: 1;
    font-weight: var(--p-weight);
}

.language-card .meta-link,
.tutorial-project-card .meta-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.language-card .meta-link span,
.tutorial-project-card .meta-link span,
.tutorial-project-card .meta-link span i {
    font-size: 0.85rem;
    color: #aaa;
    font-weight: var(--p-weight);
}

.language-card .btn-start,
.tutorial-project-card .btn-start {
    background-color: var(--program);
    color: #f0f0f0;
    border: 2px solid var(--program);
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 400;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.language-card .btn-start::after {
    content: "▶";
    font-size: 0.8rem;
    margin-left: 8px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.language-card .btn-start:hover::after {
    opacity: 2;
    transform: translateX(7px);
    color: #f0f0f0;
}

.tutorial-projects-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 20px;
}

.tutorial-projects-header .view-all-btn {
    background-color: var(--program);
    color: #f0f0f0;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.8rem;
    transition: background-color 0.3s ease, transform 0.1s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.tutorial-project-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    justify-content: space-between;
    padding-bottom: 20px;
    max-width: 1150px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.tutorial-project-card {
    background-color: var(--dark-bg);
    border: 2px solid var(--program);
    border-radius: 5px;
    padding: 30px;
    text-align: left;
    width: calc(50% - 15px);
    box-shadow: 0 4px 10px rgba(211, 114, 18, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tutorial-project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(211, 114, 18, 0.4);
}

.tutorial-project-card .tags {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.tutorial-project-card .tag {
    padding: 5px 10px;
    border-radius: 3px;
    font-size: var(--level-tag);
    font-weight: var(--tag-weight);
    text-transform: uppercase;
}

.tutorial-project-card .tag.python {
    color: var(--python);
    background-color: #1d3042;
}

.tutorial-project-card .tag.html {
    color: var(--html);
    background-color: #493118;
}

.tutorial-project-card .tag.css {
    color: var(--css);
    background-color: #1d3042;
}

.tutorial-project-card .tag.js {
    color: var(--js);
    background-color: #755f18;
}

.tutorial-project-card .learn-list {
    list-style: none;
    margin-bottom: 10px;
    margin-top: 14px;
}

.tutorial-project-card .topics {
    background-color: #121212;
    padding: 2px 10px;
    margin-top: 15px;
    border-radius: 5px;
}

.tutorial-project-card .topics h4 {
    color: var(--program);
    font-size: var(--p);
    margin-top: 10px;
}

.tutorial-project-card .learn-list li {
    font-size: var(--p);
    font-weight: var(--tag-weight);
    color: #bbb;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
}

.tutorial-project-card .learn-list li i {
    color: var(--program);
    margin-right: 10px;
    font-size: var(--p);
    line-height: 1.5;
}

.tutorial-project-card .meta-link span i {
    margin-right: 5px;
}

.tutorial-project-card .start-link {
    color: #f0f0f0;
    text-decoration: none;
}

.tutorial-project-card .btn-start:hover {
    background-color: #bb6f1ef3;
}

/* Mobile Specific Styles */
@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--dark-gray);
        overflow: hidden;
        max-height: 0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        transition: max-height 0.3s ease-out;
    }

    .nav-links.active {
        max-height: 450px;
    }

    .navbar .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar .logo {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .navbar .logo .logo-text {
        display: flex;
        align-items: center;
    }

    .nav-links ul {
        flex-direction: column;
        width: 100%;
        margin-top: 0;
    }

    .nav-links ul li a:hover {
        width: 96%;
        background-color: var(--secondary-bg);
        border-radius: 5px;
    }

    nav a:last-child {
        margin-bottom: 15px;
    }

    nav a {
        margin-left: 10px;
        padding: 10px 45px;
        width: 100%;
        display: block;
    }

    .menu-toggle {
        display: block;
    }

    .menu-toggle i {
        font-size: 1.5rem;
        color: var(--dark-bg);
    }

    .navbar {
        padding: 10px 0;
    }

    .navbar nav ul {
        flex-direction: column;
        width: 100%;
        margin-top: 15px;
    }

    .navbar nav ul li {
        margin: -10px 32px;
    }

    .navbar .search-bar {
        width: 400px;
        margin: 15px auto 0 auto;
        text-align: center;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-section p {
        font-size: 1rem;
    }

    .welcome-section {
        padding: 60px 0;
    }

    .welcome-section .section-header h2,
    .welcome-section .section-header h2 i {
        font-size: 1.4rem;
    }

    .welcome-section .section-header h2::after {
        bottom: 86px;
        animation: typewriter 2s steps(20) infinite;
    }

    @keyframes typewriter {
        from {
            width: 0;
        }

        to {
            width: 30%;
        }
    }

    .welcome-section .section-header p {
        font-size: 0.8rem;
    }

    .welcome-cards {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .card {
        width: calc(100% - 40px);
        margin: 0 auto;
    }

    .featured-content-section {
        padding: 60px 0;
    }

    .content-card {
        width: calc(100% - 40px);
        margin: 0 auto;
    }

    .content-card img {
        height: 180px;
    }

    .programming-tutorials-section .section-header h2 {
        font-size: var(--mobile-size-h2);
    }

    .programming-tutorials-header h3 {
        margin-left: 60px;
        font-size: var(--mobile-size-h3);
    }

    .language-cards {
        position: relative;
        left: 68px;
        width: 370px;
    }

    .language-card {
        position: relative;
        max-width: 500px;
        flex: 0 0 350px;
    }

    .carousel-nav {
        position: relative;
        left: -10px;
    }

}

.problem-section {
    background-color: var(--problem-section-bg);
    padding: 80px 0;
    text-align: center;
}

.problem-section .problem-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.problem-section .problem-header h3 {
    font-size: var(--size);
    color: var(--problem-header-color);
    margin: 0;
    position: relative;
    padding-bottom: 15px;
}

.problem-section .problem-header h3::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--problem-header-color);
    left: 0;
    bottom: 0;
    border-radius: 2px;
    animation: typewriter 2s steps(20) infinite;
}

.problem-section .view-all-btn {
    background-color: var(--solve-btn-bg);
    color: var(--light-text);
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.8rem;
    transition: background-color 0.3s ease, transform 0.1s ease;
    border: none;
    cursor: pointer;
}

.problem-section .view-all-btn:hover {
    background-color: var(--solve-btn-hover);
    transform: translateY(-2px);
}

.problem-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

.problem-card {
    background-color: var(--problem-card-bg);
    border: 2px solid var(--problem-card-border);
    border-radius: 5px;
    padding: 30px;
    text-align: left;
    width: calc(50% - 15px);
    box-shadow: 0 4px 10px rgba(0, 188, 212, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--light-text);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.problem-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.6);
}

.problem-card h3 {
    font-size: var(--h3);
    color: var(--light-text);
    margin-bottom: 10px;
}

.problem-card p {
    font-size: var(--p-size);
    color: #ccc;
    font-weight: var(--p-weight);
    margin-bottom: 15px;
}

.problem-card .tags {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.problem-card .tag {
    padding: 5px 10px;
    border-radius: 3px;
    font-size: var(--level-tag);
    font-weight: var(--tag-weight);
    text-transform: uppercase;
    background-color: var(--problem-tag-bg);
    color: var(--problem-tag-text);
}

.problem-meta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    width: 100%;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.problem-card .total-problem {
    font-size: var(--p-size);
    color: #aaa;
    margin-bottom: 0;
}

.problem-card .solve-btn {
    background-color: var(--solve-btn-bg);
    color: var(--light-text);
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 400;
    font-size: 0.95rem;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-block;
    margin-top: 0;
}

.problem-card .solve-btn:hover {
    background-color: var(--solve-btn-hover);
}

@media (max-width: 768px) {
    .problem-section {
        padding: 60px 0;
    }

    .problem-section .problem-header h3 {
        font-size: var(--mobile-size-h3);
    }

    .problem-cards-container {
        flex-direction: column;
        align-items: center;
    }

    .problem-card {
        width: calc(100% - 40px);
    }
}

CSS File Tutorial (style.css)

The CSS file makes your app look professional with colors, layouts, animations, and both light/dark themes.

Step 1: Set Up Theme Variables

:root {
  --color-bg-body: #f0f2f5;
  --color-text-body: #333333;
  --color-card-bg: #B6B09F;
  /* more color variables */
}

Creates color variables that can be easily changed
Sets up default colors for light theme

Step 2: Create Dark Theme Override

body.dark-theme {
  --color-bg-body: #1a202c;
  --color-text-body: #e2e8f0;
  /* darker colors for dark theme */
}

When dark theme is active, these colors replace the light theme colors

Step 3: Style the Basic Page

body {
  background-color: var(--color-bg-body);
  color: var(--color-text-body);
  font-family: 'Inter', sans-serif;
  text-align: center;
  transition: background-color 0.3s ease;
}

Sets the page background and text colors using variables
Centers all content
Adds smooth transitions when switching themes

Step 4: Style the Header

.head {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title span {
  font-size: 50px;
  transition: transform 0.2s ease;
}

.title span:hover {
  transform: scale(1.5);
}

Arranges logo, title, and theme button in a row
Makes each letter in "TEAM STATS" grow when you hover over it

Step 5: Style the Theme Toggle Button

.theme-toggle {
  position: absolute;
  top: 55px;
  right: 130px;
  border-radius: 50%;
  background: var(--color-toggle-bg);
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  transform: translateY(-4px);
}

Positions the theme button in top-right corner
Makes it round and adds hover effects

Step 6: Style Player Cards

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.player-card {
  background-color: var(--color-card-bg);
  padding: 1.3rem;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.player-card:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

Arranges cards in rows that wrap to new lines
Makes cards grow and add shadows when you hover over them

Step 7: Add Position Colors

.position-batsman { color: var(--color-position-batsman); }
.position-bowler { color: var(--color-position-bowler); }
.position-wicketkeeper { color: var(--color-position-wicketkeeper); }
.position-all-rounder { color: var(--color-position-all-rounder); }

Colors each player position differently (red for batsman, blue for bowler, etc.)

Step 8: Make It Mobile-Friendly

media (max-width: 768px) {
  .title span { font-size: 25px; }
  .theme-toggle { top: 40px; right: 50px; }
  img { width: 60px; height: 60px; }
}

Makes text smaller and repositions elements on phone screens

JavaScript Code (script.js)

                                    
const themeToggle = document.querySelector(".theme-toggle");
const teamNameElement = document.getElementById("team");
const typeOfSportElement = document.getElementById("sport");
const worldCupYearElement = document.getElementById("year");
const headCoachElement = document.getElementById("coach");
const playerCardsContainer = document.getElementById("player-cards");
const playersDropdownList = document.getElementById("players");
const teamSelectDropdown = document.getElementById("team-select");

const allCricketTeams = [
    {
        team: "India",
        sport: "Cricket",
        year: 2024,
        isWorldCupWinner: false,
        headCoach: {
            coachName: "Gautam Gambhir",
        },
        players: [
            { name: "Rohit Sharma", position: "batsman", number: 45, isCaptain: true, nickname: "Hitman" },
            { name: "Hardik Pandya", position: "all-rounder", number: 33, isCaptain: false, nickname: "N/A" },
            { name: "Virat Kohli", position: "batsman", number: 18, isCaptain: false, nickname: "Cheeku" },
            { name: "Suryakumar Yadav", position: "batsman", number: 63, isCaptain: false, nickname: "SKY" },
            { name: "Yashasvi Jaiswal", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Rishabh Pant", position: "wicketkeeper", number: 17, isCaptain: false, nickname: "N/A" },
            { name: "Sanju Samson", position: "wicketkeeper", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Shivam Dube", position: "all-rounder", number: 25, isCaptain: false, nickname: "N/A" },
            { name: "Axar Patel", position: "all-rounder", number: 20, isCaptain: false, nickname: "N/A" },
            { name: "Ravindra Jadeja", position: "all-rounder", number: 8, isCaptain: false, nickname: "Jaddu" },
            { name: "Kuldeep Yadav", position: "bowler", number: 23, isCaptain: false, nickname: "Chinaman" },
            { name: "Yuzvendra Chahal", position: "bowler", number: 3, isCaptain: false, nickname: "N/A" },
            { name: "Arshdeep Singh", position: "bowler", number: 2, isCaptain: false, nickname: "N/A" },
            { name: "Mohammed Siraj", position: "bowler", number: 13, isCaptain: false, nickname: "Miyaan" },
            { name: "Jasprit Bumrah", position: "bowler", number: 93, isCaptain: false, nickname: "Jassi" }
        ]
    },
    {
        team: "Sri Lanka",
        sport: "Cricket",
        year: 2024,
        isWorldCupWinner: false,
        headCoach: {
            coachName: "Sanath Jayasuriya",
        },
        players: [
            { name: "Charith Asalanka", position: "batsman", number: 16, isCaptain: true, nickname: "N/A" },
            { name: "Kusal Mendis", position: "wicketkeeper", number: 99, isCaptain: false, nickname: "N/A" },
            { name: "Pathum Nissanka", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Dhananjaya de Silva", position: "all-rounder", number: 75, isCaptain: false, nickname: "N/A" },
            { name: "Kamindu Mendis", position: "all-rounder", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Dunith Wellalage", position: "all-rounder", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Dasun Shanaka", position: "all-rounder", number: 27, isCaptain: false, nickname: "N/A" },
            { name: "Angelo Mathews", position: "all-rounder", number: 69, isCaptain: false, nickname: "N/A" },
            { name: "Nuwan Thushara", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Dilshan Madushanka", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Maheesh Theekshana", position: "bowler", number: 1, isCaptain: false, nickname: "N/A" },
            { name: "Dushmantha Chameera", position: "bowler", number: 90, isCaptain: false, nickname: "N/A" },
            { name: "Kasun Rajitha", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Sadeera Samarawickrama", position: "wicketkeeper", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Wanindu Hasaranga", position: "all-rounder", number: "N/A", isCaptain: false, nickname: "N/A" }
        ]
    },
    {
        team: "Australia",
        sport: "Cricket",
        year: 2024,
        isWorldCupWinner: false,
        headCoach: {
            coachName: "Andrew McDonald",
        },
        players: [
            { name: "Pat Cummins", position: "bowler", number: 30, isCaptain: true, nickname: "N/A" },
            { name: "Steve Smith", position: "batsman", number: 49, isCaptain: false, nickname: "Smudge" },
            { name: "Travis Head", position: "batsman", number: 62, isCaptain: false, nickname: "N/A" },
            { name: "Marnus Labuschagne", position: "batsman", number: 33, isCaptain: false, nickname: "Marnus" },
            { name: "Alex Carey", position: "wicketkeeper", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Josh Inglis", position: "wicketkeeper", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Glenn Maxwell", position: "all-rounder", number: 32, isCaptain: false, nickname: "The Big Show" },
            { name: "Marcus Stoinis", position: "all-rounder", number: 17, isCaptain: false, nickname: "Stoin" },
            { name: "Mitchell Starc", position: "bowler", number: 56, isCaptain: false, nickname: "N/A" },
            { name: "Josh Hazlewood", position: "bowler", number: 38, isCaptain: false, nickname: "N/A" },
            { name: "Adam Zampa", position: "bowler", number: 46, isCaptain: false, nickname: "Zamps" },
            { name: "Cameron Green", position: "all-rounder", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "David Warner", position: "batsman", number: 31, isCaptain: false, nickname: "Davey" },
            { name: "Nathan Ellis", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Sean Abbott", position: "bowler", number: "N/A", isCaptain: false, nickname: "Abbott" }
        ]
    },
    {
        team: "England",
        sport: "Cricket",
        year: 2024,
        isWorldCupWinner: false,
        headCoach: {
            coachName: "Brendon McCullum",
        },
        players: [
            { name: "Ben Stokes", position: "all-rounder", number: 55, isCaptain: true, nickname: "N/A" },
            { name: "Joe Root", position: "batsman", number: 66, isCaptain: false, nickname: "N/A" },
            { name: "Zak Crawley", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Ollie Pope", position: "batsman", number: 80, isCaptain: false, nickname: "N/A" },
            { name: "Jonny Bairstow", position: "wicketkeeper", number: 51, isCaptain: false, nickname: "Jonny B" },
            { name: "Jos Buttler", position: "wicketkeeper", number: 63, isCaptain: false, nickname: "N/A" },
            { name: "Moeen Ali", position: "all-rounder", number: 18, isCaptain: false, nickname: "Moeen" },
            { name: "Chris Woakes", position: "bowler", number: 19, isCaptain: false, nickname: "Woakesy" },
            { name: "Mark Wood", position: "bowler", number: 36, isCaptain: false, nickname: "Woody" },
            { name: "James Anderson", position: "bowler", number: "N/A", isCaptain: false, nickname: "Jimmy" },
            { name: "Stuart Broad", position: "bowler", number: 8, isCaptain: false, nickname: "Broad" },
            { name: "Jofra Archer", position: "bowler", number: 22, isCaptain: false, nickname: "N/A" },
            { name: "Harry Brook", position: "batsman", number: 88, isCaptain: false, nickname: "N/A" },
            { name: "Sam Curran", position: "all-rounder", number: 58, isCaptain: false, nickname: "N/A" },
            { name: "Adil Rashid", position: "bowler", number: 95, isCaptain: false, nickname: "Rash" }
        ]
    },
    {
        team: "South Africa",
        sport: "Cricket",
        year: 2024,
        isWorldCupWinner: false,
        headCoach: {
            coachName: "Shukri Conrad",
        },
        players: [
            { name: "Temba Bavuma", position: "batsman", number: 46, isCaptain: true, nickname: "N/A" },
            { name: "Quinton de Kock", position: "wicketkeeper", number: 12, isCaptain: false, nickname: "Quinny" },
            { name: "Aiden Markram", position: "batsman", number: 4, isCaptain: false, nickname: "N/A" },
            { name: "David Miller", position: "batsman", number: 10, isCaptain: false, nickname: "Killer Miller" },
            { name: "Heinrich Klaasen", position: "wicketkeeper", number: 45, isCaptain: false, nickname: "N/A" },
            { name: "Rassie van der Dussen", position: "batsman", number: 17, isCaptain: false, nickname: "Rassie" },
            { name: "Marco Jansen", position: "all-rounder", number: 27, isCaptain: false, nickname: "N/A" },
            { name: "Kagiso Rabada", position: "bowler", number: 25, isCaptain: false, nickname: "KG" },
            { name: "Anrich Nortje", position: "bowler", number: 24, isCaptain: false, nickname: "N/A" },
            { name: "Keshav Maharaj", position: "bowler", number: 6, isCaptain: false, nickname: "Kesh" },
            { name: "Tabraiz Shamsi", position: "bowler", number: 99, isCaptain: false, nickname: "Shamo" },
            { name: "Gerald Coetzee", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Reeza Hendricks", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Lungi Ngidi", position: "bowler", number: 22, isCaptain: false, nickname: "N/A" },
            { name: "Tristan Stubbs", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" }
        ]
    },
    {
        team: "New Zealand",
        sport: "Cricket",
        year: 2024,
        isWorldCupWinner: false,
        headCoach: {
            coachName: "Rob Walter",
        },
        players: [
            { name: "Kane Williamson", position: "batsman", number: 22, isCaptain: true, nickname: "N/A" },
            { name: "Devon Conway", position: "wicketkeeper", number: 88, isCaptain: false, nickname: "N/A" },
            { name: "Tom Latham", position: "wicketkeeper", number: 48, isCaptain: false, nickname: "N/A" },
            { name: "Daryl Mitchell", position: "all-rounder", number: 77, isCaptain: false, nickname: "N/A" },
            { name: "Glenn Phillips", position: "all-rounder", number: 40, isCaptain: false, nickname: "N/A" },
            { name: "Rachin Ravindra", position: "all-rounder", number: 4, isCaptain: false, nickname: "N/A" },
            { name: "Mitchell Santner", position: "all-rounder", number: 74, isCaptain: false, nickname: "N/A" },
            { name: "Trent Boult", position: "bowler", number: 18, isCaptain: false, nickname: "N/A" },
            { name: "Tim Southee", position: "bowler", number: 23, isCaptain: false, nickname: "N/A" },
            { name: "Lockie Ferguson", position: "bowler", number: 69, isCaptain: false, nickname: "N/A" },
            { name: "Matt Henry", position: "bowler", number: 15, isCaptain: false, nickname: "N/A" },
            { name: "Ish Sodhi", position: "bowler", number: 13, isCaptain: false, nickname: "N/A" },
            { name: "Michael Bracewell", position: "all-rounder", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Mark Chapman", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Will Young", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" }
        ]
    },
    {
        team: "Afghanistan",
        sport: "Cricket",
        year: 2024,
        isWorldCupWinner: false,
        headCoach: {
            coachName: "Jonathan Trott",
        },
        players: [
            { name: "Rashid Khan", position: "bowler", number: 19, isCaptain: true, nickname: "N/A" },
            { name: "Rahmanullah Gurbaz", position: "wicketkeeper", number: 21, isCaptain: false, nickname: "N/A" },
            { name: "Ibrahim Zadran", position: "batsman", number: 8, isCaptain: false, nickname: "N/A" },
            { name: "Najibullah Zadran", position: "batsman", number: 50, isCaptain: false, nickname: "N/A" },
            { name: "Mohammad Nabi", position: "all-rounder", number: 7, isCaptain: false, nickname: "N/A" },
            { name: "Gulbadin Naib", position: "all-rounder", number: 9, isCaptain: false, nickname: "N/A" },
            { name: "Azmatullah Omarzai", position: "all-rounder", number: 28, isCaptain: false, nickname: "N/A" },
            { name: "Karim Janat", position: "all-rounder", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Mujeeb Ur Rahman", position: "bowler", number: 11, isCaptain: false, nickname: "N/A" },
            { name: "Noor Ahmad", position: "bowler", number: 15, isCaptain: false, nickname: "N/A" },
            { name: "Naveen-ul-Haq", position: "bowler", number: 98, isCaptain: false, nickname: "N/A" },
            { name: "Fazalhaq Farooqi", position: "bowler", number: 44, isCaptain: false, nickname: "N/A" },
            { name: "Fareed Ahmad Malik", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Nangyal Kharoti", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Mohammad Ishaq", position: "wicketkeeper", number: "N/A", isCaptain: false, nickname: "N/A" }
        ]
    },
    {
        team: "Bangladesh",
        sport: "Cricket",
        year: 2024,
        isWorldCupWinner: false,
        headCoach: {
            coachName: "Phil Simmons",
        },
        players: [
            { name: "Najmul Hossain Shanto", position: "batsman", number: 15, isCaptain: true, nickname: "N/A" },
            { name: "Taskin Ahmed", position: "bowler", number: 3, isCaptain: false, nickname: "N/A" },
            { name: "Litton Das", position: "wicketkeeper", number: 28, isCaptain: false, nickname: "N/A" },
            { name: "Shakib Al Hasan", position: "all-rounder", number: 75, isCaptain: false, nickname: "N/A" },
            { name: "Towhid Hridoy", position: "batsman", number: 2, isCaptain: false, nickname: "N/A" },
            { name: "Mahmudullah Riyad", position: "all-rounder", number: 30, isCaptain: false, nickname: "N/A" },
            { name: "Mustafizur Rahman", position: "bowler", number: 90, isCaptain: false, nickname: "Fizz" },
            { name: "Shoriful Islam", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Tanzid Hasan Tamim", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Soumya Sarkar", position: "all-rounder", number: 59, isCaptain: false, nickname: "N/A" },
            { name: "Jaker Ali Anik", position: "wicketkeeper", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Tanvir Islam", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Shak Mahedi Hasan", position: "all-rounder", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Rishad Hossain", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Tanzim Hasan Sakib", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" }
        ]
    },
    {
        team: "Netherlands",
        sport: "Cricket",
        year: 2024,
        isWorldCupWinner: false,
        headCoach: {
            coachName: "Ryan Cook",
        },
        players: [
            { name: "Scott Edwards", position: "wicketkeeper", number: 4, isCaptain: true, nickname: "N/A" },
            { name: "Max O'Dowd", position: "batsman", number: 10, isCaptain: false, nickname: "N/A" },
            { name: "Michael Levitt", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Teja Nidamanuru", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Bas de Leede", position: "all-rounder", number: 1, isCaptain: false, nickname: "N/A" },
            { name: "Logan van Beek", position: "all-rounder", number: 9, isCaptain: false, nickname: "N/A" },
            { name: "Sybrand Engelbrecht", position: "all-rounder", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Wesley Barresi", position: "wicketkeeper", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Aryan Dutt", position: "bowler", number: 18, isCaptain: false, nickname: "N/A" },
            { name: "Paul van Meekeren", position: "bowler", number: 22, isCaptain: false, nickname: "N/A" },
            { name: "Vivian Kingma", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Saqib Zulfiqar", position: "all-rounder", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Tim Pringle", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Vikramjit Singh", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Kyle Klein", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" }
        ]
    },
    {
        team: "Pakistan",
        sport: "Cricket",
        year: 2024,
        isWorldCupWinner: false,
        headCoach: {
            coachName: "Mike Hesson",
        },
        players: [
            { name: "Babar Azam", position: "batsman", number: 56, isCaptain: true, nickname: "Bobby" },
            { name: "Mohammad Rizwan", position: "wicketkeeper", number: 16, isCaptain: false, nickname: "N/A" },
            { name: "Shaheen Afridi", position: "bowler", number: 10, isCaptain: false, nickname: "N/A" },
            { name: "Fakhar Zaman", position: "batsman", number: 39, isCaptain: false, nickname: "N/A" },
            { name: "Shadab Khan", position: "all-rounder", number: 7, isCaptain: false, nickname: "N/A" },
            { name: "Haris Rauf", position: "bowler", number: 150, isCaptain: false, nickname: "N/A" },
            { name: "Naseem Shah", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Iftikhar Ahmed", position: "all-rounder", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Imad Wasim", position: "all-rounder", number: 5, isCaptain: false, nickname: "N/A" },
            { name: "Saim Ayub", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Azam Khan", position: "wicketkeeper", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Usman Khan", position: "batsman", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Abbas Afridi", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Abrar Ahmed", position: "bowler", number: "N/A", isCaptain: false, nickname: "N/A" },
            { name: "Mohammad Amir", position: "bowler", number: 5, isCaptain: false, nickname: "N/A" }
        ]
    }
];

let currentTeam = allCricketTeams[0];
let currentFilter = "all";

allCricketTeams.forEach(team => Object.freeze(team));
allCricketTeams.forEach(team => team.players.forEach(player => Object.freeze(player)));

const renderTeamData = (teamObject) => {
    const { sport, team, year, headCoach, players } = teamObject;
    const { coachName } = headCoach;

    typeOfSportElement.textContent = sport;
    worldCupYearElement.textContent = year;
    headCoachElement.textContent = coachName;

    playerCardsContainer.innerHTML = "";

    applyFilterAndRenderPlayers(currentFilter);
};

const setPlayerCards = (arr = currentTeam.players) => {
    playerCardsContainer.innerHTML += arr.map(({ name, position, number, isCaptain, nickname }) => {
        return `
        
            ${name}${isCaptain ? " (Captain) " : ""}
            Position: ${position}
            Number: ${number}
            Nickname: ${nickname !== "N/A" ? nickname : "N/A"}
        
    `;
    }).join("");
};

const applyFilterAndRenderPlayers = (filterValue) => {
    let filteredPlayers = currentTeam.players;
    switch (filterValue) {
        case "nickname":
            filteredPlayers = currentTeam.players.filter((player) => player.nickname !== "N/A");
            break;
        case "batsman":
            filteredPlayers = currentTeam.players.filter((player) => player.position === "batsman");
            break;
        case "bowler":
            filteredPlayers = currentTeam.players.filter((player) => player.position === "bowler");
            break;
        case "wicketkeeper":
            filteredPlayers = currentTeam.players.filter((player) => player.position === "wicketkeeper");
            break;
        case "all-rounder":
            filteredPlayers = currentTeam.players.filter((player) => player.position === "all-rounder");
            break;
        case "all":
        default:
            break;
    }

    playerCardsContainer.innerHTML = "";
    setPlayerCards(filteredPlayers);
};

playersDropdownList.addEventListener("change", (e) => {
    currentFilter = e.target.value;
    applyFilterAndRenderPlayers(currentFilter);
});

teamSelectDropdown.addEventListener("change", (e) => {
    const selectedTeamName = e.target.value;
    currentTeam = allCricketTeams.find(team => team.team === selectedTeamName);
    if (currentTeam) {
        renderTeamData(currentTeam);
    }
});

const toggleTheme = () => {
    const isDarkTheme = document.body.classList.toggle("dark-theme");
    localStorage.setItem("theme", isDarkTheme ? "dark" : "light");
    themeToggle.querySelector("i").className = isDarkTheme ? "fa-solid fa-sun" : "fa-solid fa-moon";
};

themeToggle.addEventListener("click", toggleTheme);

(() => {
    const savedTheme = localStorage.getItem("theme");
    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const isDarkTheme = savedTheme === "dark" || (!savedTheme && systemPrefersDark);
    document.body.classList.toggle("dark-theme", isDarkTheme);
    themeToggle.querySelector("i").className = isDarkTheme ? "fa-solid fa-sun" : "fa-solid fa-moon";

    renderTeamData(currentTeam);
})();

JavaScript File Tutorial (script.js)

The JavaScript file stores all team data and makes the webpage interactive - switching teams, filtering players, and changing themes.

Step 1: Get HTML Elements

const themeToggle = document.querySelector(".theme-toggle");
const typeOfSportElement = document.getElementById("sport");
const worldCupYearElement = document.getElementById("year");
const headCoachElement = document.getElementById("coach");
const playerCardsContainer = document.getElementById("player-cards");

Connects to HTML elements so JavaScript can control them

Step 2: Store All Team Data

const allCricketTeams = [
  {
    team: "India",
    sport: "Cricket",
    year: 2024,
    headCoach: { coachName: "Gautam Gambhir" },
    players: [
      {
        name: "Rohit Sharma",
        position: "batsman",
        number: 45,
        isCaptain: true,
        nickname: "Hitman"
      },
      // more players...
    ]
  },
  // more teams...
];

Creates an array containing all cricket teams
Each team has basic info and a list of players
Each player has name, position, number, captain status, and nickname

Step 3: Set Starting Values

let currentTeam = allCricketTeams[0]; // Start with India
let currentFilter = "all"; // Show all players initially

Sets India as the default team when page loads
Sets filter to show all players

Step 4: Display Team Information

const renderTeamData = (teamObject) => {
  const { sport, year, headCoach, players } = teamObject;
  
  typeOfSportElement.textContent = sport;
  worldCupYearElement.textContent = year;
  headCoachElement.textContent = headCoach.coachName;
  
  playerCardsContainer.innerHTML = "";
  applyFilterAndRenderPlayers(currentFilter);
}

Takes team data and displays it on the webpage
Fills in sport, year, and coach information
Clears old player cards and shows new ones

Step 5: Create Player Cards

const setPlayerCards = (arr = currentTeam.players) => {
  playerCardsContainer.innerHTML += arr.map(({ name, position, number, isCaptain, nickname }) => {
    return `
      <div class="player-card">
        <h2>${name}${isCaptain ? " (Captain)" : ""}</h2>
        <p>Position: <span class="position-${position}">${position}</span></p>
        <p>Number: ${number}</p>
        <p>Nickname: ${nickname !== "N/A" ? nickname : "N/A"}</p>
      </div>
    `;
  }).join("");
}

Takes a list of players and creates HTML cards for each one
Adds "(Captain)" to the captain's name
Colors positions using CSS classes

Step 6: Handle Team Selection

teamSelectDropdown.addEventListener("change", (event) => {
  const selectedTeamName = event.target.value;
  const selectedTeam = allCricketTeams.find(team => team.team === selectedTeamName);
  
  if (selectedTeam) {
    currentTeam = selectedTeam;
    renderTeamData(currentTeam);
  }
});

Listens for when user selects a different team
Finds the selected team in the data
Updates the display with new team information

Step 7: Handle Player Filtering

playersDropdownList.addEventListener("change", (event) => {
  currentFilter = event.target.value;
  applyFilterAndRenderPlayers(currentFilter);
});

const applyFilterAndRenderPlayers = (filter) => {
  let playersToShow = currentTeam.players;
  
  if (filter !== "all") {
    if (filter === "nickname") {
      playersToShow = playersToShow.filter(player => player.nickname !== "N/A");
    } else {
      playersToShow = playersToShow.filter(player => player.position === filter);
    }
  }
  
  setPlayerCards(playersToShow);
}

Listens for filter changes
Shows only players matching the selected filter
Special case: "nickname" filter shows only players with nicknames

Step 8: Handle Theme Switching

themeToggle.addEventListener("click", () => {
  document.body.classList.toggle("dark-theme");
  
  const isDarkTheme = document.body.classList.contains("dark-theme");
  themeToggle.innerHTML = isDarkTheme 
    ? '<i class="fa-solid fa-sun"></i>' 
    : '<i class="fa-solid fa-moon"></i>';
});

Listens for theme button clicks
Adds or removes "dark-theme" class from body
Changes button icon between moon and sun

Step 9: Initialize the App

// Start the app with India team
renderTeamData(currentTeam);

Displays India team data when the page first loads

Project Conclusion

The Team Card App is a comprehensive beginner-friendly web development project that demonstrates the power of combining HTML, CSS, and JavaScript to create an interactive sports application. This project successfully transforms static cricket team data into a dynamic, user-friendly interface that allows users to explore different teams, filter players by positions, and customize their viewing experience with theme switching.

Key achievements include:

Interactive team switching that allows users to seamlessly browse different cricket teams from a dropdown menu.
Dynamic player filtering system that enables filtering by position (batsman, bowler, wicketkeeper) or nickname status.
Responsive theme toggle that provides smooth switching between light and dark modes for enhanced user experience.
A modular architecture (HTML for structure, CSS for styling, JavaScript for functionality) that ensures clean code organization and easy scalability.

Live Preview Source Code

The project serves as an excellent learning foundation, teaching essential web development concepts while working with real-world data. It bridges the gap between basic coding knowledge and practical application development, making it ideal for beginners who want to see immediate, tangible results from their coding efforts.

Other Projects

Shooter Game

This is a beginner-friendly guide for building a Space Shooter game with Python and Pygame, covering coding concepts and project structure.

Python Pygame

View Project →

To-Do CLI App

Interactive command-line to-do list manager with Python, featuring list operations, persistent tasks, and practical coding exercises.

Python

View Project →

Weather App

Responsive weather app with real-time API data, feature comparison, and intuitive design for global city forecasts.

HTML CSS JavaScript

View Project →

Simple Calculator in C

This comprehensive simple calculator in C tutorial teaches you how to build a fully functional menu-driven calculator with a command-line interface from scratch..

View Project →

ATM Management System Python Project Tutorial

ATM Management System in Python

This Python application implements a multi-user ATM system with SQLite-backed persistence, featuring account management, financial transactions, and administrative controls.

Python SQLite

View Project →

VPN Connectivity verification in C

Efficient C program to verify VPN status, routing, and DNS configurations through comprehensive public IP and network adapter analysis.

View Project →

Build a Cricket Team Card App with HTML, CSS and JavaScript

Table of Contents

Prerequisites

Implementation Details

HTML Code (index.html)

HTML File Tutorial (index.html)

Step 1: Set Up the Page Foundation

Step 2: Link External Files

Step 3: Create the Header Section

Step 4: Add Team Selection and Information

Step 5: Add Player Filter

Step 6: Create Player Cards Container

Step 7: Link JavaScript

CSS Code (style.css)

CSS File Tutorial (style.css)

Step 1: Set Up Theme Variables

Step 2: Create Dark Theme Override

Step 3: Style the Basic Page

Step 4: Style the Header

Step 5: Style the Theme Toggle Button

Step 6: Style Player Cards

Step 7: Add Position Colors

Step 8: Make It Mobile-Friendly

JavaScript Code (script.js)

${name}${isCaptain ? " (Captain) " : ""}

JavaScript File Tutorial (script.js)

Step 1: Get HTML Elements

Step 2: Store All Team Data

Step 3: Set Starting Values

Step 4: Display Team Information

Step 5: Create Player Cards

Step 6: Handle Team Selection

Step 7: Handle Player Filtering

Step 8: Handle Theme Switching

Step 9: Initialize the App

Project Conclusion

Key achievements include:

Other Projects

Shooter Game

To-Do CLI App

Weather App

Simple Calculator in C

ATM Management System in Python

VPN Connectivity verification in C