diff --git a/Tasks/Task 01/assignment_01.pdf b/Tasks/Task 01/assignment_01.pdf
new file mode 100644
index 0000000..2b3ee2b
Binary files /dev/null and b/Tasks/Task 01/assignment_01.pdf differ
diff --git a/Tasks/Task 01/navibar/imgs/coffee.png b/Tasks/Task 01/navibar/imgs/coffee.png
new file mode 100644
index 0000000..af3eb66
Binary files /dev/null and b/Tasks/Task 01/navibar/imgs/coffee.png differ
diff --git a/Tasks/Task 01/navibar/imgs/home.png b/Tasks/Task 01/navibar/imgs/home.png
new file mode 100644
index 0000000..4e2c358
Binary files /dev/null and b/Tasks/Task 01/navibar/imgs/home.png differ
diff --git a/Tasks/Task 01/navibar/imgs/map.png b/Tasks/Task 01/navibar/imgs/map.png
new file mode 100644
index 0000000..7c89aec
Binary files /dev/null and b/Tasks/Task 01/navibar/imgs/map.png differ
diff --git a/Tasks/Task 01/navibar/imgs/settings.png b/Tasks/Task 01/navibar/imgs/settings.png
new file mode 100644
index 0000000..6d1d100
Binary files /dev/null and b/Tasks/Task 01/navibar/imgs/settings.png differ
diff --git a/Tasks/Task 01/navibar/navibar.html b/Tasks/Task 01/navibar/navibar.html
new file mode 100644
index 0000000..f29f38c
--- /dev/null
+++ b/Tasks/Task 01/navibar/navibar.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Navibar Demo
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Tasks/Task 01/navibar/navibar.js b/Tasks/Task 01/navibar/navibar.js
new file mode 100644
index 0000000..4095376
--- /dev/null
+++ b/Tasks/Task 01/navibar/navibar.js
@@ -0,0 +1,26 @@
+class CustomNavigationBar extends HTMLElement {
+ constructor() {
+ super()
+ const shadowRoot = this.attachShadow({mode: 'open'})
+ shadowRoot.innerHTML = `
+
+
+
+
`
+ }
+
+}
+
+customElements.define('navigation-bar', CustomNavigationBar)
\ No newline at end of file
diff --git a/Tasks/Task 01/progress/demo.html b/Tasks/Task 01/progress/demo.html
new file mode 100644
index 0000000..b10a006
--- /dev/null
+++ b/Tasks/Task 01/progress/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Progress Bar Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Tasks/Task 01/progress/demo.js b/Tasks/Task 01/progress/demo.js
new file mode 100644
index 0000000..b8eeaea
--- /dev/null
+++ b/Tasks/Task 01/progress/demo.js
@@ -0,0 +1,17 @@
+/*
+ * Progress Bar Demo
+ */
+
+window.onload = () => {
+ document.querySelector('p:nth-child(1) custom-progress-bar').progress = 75;
+ document.querySelector('p:nth-child(2) custom-progress-bar');
+
+ var pb = document.querySelector('p:nth-child(3) custom-progress-bar');
+ setInterval(() => changePb(pb), 20);
+}
+
+const changePb = (pb) => {
+ if (Math.random()>0.85) {
+ pb.progress = (parseInt(pb.progress)+1) % 101;
+ }
+}
diff --git a/Tasks/Task 01/progress/progress.js b/Tasks/Task 01/progress/progress.js
new file mode 100644
index 0000000..fd580de
--- /dev/null
+++ b/Tasks/Task 01/progress/progress.js
@@ -0,0 +1,59 @@
+class CustomProgressBar extends HTMLElement {
+ constructor() {
+ super();
+ const shadowRoot = this.attachShadow({mode: 'open'});
+ shadowRoot.innerHTML = `
+
+
+ `;
+ this._progressElement = shadowRoot.querySelector('.progress');
+ this._label = shadowRoot.querySelector('.label');
+ this._bar = shadowRoot.querySelector('.bar');
+ }
+
+ static get observedAttributes() { return ['value']; }
+ attributeChangedCallback(name, oldValue, newValue, namespaceURI) {
+ if (name === 'value') {
+ const newPercentage = newValue === null ? 0 : parseInt(newValue);
+ this._progressElement.setAttribute('aria-valuenow', newPercentage);
+ this._label.textContent = newPercentage + '%';
+ this._bar.style.width = newPercentage + '%';
+ }
+ }
+
+ get progress() { return this.getAttribute('value'); }
+ set progress(newValue) { this.setAttribute('value', newValue); }
+};
+
+
+customElements.define('custom-progress-bar', CustomProgressBar);
\ No newline at end of file