Added random number component

Author: nerdic-coder

README.md

@@ -30,4 +30,11 @@ To build the app for production, run:
 
 ```bash
 npm run build
-```
+```
+
+## Stencil
+Based on Stencil framework
+
+Website: https://stenciljs.com/
+
+Github: https://github.com/ionic-team/stencil

src/components/button-update.tsx

@@ -0,0 +1,24 @@
+import { Component, Prop, EventEmitter, Event } from '@stencil/core';
+
+@Component({
+    tag: 'button-update'
+})
+
+export class ButtonUpdate {
+
+    @Prop() label: string;
+
+    @Event() updateComponent: EventEmitter;
+
+    handleClick(event: UIEvent) {
+        this.updateComponent.emit();
+    }
+
+    render() {
+        if(this.label) {
+            return (
+                <button onClick={(event: UIEvent) => this.handleClick(event)}>{this.label}</button>
+            );
+        }
+    }
+}

src/components/input-listener.tsx

@@ -0,0 +1,18 @@
+import { Component } from '@stencil/core';
+
+@Component({
+    tag: 'input-listener'
+})
+
+export class InputListener {
+
+    static inputChanged(event: UIEvent) {
+        console.log(event.target);
+    }
+
+    render() {
+        return (
+            <input value="" onChange={ (event: UIEvent) => InputListener.inputChanged(event)}/>
+        );
+    }
+}

src/components/random-number.tsx

@@ -0,0 +1,29 @@
+import { Component, Prop, State, Listen } from '@stencil/core';
+
+@Component({
+    tag: 'random-number'
+})
+
+export class RandomNumber {
+
+    @State() randomNumber: number;
+    @Prop() min: number;
+    @Prop() max: number;
+
+    componentDidLoad() {
+        this.randomNumber = Math.floor(Math.random()*(this.max- this.min+1)+ this.min);
+    }
+
+    @Listen('updateComponent')
+    updateNumberHandler() {
+        this.randomNumber = Math.floor(Math.random()*(this.max- this.min+1)+ this.min);
+    }
+
+    render() {
+        return (
+        <p>
+            {this.randomNumber}
+        </p>
+        );
+    }
+}

src/index.html

@@ -12,5 +12,9 @@
     <my-name></my-name>
     <todo-list></todo-list>
     <button-alert button-text="Show me the money!" alert-message="The money!"></button-alert>
+    <input-listener></input-listener>
+    <random-number min="1" max="200">
+        <button-update label="New number"></button-update>
+    </random-number>
 </body>
 </html>

stencil.config.js

@@ -1,6 +1,6 @@
 exports.config = {
   bundles: [
-    { components: ['my-name', 'my-first-component', 'todo-list', 'button-alert'] }
+    { components: ['my-name', 'my-first-component', 'todo-list', 'button-alert', 'input-listener', 'random-number', 'button-update'] }
   ],
   collections: [
     { name: '@stencil/router' }