Loading repository data…
Electra51 / repository
Dream-XI-Selector
Dream-XI-Selector - It is a fun and interactive football team selection web app
#bootstrap5#css3#html5#javascript
Live repository statistics
★ 0Stars
⑂ 0Forks
◯ 0Open issues
◉ 0Watchers
README preview
Dream XI Selector — Build Your Ultimate Football Squad
It is a fun and interactive football team selection web app where users can choose up to 5 world-class players, manage budgets, and calculate team expenses.
Live Demo · Report Bug · Request Feature
Preview
Core Features
- Choose up to 5 players maximum.
- Automatically prevents selecting more than 5.
- Prevents choosing the same player twice.
- Selected players appear in a right-side selection panel.
- Each selected player can be removed individually.
- Live counter:
- Available Players
- Selected Players
- Remaining Slots
- Animated progress bar based on number of players selected.
Budget & Expense Calculator
- Input Per Player Cost.
- Calculates total player expenses automatically.
- Add Manager Cost and Coach Cost.
- Full Total Budget Calculation.
- Prevents negative or invalid values.
- Error messages with smooth UI animation.
Technologies Used
| Technology | Usage |
|---|---|
| HTML5 | Structure & layout |
| CSS3 | Custom UI styling, animations |
| Bootstrap Grid | Responsive layout |
| Vanilla JavaScript | Logic, DOM manipulation, selection system |
| Google Fonts | Typography |
| Shields.io | Badges for README |
How to Use
- Open the project in any browser.
- Select up to 5 players.
- Add per-player cost → Calculate.
- Add manager & coach cost → Calculate total.
- Remove players anytime.
- Enjoy building your dream squad!
Contributing
Contributions are always welcome! Here's how you can help:
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Author
Electra51
- GitHub: @Electra51
- LinkedIn: https://www.linkedin.com/in/safayet-nur/
- Email: safayetnurelectra@gmail.com
- Portfolio: https://nextjs-my-portfolio-electra51.vercel.app/
- Twitter: https://x.com/nur_safaye51
Support
If you like this project, please ⭐ star this repository!
Star this repository if you found it helpful!
Made with ❤️ by Electra51
Happy Coding! 🚀