Creates first version of cat image component

README.md

@@ -4,4 +4,13 @@ This repo was created to support [a workshop](https://www.meetup.com/Coffee-Code
 
 ## Slides and Work Material
 
-[Slides are here](https://docs.google.com/presentation/d/1h_wp7a_xbjJxeNLu6_Dd8Q4fBy2zA6jc1AjZrNqSEjo/edit?usp=sharing)
+[Slides are here](https://docs.google.com/presentation/d/1h_wp7a_xbjJxeNLu6_Dd8Q4fBy2zA6jc1AjZrNqSEjo/edit?usp=sharing)
+
+## TODO
+
+* Firefox support
+* First component
+* Extension component
+* Testing component
+* Shadow DOM
+* Stencil ? 

index.html

@@ -9,7 +9,9 @@
 
         <hello-world></hello-world>
         <hello-world-with-params name="Meetup"></hello-world-with-params>
-        
+        <div>
+            <cat-img></cat-img>
+        </div>        
         <div>
             <button onclick="removeHelloWorld()">Click me to remove Hello World</button>                
         </div>
@@ -18,8 +20,10 @@
             <button onclick="changeHelloWorldParam()">Click me to change Hello World's parameter</button>        
         </div>
 
+
         <script src="src/components/hello-world.js"></script>
         <script src="src/components/hello-world-with-params.js"></script>
+        <script src="src/components/cat-img.js"></script>
         <script>
             function removeHelloWorld(){
                 console.log("Called!");

src/components/cat-img.js

@@ -0,0 +1,24 @@
+class CatImgElement extends HTMLElement {
+    
+        constructor(){
+            super()
+            
+            this.innerHTML = `
+            <h1>Here comes a kitty image</h1>
+            <img src="http://lorempixel.com/400/200/cats"</img>`;
+        }    
+    
+        connectedCallback(){
+        }
+    
+        disconnectedCallback(){
+        }
+    
+        attributeChangedCallback(attributeName, oldValue, newValue, namespace){
+        }    
+    }
+    
+        window.customElements.define(
+                        'cat-img', 
+                         CatImgElement);
+