city-card

Nom du composant : Gestion avancée des attributs : Ajouter un attribut HTML : <div class="city-card"> <h2>{{city}}</h2> <p>Population : <span id="pop">Chargement...</span></p> <p>Code postal : <span id="zip">Chargement...</span></p> <p>Département : <span id="dept">Chargement...</span></p> <p>Région : <span id="region">Chargement...</span></p> </div> CSS : .city-card { background: linear-gradient(135deg, var(--bgStart), var(--bgEnd)); color: var(--textColor); padding: 20px; border-radius: 15px; font-family: Arial, sans-serif; box-shadow: 0 6px 10px rgba(0,0,0,0.2); } .city-card h2 { margin-bottom: 10px; font-size: 1.8em; } .city-card p { margin: 5px 0; font-size: 1.1em; } JavaScript (connectedCallback) : const cityName = this.getAttribute('city'); fetch(`https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(cityName)}&fields=nom,population,codesPostaux,departement,region`) .then(res => res.json()) .then(data => { if (data.length > 0) { const city = data[0]; this.shadowRoot.getElementById('pop').textContent = city.population.toLocaleString('fr-FR'); this.shadowRoot.getElementById('zip').textContent = city.codesPostaux.join(', '); this.shadowRoot.getElementById('dept').textContent = city.departement.nom; this.shadowRoot.getElementById('region').textContent = city.region.nom; } else { this.shadowRoot.querySelector('.city-card').innerHTML = `<p>Ville non trouvée.</p>`; } }) .catch(() => { this.shadowRoot.querySelector('.city-card').innerHTML = `<p>Erreur lors du chargement.</p>`; }); JavaScript (render) : Fonctions JavaScript (méthodes supplémentaires) : Générer le composant

🌟 Prévisualisation interactive : Code HTML généré : Code JS généré : 📦 Export multi-framework : -- Choisir un framework -- React Vue Angular Ouvrir dans CodePen Description :