diff --git a/oop/App.js b/oop/App.js
new file mode 100644
index 000000000..960fddef4
--- /dev/null
+++ b/oop/App.js
@@ -0,0 +1,56 @@
+'use strict';
+
+{
+  const accounts = {
+    hyf: {
+      name: 'HackYourFuture',
+      type: 'org',
+    },
+    microsoft: {
+      name: 'Microsoft',
+      type: 'org',
+    },
+    jim: {
+      name: 'remarcmij',
+      type: 'user',
+    },
+  };
+
+  const { Model, HeaderView, RepoView, ContributorsView, ErrorView } = window;
+  const { createAndAppend } = window.Util;
+
+  class App {
+    constructor(account) {
+      const containers = App.renderContainers();
+
+      const model = new Model(account);
+      const fetchData = model.fetchData.bind(model);
+
+      model.subscribe(new HeaderView(account, containers.header, fetchData));
+      model.subscribe(new RepoView(containers.repo));
+      model.subscribe(new ContributorsView(containers.contributors));
+      model.subscribe(new ErrorView(containers.error));
+
+      fetchData();
+    }
+
+    static renderContainers() {
+      const root = document.getElementById('root');
+      const header = createAndAppend('header', root, { class: 'header' });
+      const error = createAndAppend('div', root);
+      const main = createAndAppend('main', root, {
+        class: 'main-container',
+      });
+      const repo = createAndAppend('section', main, {
+        class: 'repo-container whiteframe',
+      });
+      const contributors = createAndAppend('section', main, {
+        class: 'contributors-container whiteframe',
+      });
+      return { header, error, main, repo, contributors };
+    }
+  }
+
+  const ACCOUNT_KEY = 'hyf';
+  window.onload = () => new App(accounts[ACCOUNT_KEY]);
+}
diff --git a/oop/ContributorsView.js b/oop/ContributorsView.js
new file mode 100644
index 000000000..9771139c1
--- /dev/null
+++ b/oop/ContributorsView.js
@@ -0,0 +1,55 @@
+'use strict';
+
+{
+    const { createAndAppend } = window.Util;
+
+    class ContributorsView {
+        constructor(container) {
+            this.container = container;
+        }
+
+        update(state) {
+            if (!state.error) {
+                this.render(state.contributors);
+            }
+        }
+
+        /**
+         * Renders the list of contributors
+         * @param {Object[]} contributors An array of contributor objects
+         */
+        render(contributors) {
+
+            this.container.innerHTML = '';
+
+            const ulContributors = createAndAppend('ul', this.container, {
+                name: 'ul-cont',
+                class: 'ul-contributors'
+            });
+
+            contributors.forEach(contributors => {
+                const li = createAndAppend('li', ulContributors, {
+
+                    class: 'li-contributors'
+                })
+
+                const parCont = createAndAppend('p', li, {
+                    text: contributors.contributions,
+                    class: 'li-parCont'
+                })
+
+                const parLogin = createAndAppend('p', li, {
+                    text: contributors.login,
+                    class: 'li-par'
+                })
+
+                const img = createAndAppend('img', li, {
+                    src: contributors.avatar_url,
+                })
+
+            })
+        }
+    }
+
+    window.ContributorsView = ContributorsView;
+}
\ No newline at end of file
diff --git a/oop/ErrorView.js b/oop/ErrorView.js
new file mode 100644
index 000000000..fafffce52
--- /dev/null
+++ b/oop/ErrorView.js
@@ -0,0 +1,31 @@
+'use strict';
+
+{
+  const { createAndAppend } = window.Util;
+
+  class ErrorView {
+    constructor(container) {
+      this.container = container;
+    }
+
+    update(state) {
+      this.render(state.error);
+    }
+
+    /**
+     * Renders an error for the 'error' message type.
+     * @param {Error} error An Error object
+     */
+    render(error) {
+      this.container.innerHTML = '';
+      if (error) {
+        createAndAppend('div', this.container, {
+          text: error.message,
+          class: 'alert alert-error',
+        });
+      }
+    }
+  }
+
+  window.ErrorView = ErrorView;
+}
diff --git a/oop/HeaderView.js b/oop/HeaderView.js
new file mode 100644
index 000000000..b94a2ae00
--- /dev/null
+++ b/oop/HeaderView.js
@@ -0,0 +1,46 @@
+'use strict';
+
+{
+  const { createAndAppend } = window.Util;
+
+  class HeaderView {
+    constructor(account, header, fetchData) {
+      this.account = account;
+      this.header = header;
+      this.fetchData = fetchData;
+      this.select = null;
+    }
+
+    update(state) {
+      if (!this.select && !state.error) {
+        this.render(state.repos);
+      }
+    }
+
+    /**
+     * Renders the data for the 'select' message type. Create a <select> element
+     * and its <option> children.
+     * @param {Object[]} repos An array of repository objects.
+     */
+    render(repos) {
+      createAndAppend('div', this.header, { text: this.account.name });
+      this.select = createAndAppend('select', this.header, {
+        class: 'repo-select',
+        autofocus: 'autofocus',
+      });
+
+      repos.forEach(repo =>
+        createAndAppend('option', this.select, {
+          text: repo.name,
+          value: repo.id,
+        }),
+      );
+
+      this.select.addEventListener('change', () =>
+        this.fetchData(this.select.value),
+      );
+    }
+  }
+
+  window.HeaderView = HeaderView;
+}
diff --git a/oop/Model.js b/oop/Model.js
new file mode 100644
index 000000000..7f88e9c91
--- /dev/null
+++ b/oop/Model.js
@@ -0,0 +1,53 @@
+'use strict';
+
+{
+  const { Observable } = window;
+
+  const makeUrl = ({ name, type }) =>
+    `https://api.github.com/${type}s/${name}/repos?per_page=100`;
+
+  class Model extends Observable {
+    constructor(account) {
+      super();
+      this.account = account;
+      this.state = {
+        repos: [],
+        selectedRepo: null,
+        contributors: [],
+        error: null,
+      };
+    }
+
+    async fetchData(id) {
+      const repoId = parseInt(id, 10);
+      this.state.error = null;
+      try {
+        if (this.state.repos.length === 0) {
+          const repos = await Model.fetchJSON(makeUrl(this.account));
+          this.state.repos = repos.sort((a, b) => a.name.localeCompare(b.name));
+        }
+        const index = id
+          ? this.state.repos.findIndex(repo => repo.id === repoId)
+          : 0;
+        this.state.selectedRepo = this.state.repos[index];
+        this.state.contributors = await Model.fetchJSON(
+          this.state.selectedRepo.contributors_url,
+        );
+      } catch (err) {
+        this.state.error = err;
+      }
+      this.notify(this.state);
+    }
+
+    static fetchJSON(url) {
+      return fetch(url).then(res => {
+        if (!res.ok) {
+          return new Error(`HTTP ${res.status} - ${res.statusText}`);
+        }
+        return res.status === 200 ? res.json() : null;
+      });
+    }
+  }
+
+  window.Model = Model;
+}
diff --git a/oop/Observable.js b/oop/Observable.js
new file mode 100644
index 000000000..e9dfd611a
--- /dev/null
+++ b/oop/Observable.js
@@ -0,0 +1,20 @@
+'use strict';
+
+{
+  class Observable {
+    constructor() {
+      this.observers = new Set();
+    }
+
+    subscribe(observer = {}) {
+      this.observers.add(observer);
+      return () => this.observers.delete(observer);
+    }
+
+    notify(data) {
+      this.observers.forEach(observer => observer.update(data));
+    }
+  }
+
+  window.Observable = Observable;
+}
diff --git a/oop/RepoView.js b/oop/RepoView.js
new file mode 100644
index 000000000..c54156013
--- /dev/null
+++ b/oop/RepoView.js
@@ -0,0 +1,45 @@
+'use strict';
+
+{
+    const { createAndAppend } = window.Util;
+
+    class RepoView {
+        constructor(container) {
+            this.container = container;
+        }
+
+        update(state) {
+            if (!state.error) {
+                this.render(state.selectedRepo);
+            }
+        }
+
+        /**
+         * Renders the repository details.
+         * @param {Object} repo A repository object.
+         */
+        render(repo) {
+            this.container.innerHTML = '';
+
+            createAndAppend('p', this.container, {
+                text: "Repository : " + repo.name,
+                class: 'repo-par',
+            });
+            createAndAppend('p', this.container, {
+                text: "Description : " + repo.description,
+                class: 'repo-par',
+            });
+            createAndAppend('p', this.container, {
+                text: "Forks : " + repo.forks_count,
+                class: 'repo-par',
+            });
+            createAndAppend('p', this.container, {
+                text: "Updated : " + repo.updated_at,
+                class: 'repo-par',
+            });
+        }
+
+    }
+
+    window.RepoView = RepoView;
+}
\ No newline at end of file
diff --git a/oop/Util.js b/oop/Util.js
new file mode 100644
index 000000000..514d47713
--- /dev/null
+++ b/oop/Util.js
@@ -0,0 +1,27 @@
+'use strict';
+
+{
+  class Util {
+    /**
+     * Creates an element, optionally setting its attributes, and appends
+     * the element to a parent.
+     * @param {string} name The tag name of the element to create.
+     * @param {HTMLElement} parent The parent element.
+     * @param {Object} options An object with attribute names and values.
+     */
+    static createAndAppend(name, parent, options = {}) {
+      const elem = document.createElement(name);
+      parent.appendChild(elem);
+      Object.entries(options).forEach(([key, value]) => {
+        if (key === 'text') {
+          elem.textContent = value;
+        } else {
+          elem.setAttribute(key, value);
+        }
+      });
+      return elem;
+    }
+  }
+
+  window.Util = Util;
+}
diff --git a/oop/hyf.png b/oop/hyf.png
new file mode 100644
index 000000000..76bc5a13b
Binary files /dev/null and b/oop/hyf.png differ
diff --git a/oop/index.html b/oop/index.html
new file mode 100644
index 000000000..1290fa6b8
--- /dev/null
+++ b/oop/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="format-detection" content="telephone=no" />
+    <link rel="apple-touch-icon" href="./hyf.png" />
+    <link rel="shortcut icon" type="image/png" href="./hyf.png" />
+    <title>HYF-GITHUB</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
+    <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+    <div id="root"></div>
+
+
+
+    <!-- scripts -->
+    <script src="./Util.js"></script>
+    <script src="./Observable.js"></script>
+    <script src="./Model.js"></script>
+    <script src="./HeaderView.js"></script>
+    <script src="./RepoView.js"></script>
+    <script src="./ContributorsView.js"></script>
+    <script src="./ErrorView.js"></script>
+    <script src="./App.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/oop/style.css b/oop/style.css
new file mode 100644
index 000000000..e78a1c933
--- /dev/null
+++ b/oop/style.css
@@ -0,0 +1,101 @@
+.alert-error {
+    color: red;
+}
+
+#root {
+    width: 80%;
+    margin: auto;
+    padding: 0px;
+}
+
+.header {
+    display: flex;
+    flex-direction: row;
+    /* width: 100%; */
+    background-color: rgb(57, 57, 224);
+    color: white;
+    font-size: 1.5rem;
+    height: 50px;
+    padding: 20px;
+    justify-content: space-between;
+    justify-content: baseline;
+    box-shadow: 5px 5px 8px rgb(65, 60, 60);
+}
+
+.repo-select {
+    width: 30%;
+    margin-right: 100px;
+}
+
+.main-container {
+    margin: 30px auto auto auto;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.whiteframe {
+    width: 48%;
+    box-shadow: -0px -0px 15px rgb(202, 200, 200), 0px 0px 15px rgb(202, 200, 200);
+}
+
+ul {
+    list-style: none;
+    width: 100%;
+    padding: 10px;
+}
+
+ul li {
+    margin: auto auto 30px auto;
+    border-bottom: 1px solid rgb(134, 29, 29);
+    width: 80%;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    justify-content: baseline;
+    align-items: center;
+}
+
+.li-parCont {
+    background-color: rgb(85, 71, 71);
+    color: white;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+img {
+    width: 100px;
+    height: 100px;
+}
+
+.repo-container {
+    /* width: 100%; */
+    padding: 30px;
+    box-sizing: border-box;
+}
+
+@media screen and (max-width: 500px) {
+    .header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        /* width: 100%; */
+    }
+    .repo-select {
+        width: 55%;
+        margin: auto;
+    }
+    .main-container {
+        flex-direction: column;
+        width: 100%;
+    }
+    .whiteframe {
+        width: 100%;
+    }
+    .contributors-container {
+        margin-top: 10px;
+    }
+}
\ No newline at end of file
diff --git a/week3/index.css b/week3/index.css
new file mode 100644
index 000000000..70b17f2b6
--- /dev/null
+++ b/week3/index.css
@@ -0,0 +1,120 @@
+:root {
+    --shadow: 5px 5px 8px rgb(65, 60, 60);
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+#root {
+    width: 100%;
+    margin: 50px auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+ul {
+    width: 100%;
+    border: 1px solid rgba(57, 57, 224, 0.527);
+    box-shadow: var(--shadow);
+    padding: 15px;
+    word-wrap: break-word;
+}
+
+li {
+    list-style: none;
+}
+
+.first {
+    width: 100%;
+    background-color: rgb(57, 57, 224);
+    box-shadow: var(--shadow);
+    color: white;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    justify-content: space-around;
+}
+
+select {
+    width: 200px;
+    height: 50px;
+}
+
+option {
+    text-align: center;
+}
+
+.all-elem {
+    width: 80%;
+    margin: auto;
+}
+
+.main-container {
+    margin-top: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+.repo-container {
+    width: 45%;
+}
+
+#repoDiv {
+    padding: 15px;
+    border: 1px solid rgba(57, 57, 224, 0.527);
+    box-shadow: var(--shadow);
+    margin: 10px;
+}
+
+.contributors-container {
+    width: 45%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+img {
+    width: 100px;
+    height: 100px;
+}
+
+#contri {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+@media screen and (max-width: 600px) {
+    .first {
+        flex-direction: column;
+    }
+    #repo {
+        width: 80%;
+        margin: auto;
+    }
+    .main-container {
+        width: 95%;
+        margin: auto;
+        flex-direction: column;
+    }
+    .repo-container {
+        width: 100%;
+        margin: auto;
+        margin-top: 0px;
+    }
+    .contributors-container,
+    #contri,
+    ul {
+        width: 100%;
+        margin: 10px auto;
+        box-sizing: border-box;
+    }
+}
\ No newline at end of file
diff --git a/week3/index.html b/week3/index.html
new file mode 100644
index 000000000..6cb7a4eb8
--- /dev/null
+++ b/week3/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Hack Your Repo II</title>
+    <link rel="stylesheet" href="index.css">
+
+</head>
+
+<body>
+    <header class="all-elem">
+        <div id="root">
+
+            <div class="first">
+                <h1>HYF Repositories</h1>
+                <select name="repo" id="repo"></select>
+            </div>
+
+        </div>
+        <main class="main-container">
+
+            <section class="repo-container">
+                <div id="repoDiv"></div>
+            </section>
+
+            <section class="contributors-container">
+                <div id="contri"></div>
+            </section>
+
+        </main>
+
+
+
+    </header>
+
+    <!-- script -->
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="index.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/week3/index.js b/week3/index.js
new file mode 100644
index 000000000..2a8f7c381
--- /dev/null
+++ b/week3/index.js
@@ -0,0 +1,98 @@
+'use strict';
+
+const HYF_REPOS_URL =
+    "https://api.github.com/orgs/HackYourFuture/repos?per_page=10";
+
+const root = document.querySelector("#root");
+const select = document.querySelector("#repo");
+const repoContaine = document.querySelector('.repo-containe');
+const repoDiv = document.querySelector('#repoDiv');
+const op = document.querySelector('option');
+const contri = document.querySelector('#contri');
+
+
+function main(url) {
+
+    // to creat ul and li element
+    function creatLi(txt) {
+        const liRepo = document.createElement("li");
+        liRepo.innerHTML = txt;
+        const ulRepo = document.createElement("ul");
+        ulRepo.appendChild(liRepo);
+        contri.appendChild(ulRepo);
+    }
+
+    // to creat option element and append it to to select 
+    function creatOption(txt, num) {
+        let opt = document.createElement('option');
+
+        opt.textContent = txt;
+        opt.setAttribute('value', num);
+        select.appendChild(opt);
+    }
+
+    // load data of contributors and add it to ul 
+    async function loadDoc(url) {
+        try {
+            const response = await axios.get(url);
+            const data = response.data;
+
+            data.forEach(ele => {
+                const txt = `<img src="${ele.avatar_url}"> ${ele.login} ${ele.contributions}`;
+                creatLi(txt);
+            });
+
+        } catch (error) {
+            console.error(error);
+        }
+
+    }
+
+    // load data and add it to div
+    async function fetchJSON(url) {
+        try {
+            const response = await axios.get(url);
+
+            const data = response.data;
+            let arr = [];
+
+            for (let i in data) {
+                arr.push([{ "name": data[i].name }, { "description": data[i].description }, { "forks_count": data[i].forks_count }, { "updated_at": data[i].updated_at }]);
+            }
+
+            arr.forEach((ele, i) => {
+                creatOption(ele[0].name, i);
+            });
+
+            select.addEventListener('change', () => {
+                contri.innerHTML = "";
+                let s = select.value;
+
+                let txt = "<strong>Repository : </strong>" +
+                    data[s].name +
+                    "<br>" +
+                    "<strong>Description : </strong>" +
+                    data[s].description +
+                    "<br>" +
+                    "<strong>Forks : </strong>" +
+                    data[s].forks_count +
+                    "<br>" +
+                    "<strong>Updated : </strong>" +
+                    data[s].updated_at;
+
+                repoDiv.innerHTML = txt + s;
+                let link = data[s].contributors_url;
+
+                loadDoc(link);
+            });
+
+        } catch (error) {
+            console.error(error);
+        }
+
+    }
+
+    return fetchJSON(url);
+}
+
+main(HYF_REPOS_URL);
\ No newline at end of file