Exercises

Your First Web Component (1/7)

1. Go to number-input.html.
2. Replace the prop1 property with the _internalValue one of type String. Properties are located in the object returned by NumberInput.properties() static method.
3. Add the input element of type text just underneath the h2 element.
4. Change the one way binding within the h2 element from prop1 to the _internalValue just created.

Your First Web Component (2/7)

1. Add two way data binding of the _internalValue property to the value property of the input element. Because it is a non-Polymer element specify the input event in the binding as described here.
2. Add the annotated blur event listener to the input element. If the event occur, the NumberInput.validateAndFormat method should be called.

Your First Web Component (3/7)

Implement the NumberInput.validateAndFormat method:

1. Remove the thousands separators (,) from the _internalValue property and parse it using the parseFloat() function.
2. Test if parsing was successful using the isNaN() function.
3. Use the Number.prototype.toFixed() method to add the decimal separator (.).
4. Use the String.prototype.replace() method to add the thousands separators (,). Hint: /(\d)(?=(\d{3})+\.)/g matches digits which are followed by at least one 3-digits package and the decimal separator (.)

Your First Web Component (4/7)

1. Add the _internalClass property of type String
2. Add the one way binding of the _internalClass property to the class attribute of the input element as described here.
3. Update the NumberInput.validateAndFormat method so that it sets the 'invalid' value to the _internalClass property if validation failed and resets the property (to '') if parsing was successful.
4. Add CSS styling setting the input's border color to red if the element has the invalid class.

Your First Web Component (5/7)

1. Add the notifying value property of type Number.
2. Add an observer to the value property calling _valueChanged method.
3. It converts a new number value (passed as an argument) to string, assigns it to the _internalValue property and calls the NumberInput.validateAndFormat method.
4. Update the NumberInput.validateAndFormat method so that it sets the value property with the parsed number value (of type Number) if parsing was successful or with null if parsing failed.

Your First Web Component (6/7)

1. Rather than setting the input's border color to red expose the color as the --invalid-input-border-color CSS variable using the var() CSS function (leave red as the default).
2. Go to demo\index.html and add a <style> element to the document head. Put CSS styling there which sets the --invalid-input-border-color CSS variable. An example can be found here

Your First Web Component (7/7)

1. Add a <script> element to the document body. Put JavaScript code there which sets the value property of the <number-input> element.
2. Because the value is a notifying property, the value-changed event is fired on a property change as described here. Add an event listener to the <number-input> element which prints a new value to the console.
3. Hint: use the Document.querySelector() method to get a reference to the <number-input> element and the EventTarget.addEventListener() method to add an event listener.

Your First PWA (1/2)

1. Go to src\my-app.html and rename View One to Agenda in the drawer content.
2. Install the paper-item component using Bower:

   bower install paper-item#2.0-preview --save

3. Update the src\my-view1.html: based on paper-item code examples add a few agenda items. Do not forget to import new elements. Use icons from src\my-icons.html.

Your First PWA (2/2)

1. Go to src\my-app.html and rename View Two to Venue in the drawer content.
2. Install the google-map component using Bower:

   bower install google-map#2.0-preview --save

3. Update the src\my-view2.html: based on google-map code examples and our hotel's web page set geographical coordinates. Do not forget to import new elements.