diff --git a/Week2/homework/masoud/js-exercises/Ex1-johnWho.js b/Week2/homework/masoud/js-exercises/Ex1-johnWho.js
new file mode 100644
index 000000000..fbf5e09c6
--- /dev/null
+++ b/Week2/homework/masoud/js-exercises/Ex1-johnWho.js
@@ -0,0 +1,17 @@
+const getAnonName = firstName => {
+ return new Promise((resolves, rejects) => {
+ if (firstName) {
+ resolves(`${firstName} S`);
+ } else {
+ rejects(new Error("You didn't pass in a first name!"));
+ }
+ })
+};
+
+const firstName = 'Mas';
+getAnonName(firstName).then(response => {
+ console.log(response);
+})
+ .catch(error => {
+ console.log(error);
+ })
\ No newline at end of file
diff --git a/Week2/homework/masoud/js-exercises/Ex2-isItBiggerThan10.js b/Week2/homework/masoud/js-exercises/Ex2-isItBiggerThan10.js
new file mode 100644
index 000000000..4767e1e12
--- /dev/null
+++ b/Week2/homework/masoud/js-exercises/Ex2-isItBiggerThan10.js
@@ -0,0 +1,18 @@
+const checkDoubleDigits = number => {
+ return new Promise((resolves, rejects) => {
+ if (number >= 10) {
+ resolves('The number is bigger than or equal 10!');
+ } else {
+ rejects(new Error('Error! The number is smaller than 10...'));
+ }
+ })
+};
+
+const number = 10;
+
+checkDoubleDigits(number).then(response => {
+ console.log(response);
+})
+ .catch(error => {
+ console.log(error);
+ })
\ No newline at end of file
diff --git a/Week2/homework/masoud/pokemon-app/index.html b/Week2/homework/masoud/pokemon-app/index.html
new file mode 100644
index 000000000..8ec3aff7a
--- /dev/null
+++ b/Week2/homework/masoud/pokemon-app/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ pokemon
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Week2/homework/masoud/pokemon-app/script.js b/Week2/homework/masoud/pokemon-app/script.js
new file mode 100644
index 000000000..4bbff0829
--- /dev/null
+++ b/Week2/homework/masoud/pokemon-app/script.js
@@ -0,0 +1,71 @@
+//Calling main function after window load
+window.onload = main;
+
+//Define main function
+function main() {
+ //Define button element
+ const btn = document.createElement('button');
+ btn.textContent = 'start';
+ btn.style.display = 'block';
+ document.body.appendChild(btn);
+
+ // Define select element
+ const select = document.createElement('select');
+ select.style.display = 'block';
+ document.body.appendChild(select);
+
+ //Define image
+ const img = document.createElement('img');
+
+ //When button is clicked
+ btn.addEventListener('click', () => {
+ const url = `https://pokeapi.co/api/v2/pokemon/?limit=20&offset=20`;//Define API URL
+ fetchData(url, select, img); // Get data from API and insert to DOM
+ });
+}
+
+// Add data to DOM
+function addPokemonToDOM(data, select, img) {
+
+ //Add list to select tag
+ data.results.forEach(element => {
+ const option = document.createElement('option');
+ option.value = element.name;
+ option.textContent = element.name;
+ select.appendChild(option);
+ });
+
+ //User selection
+ select.addEventListener('input', () => {
+ data.results.forEach(element => {
+ if (select.value == element.name) {
+ const imgURL = element.url;
+ fetch(imgURL) // second API request to get image
+ .then(function (response) {
+ return response.json();
+ })
+ .then(function (myJson) {
+ img.src = myJson.sprites.back_default;
+ document.body.appendChild(img);
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
+ }
+ })
+ })
+};
+
+//Get data from API by using fetch API
+function fetchData(url, select, img) {
+ fetch(url) // First getting data
+ .then(function (response) {
+ return response.json();
+ })
+ .then(function (myJson) {
+ addPokemonToDOM(myJson, select, img); // Add data to DOM
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
+};
\ No newline at end of file
diff --git a/hackyourrepo-app/Masoud/week2/css/style.css b/hackyourrepo-app/Masoud/week2/css/style.css
new file mode 100644
index 000000000..155319d68
--- /dev/null
+++ b/hackyourrepo-app/Masoud/week2/css/style.css
@@ -0,0 +1,119 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+body{
+ background-color: #313267;
+ font-size: 14px;
+ font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+ width: 100vw;
+ height: calc(100vh - 20px);
+}
+
+header{
+ height: 15%;
+ background-color:#313267 ;
+}
+
+
+header a{
+ height: 100%;
+ display: block;
+ text-align: center;
+}
+
+img{
+ height: inherit;
+ padding: 5px;
+}
+
+.container{
+ background-color: #6ed5e7;
+ width: calc(95% - 5px);
+ margin: auto;
+ height: 85%;
+}
+
+.selector{
+ padding: 10px;
+ font-size: 1.4em;
+ background-color: rgb(252, 103, 49);
+ color: white;
+}
+
+#repo-items{
+ font-size: 12px;
+ font-family: sans-serif;
+ font-weight: 700;
+ color: #444;
+ padding: .6em 1.4em .5em .8em;
+ max-width: 100%; /* useful when width is set to anything other than 100% */
+ margin: 0px auto;
+ border: 1px solid #aaa;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ background-color: #fff;
+ font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+.des-con{
+ display: flex;
+ padding: 10px;
+}
+
+.description, .contributers{
+ border: 2px rgb(223, 152, 152) solid;
+ margin: 5px;
+ height: 70vh;
+ overflow: auto;
+}
+
+.description {
+ width: 40%;
+}
+
+.contributers{
+ width: 60%;
+}
+
+.contributers img{
+ width: 20%;
+ border-radius: 50%;
+}
+
+.items {
+ display: flex;
+ justify-content: space-between;
+ padding: 5px 15px;
+ margin: 5px;
+ align-items: center;
+}
+
+table{
+ border-spacing: 10px;
+}
+
+@media only screen and (max-width:550px){
+ .des-con{
+ flex-direction: column;
+ align-items: center;
+ }
+ .description, .contributers{
+ width: 90%;
+ overflow:visible;
+ height: auto;
+ }
+ .selector{
+ text-align: center;
+ }
+ #repo-items{
+ margin-top: 10px;
+ }
+
+ body{
+ width: 100%;
+ height: 100%;
+ }
+}
\ No newline at end of file
diff --git a/hackyourrepo-app/Masoud/week2/img/favicon.ico b/hackyourrepo-app/Masoud/week2/img/favicon.ico
new file mode 100644
index 000000000..08da91b2b
Binary files /dev/null and b/hackyourrepo-app/Masoud/week2/img/favicon.ico differ
diff --git a/hackyourrepo-app/Masoud/week2/img/hyf.png b/hackyourrepo-app/Masoud/week2/img/hyf.png
new file mode 100644
index 000000000..e01f87168
Binary files /dev/null and b/hackyourrepo-app/Masoud/week2/img/hyf.png differ
diff --git a/hackyourrepo-app/Masoud/week2/index.html b/hackyourrepo-app/Masoud/week2/index.html
new file mode 100644
index 000000000..4b6489974
--- /dev/null
+++ b/hackyourrepo-app/Masoud/week2/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+ Hack Your Future
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/hackyourrepo-app/Masoud/week2/js/script.js b/hackyourrepo-app/Masoud/week2/js/script.js
new file mode 100644
index 000000000..9a68646f5
--- /dev/null
+++ b/hackyourrepo-app/Masoud/week2/js/script.js
@@ -0,0 +1,162 @@
+window.onload = main;
+
+function main() {
+ //Create header element and its children
+ const header = document.createElement('header');
+ const imgLink = document.createElement('a');
+ const imgHeader = document.createElement('img');
+
+ imgLink.href = '#';
+ imgHeader.src = 'img/hyf.png';
+ imgHeader.alt = 'HYF logo';
+ document.body.appendChild(header);
+ header.appendChild(imgLink);
+ imgLink.appendChild(imgHeader);
+
+ //Create container and main tag
+ const container = document.createElement('div');
+ const main = document.createElement('main');
+
+ container.classList.add('container');
+ document.body.appendChild(container);
+ container.appendChild(main);
+
+ //Create section for select repositories
+ const selectorSection = document.createElement('section');
+ selectorSection.classList.add('selector');
+ main.appendChild(selectorSection);
+
+ const labelElement = document.createElement('label');
+ labelElement.for = 'repo-items';
+ labelElement.textContent = 'Hack Your Future Repositories:';
+ selectorSection.appendChild(labelElement);
+
+ const selectElement = document.createElement('select');
+ selectElement.id = 'repo-items';
+ selectorSection.appendChild(selectElement);
+
+
+ //Create description and contributers
+ //Description
+ const desconElement = document.createElement('div');
+ desconElement.classList.add('des-con');
+ main.appendChild(desconElement);
+
+ const descriptionSection = document.createElement('section');
+ descriptionSection.classList.add('description');
+ desconElement.appendChild(descriptionSection);
+
+ const desTable = document.createElement('table');
+ descriptionSection.appendChild(desTable);
+
+ const bodyTable = document.createElement('tbody');
+ desTable.appendChild(bodyTable);
+
+ //Contributers
+ const contributersSection = document.createElement('section');
+ contributersSection.classList.add('contributers');
+ desconElement.appendChild(contributersSection);
+
+ fetchRepoList(selectElement, bodyTable, contributersSection);
+};
+
+
+function fetchRepoList(selectElement, bodyTable, contributersSection) {
+ const url = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+ fetch(url)
+ .then(function (response) {
+ return response.json();
+ })
+ .then(function (myJson) {
+ myJson.forEach(element => {
+ const option = document.createElement('option');
+ option.value = element.name;
+ option.textContent = element.name;
+ selectElement.appendChild(option);
+ })
+ addDataToDOM(myJson, selectElement, bodyTable, contributersSection);
+ })
+ .catch(function (error) {
+ const errElement = document.createElement('h3');
+ errElement.style.backgroundColor = 'orange';
+ errElement.style.color = 'white';
+ errElement.style.display = 'block';
+ errElement.style.padding = '10px';
+ errElement.innerHTML = `
+ network request failed
+
+ ${error}`;
+ bodyTable.parentNode.insertBefore(errElement, bodyTable);
+ });
+};
+
+function addDataToDOM(data, selectElement, bodyTable, contributersSection) {
+ selectElement.addEventListener('change', () => {
+ contributersSection.innerHTML = '';
+ data.forEach(element => {
+ if (element.name == selectElement.value) {
+ const table = `
+
+ | Repository |
+ ${element.name} |
+
+
+ | Description |
+ ${element.description} |
+
+
+ | Forks |
+ ${element.forks} |
+
+
+ | Updated |
+ ${element.updated_at} |
+
`;
+ bodyTable.innerHTML = table;
+
+ const url = element.contributors_url;
+ fetchContributers(url, contributersSection);
+ }
+ })
+ })
+};
+
+function fetchContributers(url, contributersSection) {
+ fetch(url)
+ .then(function (response) {
+ return response.json();
+ })
+ .then(function (myJson) {
+
+ myJson.forEach(element => {
+ const contItem = document.createElement('div');
+ const image = document.createElement('img');
+ const gitName = document.createElement('h3');
+ const contributionsNum = document.createElement('h4');
+
+ contItem.appendChild(image);
+ contItem.appendChild(gitName);
+ contItem.appendChild(contributionsNum);
+
+ contributersSection.appendChild(contItem);
+
+ image.src = element.avatar_url;
+ gitName.textContent = element.login;
+ contributionsNum.textContent = element.contributions;
+ contItem.classList.add('items');
+ })
+
+ })
+ .catch(function (error) {
+ const errElement = document.createElement('h3');
+ errElement.style.backgroundColor = 'orange';
+ errElement.style.color = 'white';
+ errElement.style.display = 'block';
+ errElement.style.padding = '10px';
+ errElement.innerHTML = `
+ network request failed
+
+ ${error}`;
+ contributersSection.parentNode.insertBefore(errElement, contributersSection);
+ });
+};
\ No newline at end of file
diff --git a/hackyourrepo-app/hyf.png b/hackyourrepo-app/hyf.png
deleted file mode 100755
index 76bc5a13b..000000000
Binary files a/hackyourrepo-app/hyf.png and /dev/null differ
diff --git a/hackyourrepo-app/index.html b/hackyourrepo-app/index.html
deleted file mode 100755
index 2b202e708..000000000
--- a/hackyourrepo-app/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
- HackYourRepo
-
-
-
-
-
-
-
diff --git a/hackyourrepo-app/script.js b/hackyourrepo-app/script.js
deleted file mode 100755
index a2206d1ed..000000000
--- a/hackyourrepo-app/script.js
+++ /dev/null
@@ -1,5 +0,0 @@
-"use strict";
-
-/*
- Write here your JavaScript for HackYourRepo!
-*/
diff --git a/hackyourrepo-app/style.css b/hackyourrepo-app/style.css
deleted file mode 100755
index 5b3acae8a..000000000
--- a/hackyourrepo-app/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-/*
- Write here your CSS rules for HackYourRepo!
-*/