Example Code Web Component
A simple component for displaying code examples
Example Inception
<img src="https://picsum.photos/seed/1/200/200" class="example" onClick="changeBorder()" />
var changeBorder = function() { const img = document.querySelector('img.example'); if (img.classList.contains('border-on')) { img.classList.remove('border-on'); } else { img.classList.add('border-on'); } };
img.example.border-on { border: 2px solid green; border-radius: 20px; }
<example-code> <div slot="example"> <img src="https://picsum.photos/seed/1/200/200" class="example" onClick="changeBorder()" /> </div> <pretty-code language="html" slot="html"> <img src="https://picsum.photos/seed/1/200/200" class="example" onClick="changeBorder()" /> </pretty-code> <pretty-code language="js" slot="javascript"> var changeBorder = function() { const img = document.querySelector('img.example'); if (img.classList.contains('border-on')) { img.classList.remove('border-on'); } else { img.classList.add('border-on'); } }; </pretty-code> <pretty-code language="css" slot="css"> img.example.border-on { border: 2px solid green; border-radius: 20px; } </pretty-code> </example-code>