https://github.com/adriangeorgem/player-stats_card
Stats card component to function and display accurately in Chrome and Firefox.
https://github.com/adriangeorgem/player-stats_card
css dynamic-website html sass vanilla-javascript
Last synced: about 1 month ago
JSON representation
Stats card component to function and display accurately in Chrome and Firefox.
- Host: GitHub
- URL: https://github.com/adriangeorgem/player-stats_card
- Owner: AdrianGeorgeM
- Created: 2023-03-22T11:14:05.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-25T17:49:52.000Z (almost 3 years ago)
- Last Synced: 2025-09-06T09:47:04.807Z (9 months ago)
- Topics: css, dynamic-website, html, sass, vanilla-javascript
- Language: JavaScript
- Homepage: https://player-stats-card.vercel.app/
- Size: 1.71 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Player Stats Card 🎴 - A Dynamic Web Component
Welcome to my Player Stats Card project. This project is a dynamic web component, meticulously designed using HTML, CSS (SASS), and vanilla JavaScript. My goal was to create a fluid, interactive, and unique user experience for viewing player statistics. This stats card stands out with its clean design, dynamic functionalities, and intuitive interfaces, offering a unique platform for stats exploration.
## 🎯 Project Overview
Created with the modern sports enthusiast in mind, Player Stats Card provides a user-centric platform. Each card is enriched with interactive functionalities and unique details, contributing to a distinctive and user-friendly browsing experience.
Key features of Player Stats Card include:
🖼️ Dynamic Display: Each player stats card features a dynamic display that creates an immersive viewing experience. Users can effortlessly scroll through stats, enjoying a smooth transition between stats.
📉 Interactive Collapsible Sections: Player Stats Card incorporates interactive collapsible sections, enhancing the efficiency and cleanliness of the UI. These sections remain closed by default upon page initialization, providing users the freedom to expand or collapse them based on their preferences. Smooth opening and closing animations further boost the interactive user experience.
## 🎉 Key Functionalities
Dynamic Player Stats: Each player stats card is equipped with dynamic displays and interactive collapsible sections, fostering an enhanced UI and user experience.
Robust Functionality: Player Stats Card uses vanilla JavaScript for functionality, offering a clean and efficient UI. This includes fetching and handling JSON data, updating the player's stats based on the selection, and handling image updates dynamically.
Modular Structure: The project is structured into distinct modules and utility functions. This includes functions for fetching and handling JSON data, finding stats by name, calculating stats ratios, and creating dynamic image elements.
## 🏋️ Challenges & Achievements 🎖️
The journey of developing Player Stats Card, though thrilling, presented several challenges. Overcoming these obstacles led to significant achievements and substantial learning experiences:
Dynamic UI Rendering: Creating a dynamic user interface for each stats card and managing the rendering of stats was an initial challenge. This was overcome by effectively using JavaScript's functionality, resulting in an engaging and interactive UI.
Data Handling: Fetching and managing JSON data for front-end construction was a challenge. Efficiently extracting and manipulating this data for use within the card allowed me to simulate live data interaction.
Image Handling: Dynamically updating player images based on the selected player was a challenge. This was achieved by creating a reusable function that handles image updates.
Styling & Animation: Player Stats Card's aesthetic appeal and interactivity were achieved through meticulous styling. I employed SASS as my primary styling tool to ensure styles are contained to their respective components, thereby avoiding conflicts.
Code Organization and Quality: Maintaining a high-quality codebase free from console errors or warnings was a challenge I overcame through continuous code reviews and testing, ensuring a clean console and a reliable application.
## ⚙️ Technical Details
Player Stats Card is powered by HTML, CSS (SASS), and vanilla JavaScript, offering a dynamic, interactive, and user-friendly application:
Styling: I used SASS for styling needs, ensuring component-specific styles. The SASS files are organized into multiple folders and files based on components and layouts for maintainability.
No External Libraries: To maintain a lean and self-contained application, Player Stats Card avoids the use of external libraries.
Clean Code: I've maintained Player Stats Card's codebase to avoid producing any errors in the console, ensuring a reliable and robust application.
## 💡 Conclusion
Player Stats Card exemplifies the capabilities of modern web development tools such as HTML, CSS, and JavaScript. It serves as a testament to the potential of these tools in creating dynamic, interactive, and engaging web components. I am incredibly proud of the result and believe that Player Stats Card will offer a unique platform for users seeking to view player stats in an engaging and interactive way. 🚀 Developing Player Stats Card has been an exciting journey, and I hope your experience viewing the stats will be just as thrilling!