🔗 Live demo: joaofazio.github.io/codice_hextec
🏆 Selected in the TOP 6 out of thousands of projects at Alura's Imersão Dev with Google.
An interactive web application that consumes the official Riot Games Data Dragon API to display detailed data, lore, and stats for all League of Legends champions in real time.
| 🖥️ Navigation & Charts | 🎨 Skin Gallery | 📱 Mobile |
|---|---|---|
 |
 |
 |
| Real-time search and Chart.js stats | Dynamic background and skin scroll | Touch carousel and adaptive layout |
- Real-time API consumption — fetches live data from Riot's Data Dragon, always reflecting the current patch version
- Data visualization — Chart.js transforms raw attack/defense numbers into readable radar charts
- Dynamic search — instant filtering as the user types via DOM manipulation
- Error handling — gracefully handles missing API fields to prevent runtime errors
- Hextech visual identity — CSS styled after the official League of Legends client, using CSS variables and Flexbox/Grid
- Fully responsive — works across mobile, tablet, and desktop
- Skin gallery — modal with dynamic backgrounds for champion skin art
- Micro-interactions — custom scrollbars, hover effects, and navigation buttons
- HTML5 — semantic structure
- CSS3 — Flexbox, Grid, CSS Variables,
@keyframesanimations, Media Queries - JavaScript (ES6+) — DOM manipulation, Async/Await, Fetch API, Event Listeners
- Chart.js — data visualization
- Phosphor Icons — vector icons
git clone https://github.com/joaofazio/codice_hextec.git
cd codice_hextec
# Open index.html in your browser or use VS Code Live Server"Códice Hextech was created under Riot Games' 'Legal Jibber Jabber' policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project."
João Gabriel Fazio
