Football Team Cards

Welcome to the Football Team Cards project! This repository allows users to apply modern JavaScript methods while building a dynamic web application displaying football team cards. Users can filter players by various categories, enhancing their understanding of JavaScript array and string methods through practical application.

Table of Contents

• Overview
• Features
• Technologies
• Getting Started
• Usage
• Code Structure
• Contributing
• License

Overview

This project showcases a simple yet interactive web application where users can view a football team’s roster and filter players based on their positions and nicknames. It emphasizes the practical application of modern JavaScript methods, making it ideal for learners looking to improve their skills.

Features

• Dynamic Team Information: Displays team stats including team name, sport, year, and head coach.
• Player Cards: Lists players with their names, positions, numbers, and nicknames.
• Filtering Options: Users can filter players by various criteria (position or nickname).
• Responsive Design: The application is designed to be responsive and user-friendly across different devices.

Technologies

• HTML: Used for structuring the application.
• CSS: Used for styling the application.
• JavaScript: Implements the functionality and logic behind the interactive elements.

Getting Started

To get a local copy of the project up and running, follow these steps:

Prerequisites

You will need a code editor (e.g., VS Code) and a web browser (e.g., Chrome or Firefox).

Installation

1. Clone the repository:

git clone https://github.com/stephenombuya/Football--Team-Cards

2. Navigate to the project directory:

cd football-team-cards

3. Open the index.html file in your browser to view the application.

Usage

Interacting with the App

• View Team Stats: The top section displays the team's stats, including the name, sport, year, and head coach.
• Filter Players: Use the dropdown menu to filter players by:
• All players
• Nicknames
• Positions (Forward, Midfielder, Defender, Goalkeeper)
• View Player Cards: Each player card displays the player's name, position, number, and nickname.

Code Structure

Here’s an overview of the main files in the project:

• index.html: The main structure of the web application.
• styles.css: Contains the styles for the application, ensuring a visually appealing interface.
• script.js: Contains JavaScript logic for populating and filtering the player cards based on user selection.

Contributing

Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

License

This project is licensed under the GNU License. See LICENSE for more information.