diff --git a/example03/index.html b/example03/index.html
index 367c950..7006c69 100644
--- a/example03/index.html
+++ b/example03/index.html
@@ -2,7 +2,7 @@
- Simple Component 2
+ Simple Component 3
diff --git a/example04/index.html b/example04/index.html
index 367c950..ec52906 100644
--- a/example04/index.html
+++ b/example04/index.html
@@ -2,7 +2,7 @@
- Simple Component 2
+ Simple Component 4
diff --git a/example05/index.html b/example05/index.html
new file mode 100644
index 0000000..62d874b
--- /dev/null
+++ b/example05/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+ Simple Component 5
+
+
+
+
+
+
\ No newline at end of file
diff --git a/example05/src/app.js b/example05/src/app.js
new file mode 100644
index 0000000..3aa76ed
--- /dev/null
+++ b/example05/src/app.js
@@ -0,0 +1,10 @@
+import Items from "./components/Items.js";
+
+class App {
+ constructor() {
+ const $app = document.querySelector('#app');
+ new Items($app);
+ }
+}
+
+new App();
diff --git a/example05/src/components/Items.js b/example05/src/components/Items.js
new file mode 100644
index 0000000..1900d81
--- /dev/null
+++ b/example05/src/components/Items.js
@@ -0,0 +1,38 @@
+import Component from "../core/Component.js";
+
+export default class Items extends Component {
+ setup () {
+ this.$state = { items: ['item1', 'item2'] };
+ }
+ template () {
+ const { items } = this.$state;
+ return `
+
+ ${items.map((item, key) => `
+ -
+ ${item}
+
+
+ `).join('')}
+
+
+ `
+ }
+
+ setEvent () {
+ this.$target.addEventListener('click', ({ target }) => {
+ const items = [ ...this.$state.items ];
+
+ if (target.classList.contains('addBtn')) {
+ this.setState({ items: [ ...items, `item${items.length + 1}` ] });
+ }
+
+ if (target.classList.contains('deleteBtn')) {
+ items.splice(target.dataset.index, 1);
+ this.setState({ items });
+ }
+
+ });
+ }
+}
+
diff --git a/example05/src/core/Component.js b/example05/src/core/Component.js
new file mode 100644
index 0000000..d56e11a
--- /dev/null
+++ b/example05/src/core/Component.js
@@ -0,0 +1,20 @@
+export default class Component {
+ $target;
+ $state;
+ constructor ($target) {
+ this.$target = $target;
+ this.setup();
+ this.setEvent();
+ this.render();
+ }
+ setup () {};
+ template () { return ''; }
+ render () {
+ this.$target.innerHTML = this.template();
+ }
+ setEvent () {}
+ setState (newState) {
+ this.$state = { ...this.$state, ...newState };
+ this.render();
+ }
+}