diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b70b0b7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+
+react/node_modules/
+react/package-lock\.json
+storybook/node_modules/
+storybook/package-lock\.json
diff --git a/html/TODO b/html/TODO
new file mode 100644
index 0000000..f239839
--- /dev/null
+++ b/html/TODO
@@ -0,0 +1 @@
+Open in browser...
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..6da3170
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+ Test my-rating WebComponent
+
+
+
+
+
+
+
+
+
+
diff --git a/html/ratings.js b/html/ratings.js
new file mode 100644
index 0000000..624685e
--- /dev/null
+++ b/html/ratings.js
@@ -0,0 +1,96 @@
+
+const styleRules = ` .rating {font-size: 50px; color: orange; cursor: pointer }`
+
+class MyRating extends HTMLElement {
+
+ constructor() {
+ super()
+ this._maxValue = 5
+ this._value = 4
+ this.attachShadow({mode: "open"})
+ }
+
+ connectedCallback() {
+ this.createComponent()
+ }
+
+ get maxValue() {
+ return this._maxValue
+ }
+
+ set maxValue(val) {
+ this._maxValue = val
+ this.setAttribute("max-value", val)
+ }
+
+ get value() {
+ return this._value
+ }
+
+ set value(val) {
+ this._value = val
+ this.setAttribute("value", val)
+ }
+
+ static get observedAttributes() {
+ return ["max-value", "value"]
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (oldValue !== newValue) {
+ switch (name) {
+ case "max-value":
+ this._maxValue = newValue
+ break
+ case "value":
+ this._value = newValue
+ break
+ default:
+ }
+ this.replaceStarList()
+ }
+ }
+
+ replaceStarList() {
+ let starNode = this.shadowRoot.children[1];
+ if (starNode) {
+ let starList = this.createStarList();
+ starNode.remove();
+ this.shadowRoot.appendChild(starList);
+ }
+ }
+
+ createComponent() {
+ this.createStyle()
+ let starList = this.createStarList()
+ this.shadowRoot.appendChild(starList)
+ }
+
+ createStyle() {
+ let style = document.createElement("style")
+ style.appendChild(document.createTextNode(styleRules))
+ this.shadowRoot.appendChild(style)
+ }
+
+ createStarList() {
+ let div = document.createElement("div")
+ for (let i = 1; i <= this.maxValue; i++) {
+ let star = i <= this.value ? this.createStar("★", i) : this.createStar("☆", i)
+ div.appendChild(star)
+ }
+ return div
+ }
+
+ createStar(starCode, i) {
+ let span = document.createElement("span")
+ span.setAttribute("class", "rating")
+ span.innerHTML = starCode
+ span.addEventListener("click", () => {
+ this.value = i
+ }, false)
+ return span
+ }
+}
+
+customElements.define("my-rating", MyRating)
+