widget-vagues

Nom du composant : Gestion avancée des attributs : Ajouter un attribut HTML : <div class="wave-widget"> <h2>Prévision des vagues 🌊</h2> <div id="wave-info">Chargement...</div> </div> CSS : .wave-widget { background-color: var(--bgColor); color: var(--textColor); border-radius: 12px; padding: 15px; font-family: Arial, sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,0.3); text-align:center; } .wave-widget h2 { margin-bottom: 10px; font-size: 1.3em; } .wave-widget div { font-size: 1.1em; line-height: 1.4; } JavaScript (connectedCallback) : const lat = this.getAttribute('latitude'); const lng = this.getAttribute('longitude'); const url = `https://marine-api.open-meteo.com/v1/marine?latitude=${lat}&longitude=${lng}&hourly=wave_height,wave_direction,wave_period&timezone=Europe%2FParis`; fetch(url) .then(res => res.json()) .then(json => { const now = new Date().getHours(); const data = json.hourly; const waveHeight = data.wave_height[now]; const wavePeriod = data.wave_period[now]; const waveDirection = data.wave_direction[now]; this.shadowRoot.getElementById('wave-info').innerHTML = ` 📏 Hauteur : ${waveHeight} m<br> ⏱️ Période : ${wavePeriod} s<br> 🧭 Direction : ${waveDirection}° `; }) .catch(err => { this.shadowRoot.getElementById('wave-info').textContent = 'Erreur lors du chargement des données.'; }); 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 :