feedback-widget

Nom du composant : Gestion avancée des attributs : Ajouter un attribut HTML : <div class="feedback"> <p>🎯 Ce générateur vous a été utile ?</p> <div class="buttons"> <button data-vote="yes">👍 Oui</button> <button data-vote="no">👎 Non</button> </div> <p class="thanks" style="display:none;">Merci pour votre retour ❤️</p> </div> CSS : .feedback { text-align: center; margin-top: 20px; } .feedback button { margin: 0 10px; padding: 8px 16px; border-radius: 6px; cursor: pointer; } .feedback .thanks { margin-top: 10px; color: green; font-weight: bold; } JavaScript (connectedCallback) : JavaScript (render) : if (localStorage.getItem('feedback-voted')) { this.shadowRoot.querySelector('.buttons').style.display = 'none'; this.shadowRoot.querySelector('.thanks').style.display = 'block'; return; } this.shadowRoot.querySelectorAll('button[data-vote]').forEach(btn => { btn.addEventListener('click', async () => { const vote = btn.dataset.vote; try { await fetch('/api/feedback.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ vote }) }); localStorage.setItem('feedback-voted', vote); this.shadowRoot.querySelector('.buttons').style.display = 'none'; this.shadowRoot.querySelector('.thanks').style.display = 'block'; } catch (err) { alert("Une erreur est survenue."); } }); }); 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 :