ProSports ⚽

ProSports: A dynamic, multi-page football stats website built with vanilla HTML, CSS, and JS, powered by the API-Football API.

This is a website dedicated to providing comprehensive and real-time football (soccer) statistics. The site fetches data directly from the API-Football service to display team standings, player stats, match fixtures, and more.

---

📍 Live Demo

https://prosports-football.netlify.app/

(Note: The live demo is connected to the GitHub repository and uses environment variables for the API key. For guaranteed access, please run the project locally with your own key.)

📖 Table of Contents

• ✨ Features & Pages
• 💻 Tech Stack & Styles
• 🚀 How to Install and Run
• 💡 How to Use
• 🤝 How to Contribute
• ✍️ Author

---

✨ Features & Pages

The website is structured into numerous feature-specific pages:

• index.html: The homepage, featuring main navigation to all other sections.
• fixtures/fixtures.html: Fixtures & Results - Search for matches by league, team, date, ID, or live status.
• standings/standings.html: League Standings - Search for league tables by league or team.
• teams/teams.html: Team Information - Search for teams by league, ID, name, or country.
• player_name/player_name.html: Shows detailed stats for a specific player.
• season/season.html: Player's Seasons - Search for Player's Seasons.
• get_players/get_players.html: Player Statistics - Search for player statistics by league, team, or player ID.
• player_history/player_history.html: Player Team History - Enter a Player ID to see their complete team history.
• team_squad/team_squad.html: Team Squads - Search by Team ID (for a full squad) or Player ID (for their current teams).
• top_scorers/top_scorers.html: Top Scorers - Search for the top scorers by league and season.
• top_assists/top_assists.html: Top Assists - Search for the top assist providers by league and season.
• top_yellow_cards/top_yellow_cards.html: Top Yellow Cards - Search for players with the most yellow cards by league and season.
• top_red_cards/top_red_cards.html: Top Red Cards - Search for players with the most red cards by league and season.
• injuries/injuries.html: Player Injuries - Search for injuries by league, team, player, or fixture.
• player_transfers/player_transfers.html: Player & Team Transfers - Search for transfers by Player ID or Team ID.
• player_trophies/player_trophies.html: Trophy Room - Search for trophies by Player ID or Coach ID.

💻 Tech Stack & Styles

• Front-End: Vanilla HTML5, CSS3, and JavaScript (ES6+).
• Build Tool: Vite - Used for the development server and bundling.
• Data: API-Football for all statistical data.
• Development: Git & GitHub (Feature Branch Workflow).
• Styles: The site's global styles are controlled by style.css (layout, typography, color) and media.css (responsiveness). Each feature folder (e.g., fixtures/) also contains its own specific stylesheet (e.g., fixtures.css) to keep the project modular and organized.

---

🚀 How to Install and Run

This project now uses Vite to manage the development server and environment variables (API Key).

1. Clone the repository:

   git clone https://github.com/[YourUsername]/Advanced-Pre-Work.git

   (Don't forget to replace [YourUsername] with your actual GitHub username!)

2. Navigate to the project directory:

   cd Advanced-Pre-Work

3. Install dependencies: (You must have Node.js installed on your machine)

   npm install

4. ‼️ IMPORTANT: Add Your API Key

   This project requires a valid API key from API-Football to function. The API key is loaded securely via an environment variable.

   • In the root of the project directory, create a new file named exactly: .env
   • Inside this .env file, add your API key using the following format:

     VITE_API_KEY="PUT_YOUR_REAL_API_KEY_HERE"
     

5. Run the project:

   npm run dev

6. Open in your browser: Your terminal will show a local URL. Open it in your browser (e.g., http://localhost:5173/).

💡 How to Use

The ProSports website provides detailed football statistics. You can navigate to the different pages (Standings, Fixtures, Players, etc.) by clicking on the links in the navigation bar on the homepage.

🤝 How to Contribute

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project.
2. Create your Feature Branch (git checkout -b feature/AmazingFeature).
3. Commit your Changes (git commit -m 'feat: Add some AmazingFeature').
4. Push to the Branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

---

✍️ Author

• Waleed Tarbosh - Project Creator