WCC : Website in HTML & CSS & JS

WCC is an abbreviation for World Cup Countries and it's a website where you open packs to collect all qualified countries for the World Cup. Everything is saved securely in Firebase.

• Demo
• How To Play
  • Create an account
  • Log in to your account
  • Home page
  • Open a pack
  • Rarity system
    • Common
    • Rare
    • Epic
    • Legend
  • Check your collection
• Tech Stack
• Compatibility
• How I built this
• Why I built this
• Author

Try it here → https://xtrawalo.github.io/WCC

View the project on Horizons : https://horizons.hackclub.com/projects/3757

Note: This website only works well on 1920x1080.

Register with a username and password. Data saved in Firebase Auth - No one can see your password.

Log in with the same username and password you registered with. You'll find all countries you've collected.

Click on the pack to open it.

• Rest 39 countries : 1.19% — 2.38%

• England : 0.179%
• Germany : 0.238%
• Netherlands : 0.358%

• Spain : 0.024%
• Morocco : 0.048%
• Portugal : 0.095%

• France : 0.010%
• Argentina : 0.004%
• Brazil : 0.001%

Check your collection and unlock all countries.

• Vanilla JavaScript, HTML, CSS.
• Firebase Authentication
• Firebase Firestore

• PC only
• Recommended resolution: 1920×1080

• 30% AI (Chatgpt & Claude) — Rarity algorithm, pack opening logic, inventory unlock
• 35% YouTube Tutorials — Login & Register pages, Firebase setup
• 35% My own knowledge — Most of the HTML and CSS, overall design

This project is for #horizons program by hackclub.

The Goal: To improve my front-end development skills by creating a pack-opening game related to the 2026 World Cup.

Me : xtrawalo