First version of cat img with placeholder

README.md

@@ -9,10 +9,8 @@ This repo was created to support [a workshop](https://www.meetup.com/Coffee-Code
 ## TODO
 
 * Firefox support
-* First component
 * Extension component
 * Testing component
 * Shadow DOM
 * Stencil ? 
-* Auto update? 
 * Naming - , or uppercase?

index.html

@@ -11,6 +11,9 @@
         <hello-world-with-params name="Meetup"></hello-world-with-params>
         <div>
             <cat-img></cat-img>
+        </div>    
+        <div>
+            <cat-img-fast></cat-img-fast>
         </div>        
         <div>
             <button onclick="removeHelloWorld()">Click me to remove Hello World</button>                
@@ -23,6 +26,7 @@
         <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 src="src/components/cat-img-fast.js"></script>
         <script>
             function removeHelloWorld(){
                 console.log("Called!");

src/components/cat-img-fast.js

@@ -0,0 +1,20 @@
+class CatImgFastElement extends CatImgElement {
+
+    constructor(){
+        super();
+    }            
+
+    render(){
+            console.log(`rendering with ${this.imgtype} ${this.xsize} ${this.ysize}`);
+            this.innerHTML = `
+            <h1>Here comes a better image</h1>
+            <img height=${this.ysize} width=${this.xsize}
+                src="http://lorempixel.com/${this.xsize}/${this.ysize}/${this.imgtype}"
+                style="background: url('src/img/cat-loading.gif'); background-size: cover;"
+            </img>`;
+        }    
+}
+
+    window.customElements.define(
+                    'cat-img-fast',
+                    CatImgFastElement);