diff --git a/Week1/homework/codeAlong-numAPI/app.js b/Week1/homework/codeAlong-numAPI/app.js new file mode 100644 index 000000000..c8a149a37 --- /dev/null +++ b/Week1/homework/codeAlong-numAPI/app.js @@ -0,0 +1,40 @@ +const number = document.getElementById('number'); +const fact = document.getElementById('fact'); + +number.addEventListener('input', addText); + +function addText(){ + const num = number.value; + const URL = `http://numbersapi.com/${num}`; + + const xhr = new XMLHttpRequest(); + xhr.open('GET', URL, true); + xhr.send(); + + // 4. This will be called after the response is received + xhr.onload = function() { + if (xhr.status != 200 && xhr.status != 200) { + // analyze HTTP status of the response + console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { + // show the result + let response = xhr.responseText; + fact.style.display = 'block'; + fact.textContent = response; + } + }; + + xhr.onprogress = function(event) { + if (event.lengthComputable) { + console.log(`Received ${event.loaded} of ${event.total} bytes`); + } else { + console.log(`Received ${event.loaded} bytes`); // no Content-Length + } + }; + + xhr.onerror = function() { + console.log('Request failed'); + }; + + +} \ No newline at end of file diff --git a/Week1/homework/codeAlong-numAPI/index.html b/Week1/homework/codeAlong-numAPI/index.html new file mode 100644 index 000000000..1781ac32b --- /dev/null +++ b/Week1/homework/codeAlong-numAPI/index.html @@ -0,0 +1,30 @@ + + + + + + Number API + + + + +
+
+
+
Number Facts
+ +
+ + +
+ + +
+
+ + + + + + + \ No newline at end of file diff --git a/Week1/homework/js-exercises/dogGallery.js b/Week1/homework/js-exercises/dogGallery.js new file mode 100644 index 000000000..f1f888259 --- /dev/null +++ b/Week1/homework/js-exercises/dogGallery.js @@ -0,0 +1,59 @@ +const XMLBtn = document.getElementById('btn1'); +const AxiosBtn = document.getElementById('btn2'); + +function xhrMethod() { + const xhr = new XMLHttpRequest(); + const li = document.createElement('li'); + const image = document.createElement('img'); + const ul = document.getElementById('list'); + const url = 'https://dog.ceo/api/breeds/image/random' + xhr.open('GET', url); + xhr.send(); + xhr.onreadystatechange = processRequest; + + ul.appendChild(li.appendChild(image)) + + function processRequest(e) { + if(xhr.readyState == 4 && xhr.status == 200) { + let response = JSON.parse(xhr.responseText); + image.src = response.message; + image.style.width = '300px' + image.style.height = '300px' + image.style.margin = '5px' + + }; + }; + xhr.onerror = function() { + if (xhr.status != 200) { + alert (`Error ${xhr.status}: ${xhr.statusText}`); + }; + }; + + }; + +XMLBtn.addEventListener('click', xhrMethod); + + + +function axiosMethod() { + const li = document.createElement('li'); + const image = document.createElement('img'); + const ul = document.getElementById('list'); + ul.appendChild(li.appendChild(image)) + axios + .get('https://dog.ceo/api/breeds/image/random') + .then(function(response) { + + image.src = response.data.message; + image.style.width = '300px' + image.style.height = '300px' + image.style.margin = '5px' + + }) + .catch(function(error) { + console.log(error) + }); +} + + +AxiosBtn.addEventListener('click', axiosMethod); diff --git a/Week1/homework/js-exercises/getandomUser.js b/Week1/homework/js-exercises/getandomUser.js new file mode 100644 index 000000000..b365902ad --- /dev/null +++ b/Week1/homework/js-exercises/getandomUser.js @@ -0,0 +1,40 @@ +function xhrMethod() { +const xhr = new XMLHttpRequest(); +const url = 'https://www.randomuser.me/api' + +xhr.open('GET', url); +xhr.send(); + +xhr.onreadystatechange = processRequest; + +function processRequest(e) { + if(xhr.readyState == 4 && xhr.status == 200) { + let respons = JSON.parse(xhr.responseText); + console.log(respons) + } +} + +xhr.onerror = function() { + if (xhr.status != 200) { + alert (`Error ${xhr.status}: ${xhr.statusText}`) + } +} + +} + + +const axios = require('axios'); +function axiosMethod() { + axios + .get('https://www.randomuser.me/api') + .then(function(response) { + console.log(response.data); + }) + .catch(function(error) { + console.log(error) + }); +} + + +axiosMethod(); +xhrMethod(); \ No newline at end of file diff --git a/Week1/homework/js-exercises/humor.js b/Week1/homework/js-exercises/humor.js new file mode 100644 index 000000000..55857e01c --- /dev/null +++ b/Week1/homework/js-exercises/humor.js @@ -0,0 +1,42 @@ + + +function xhrMethod() { + const xhr = new XMLHttpRequest(); + const url = 'https://xkcd.now.sh/?comic=latest' + xhr.open('GET', url); + xhr.send(); + xhr.onreadystatechange = processRequest; + function processRequest(e) { + if(xhr.readyState == 4 && xhr.status == 200) { + let response = JSON.parse(xhr.responseText); + document.getElementsByTagName('img').src = response.img; + console.log(response); + }; + }; + xhr.onerror = function() { + if (xhr.status != 200) { + alert (`Error ${xhr.status}: ${xhr.statusText}`); + }; + }; + }; + + xhrMethod(); + + + + + +function axiosMethod() { + axios + .get('https://xkcd.now.sh/?comic=latest') + .then(function(response) { + console.log(response.data); + document.getElementsByTagName('img').src = response.data.img; + }) + .catch(function(error) { + console.log(error) + }); +} + + +axiosMethod(); diff --git a/Week1/homework/js-exercises/index.html b/Week1/homework/js-exercises/index.html new file mode 100644 index 000000000..7337b551a --- /dev/null +++ b/Week1/homework/js-exercises/index.html @@ -0,0 +1,20 @@ + + + + + + Dog Gallery + + +
+ + + + +
+ + + + + + \ No newline at end of file diff --git a/Week1/homework/masoud/js-exercises/Ex1-WhoDoWeHaveHere.js b/Week1/homework/masoud/js-exercises/Ex1-WhoDoWeHaveHere.js new file mode 100644 index 000000000..394f0d9cd --- /dev/null +++ b/Week1/homework/masoud/js-exercises/Ex1-WhoDoWeHaveHere.js @@ -0,0 +1,51 @@ +const URL = 'https://www.randomuser.me/api'; + +function requestWithXHR(URL){ +const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; +const xhr = new XMLHttpRequest(); +xhr.open('GET', URL, true); +xhr.send(); + +// 4. This will be called after the response is received +xhr.onload = function() { + if (xhr.status != 200 && xhr.status != 200) { // analyze HTTP status of the response + console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { // show the result + const response = JSON.parse(xhr.responseText); + console.log(response.results[0].gender); + } +}; + +xhr.onprogress = function(event) { + if (event.lengthComputable) { + console.log(`Received ${event.loaded} of ${event.total} bytes`); + } else { + console.log(`Received ${event.loaded} bytes`); // no Content-Length + } + +}; + +xhr.onerror = function() { + console.log("Request failed"); +}; +}; + +function requestWithAxios(URL){ + const axios = require('axios').default; + axios.get(URL) + .then(function (response) { + // handle success + console.log(response.data.results[0].gender); + }) + .catch(function (error) { + // handle error + console.log("Request failed"); + }) + .then(function () { + // always executed + }); + +}; + +requestWithXHR(URL); +requestWithAxios(URL); \ No newline at end of file diff --git a/Week1/homework/masoud/js-exercises/Ex2-ProgrammerHumor.js b/Week1/homework/masoud/js-exercises/Ex2-ProgrammerHumor.js new file mode 100644 index 000000000..10bbdb92f --- /dev/null +++ b/Week1/homework/masoud/js-exercises/Ex2-ProgrammerHumor.js @@ -0,0 +1,53 @@ +const URL = 'https://xkcd.now.sh/?comic=latest'; +const image1 = document.getElementById('image1'); +const image2 = document.getElementById('image2'); + +function requestWithXHR(URL){ +const xhr = new XMLHttpRequest(); +xhr.open('GET', URL, true); +xhr.send(); + +// 4. This will be called after the response is received +xhr.onload = function() { + if (xhr.status != 200 && xhr.status != 200) { // analyze HTTP status of the response + console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { // show the result + const response = JSON.parse(xhr.responseText); + console.log(response); + image1.src = response.img; + } +}; + +xhr.onprogress = function(event) { + if (event.lengthComputable) { + console.log(`Received ${event.loaded} of ${event.total} bytes`); + } else { + console.log(`Received ${event.loaded} bytes`); // no Content-Length + } + +}; + +xhr.onerror = function() { + console.log("Request failed"); +}; +}; + +function requestWithAxios(URL){ + axios.get(URL) + .then(function (response) { + // handle success + console.log(response.data); + image2.src = response.data.img; + }) + .catch(function (error) { + // handle error + console.log("Request failed"); + }) + .then(function () { + // always executed + }); + +}; + +requestWithXHR(URL); +requestWithAxios(URL); \ No newline at end of file diff --git a/Week1/homework/masoud/js-exercises/Ex2.html b/Week1/homework/masoud/js-exercises/Ex2.html new file mode 100644 index 000000000..a204a0823 --- /dev/null +++ b/Week1/homework/masoud/js-exercises/Ex2.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/Week1/homework/masoud/js-exercises/Ex3-DogPhotoGallery.js b/Week1/homework/masoud/js-exercises/Ex3-DogPhotoGallery.js new file mode 100644 index 000000000..e4277b142 --- /dev/null +++ b/Week1/homework/masoud/js-exercises/Ex3-DogPhotoGallery.js @@ -0,0 +1,70 @@ +const URL = 'https://dog.ceo/api/breeds/image/random'; +const xmlBtn = document.getElementById('xmlBTN'); +const axiosBtn = document.getElementById('axiosBTN'); +const ulElm = document.getElementById('list'); +const imgSize = '300px'; +ulElm.style.display = 'flex'; +ulElm.style.flexWrap = 'wrap'; + +xmlBtn.addEventListener('click',requestWithXHR); +axiosBtn.addEventListener('click',requestWithAxios); + + +function requestWithXHR() { + const xhr = new XMLHttpRequest(); + xhr.open('GET', URL, true); + xhr.send(); + + // 4. This will be called after the response is received + xhr.onload = function() { + if (xhr.status != 200 && xhr.status != 200) { + // analyze HTTP status of the response + console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { + // show the result + const response = JSON.parse(xhr.responseText); + const liElm = document.createElement('li'); + const imgElm = document.createElement('img'); + imgElm.src = response.message; + imgElm.style.height = imgSize; + liElm.style.listStyle = 'none'; + liElm.appendChild(imgElm); + ulElm.appendChild(liElm); + } + }; + + xhr.onprogress = function(event) { + if (event.lengthComputable) { + console.log(`Received ${event.loaded} of ${event.total} bytes`); + } else { + console.log(`Received ${event.loaded} bytes`); // no Content-Length + } + }; + + xhr.onerror = function() { + console.log('Request failed'); + }; +} + + + +function requestWithAxios(){ + axios.get(URL) + .then(function (response) { + // handle success + const liElm = document.createElement('li'); + const imgElm = document.createElement('img'); + imgElm.src = response.data.message; + imgElm.style.height = imgSize; + liElm.style.listStyle = 'none'; + liElm.appendChild(imgElm); + ulElm.appendChild(liElm); + }) + .catch(function (error) { + // handle error + console.log("Request failed"); + }) + .then(function () { + // always executed + }); +}; diff --git a/Week1/homework/masoud/js-exercises/Ex3.html b/Week1/homework/masoud/js-exercises/Ex3.html new file mode 100644 index 000000000..54bdb6666 --- /dev/null +++ b/Week1/homework/masoud/js-exercises/Ex3.html @@ -0,0 +1,16 @@ + + + + + + Document + + + + + + + + + + \ No newline at end of file diff --git a/Week2/LESSONPLAN.md b/Week2/AmirHossein/LESSONPLAN.md similarity index 100% rename from Week2/LESSONPLAN.md rename to Week2/AmirHossein/LESSONPLAN.md diff --git a/Week2/MAKEME.md b/Week2/AmirHossein/MAKEME.md similarity index 100% rename from Week2/MAKEME.md rename to Week2/AmirHossein/MAKEME.md diff --git a/Week2/README.md b/Week2/AmirHossein/README.md similarity index 100% rename from Week2/README.md rename to Week2/AmirHossein/README.md diff --git a/Week2/assets/week2.png b/Week2/AmirHossein/assets/week2.png old mode 100755 new mode 100644 similarity index 100% rename from Week2/assets/week2.png rename to Week2/AmirHossein/assets/week2.png diff --git a/Week2/AmirHossein/homework/js-exercises/johnWho.js b/Week2/AmirHossein/homework/js-exercises/johnWho.js new file mode 100644 index 000000000..a99b02cf4 --- /dev/null +++ b/Week2/AmirHossein/homework/js-exercises/johnWho.js @@ -0,0 +1,16 @@ +const getAnonName = (firstName) => { + return new Promise((resolve, reject) => { + const fullName = `${firstName} Doe` + resolve(fullName) + console.log(fullName) + + + + reject(new Error("You didn't pass in a first name!")) + + }) + + +}; + +getAnonName() \ No newline at end of file diff --git a/Week2/traversy_async_crash/README.md b/Week2/AmirHossein/traversy_async_crash/README.md similarity index 100% rename from Week2/traversy_async_crash/README.md rename to Week2/AmirHossein/traversy_async_crash/README.md diff --git a/Week2/traversy_async_crash/callbacks.js b/Week2/AmirHossein/traversy_async_crash/callbacks.js similarity index 100% rename from Week2/traversy_async_crash/callbacks.js rename to Week2/AmirHossein/traversy_async_crash/callbacks.js diff --git a/Week2/traversy_async_crash/index.html b/Week2/AmirHossein/traversy_async_crash/index.html similarity index 100% rename from Week2/traversy_async_crash/index.html rename to Week2/AmirHossein/traversy_async_crash/index.html diff --git a/Week2/traversy_async_crash/promises.js b/Week2/AmirHossein/traversy_async_crash/promises.js similarity index 100% rename from Week2/traversy_async_crash/promises.js rename to Week2/AmirHossein/traversy_async_crash/promises.js 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/Week3/LESSONPLAN.md b/Week3/AmirHossein/LESSONPLAN.md similarity index 100% rename from Week3/LESSONPLAN.md rename to Week3/AmirHossein/LESSONPLAN.md diff --git a/Week3/MAKEME.md b/Week3/AmirHossein/MAKEME.md similarity index 100% rename from Week3/MAKEME.md rename to Week3/AmirHossein/MAKEME.md diff --git a/Week3/README.md b/Week3/AmirHossein/README.md similarity index 100% rename from Week3/README.md rename to Week3/AmirHossein/README.md diff --git a/Week3/assets/JavaScript3_classes.png b/Week3/AmirHossein/assets/JavaScript3_classes.png similarity index 100% rename from Week3/assets/JavaScript3_classes.png rename to Week3/AmirHossein/assets/JavaScript3_classes.png diff --git a/Week3/traversy_fetch_api/app.js b/Week3/AmirHossein/traversy_fetch_api/app.js similarity index 100% rename from Week3/traversy_fetch_api/app.js rename to Week3/AmirHossein/traversy_fetch_api/app.js diff --git a/Week3/traversy_fetch_api/index.html b/Week3/AmirHossein/traversy_fetch_api/index.html similarity index 100% rename from Week3/traversy_fetch_api/index.html rename to Week3/AmirHossein/traversy_fetch_api/index.html diff --git a/Week3/traversy_fetch_api/sample.txt b/Week3/AmirHossein/traversy_fetch_api/sample.txt similarity index 100% rename from Week3/traversy_fetch_api/sample.txt rename to Week3/AmirHossein/traversy_fetch_api/sample.txt diff --git a/Week3/traversy_fetch_api/users.json b/Week3/AmirHossein/traversy_fetch_api/users.json similarity index 100% rename from Week3/traversy_fetch_api/users.json rename to Week3/AmirHossein/traversy_fetch_api/users.json diff --git a/Week3/traversy_oop_crash/1_basics_literals.js b/Week3/AmirHossein/traversy_oop_crash/1_basics_literals.js similarity index 100% rename from Week3/traversy_oop_crash/1_basics_literals.js rename to Week3/AmirHossein/traversy_oop_crash/1_basics_literals.js diff --git a/Week3/traversy_oop_crash/2_constructor.js b/Week3/AmirHossein/traversy_oop_crash/2_constructor.js similarity index 100% rename from Week3/traversy_oop_crash/2_constructor.js rename to Week3/AmirHossein/traversy_oop_crash/2_constructor.js diff --git a/Week3/traversy_oop_crash/3_prototypes.js b/Week3/AmirHossein/traversy_oop_crash/3_prototypes.js similarity index 100% rename from Week3/traversy_oop_crash/3_prototypes.js rename to Week3/AmirHossein/traversy_oop_crash/3_prototypes.js diff --git a/Week3/traversy_oop_crash/4_inheritance.js b/Week3/AmirHossein/traversy_oop_crash/4_inheritance.js similarity index 100% rename from Week3/traversy_oop_crash/4_inheritance.js rename to Week3/AmirHossein/traversy_oop_crash/4_inheritance.js diff --git a/Week3/traversy_oop_crash/5_object_create.js b/Week3/AmirHossein/traversy_oop_crash/5_object_create.js similarity index 100% rename from Week3/traversy_oop_crash/5_object_create.js rename to Week3/AmirHossein/traversy_oop_crash/5_object_create.js diff --git a/Week3/traversy_oop_crash/6_classes.js b/Week3/AmirHossein/traversy_oop_crash/6_classes.js similarity index 100% rename from Week3/traversy_oop_crash/6_classes.js rename to Week3/AmirHossein/traversy_oop_crash/6_classes.js diff --git a/Week3/traversy_oop_crash/7_subclasses.js b/Week3/AmirHossein/traversy_oop_crash/7_subclasses.js similarity index 100% rename from Week3/traversy_oop_crash/7_subclasses.js rename to Week3/AmirHossein/traversy_oop_crash/7_subclasses.js diff --git a/Week3/traversy_oop_crash/README.md b/Week3/AmirHossein/traversy_oop_crash/README.md similarity index 100% rename from Week3/traversy_oop_crash/README.md rename to Week3/AmirHossein/traversy_oop_crash/README.md diff --git a/Week3/traversy_oop_crash/assets/2_constructor.png b/Week3/AmirHossein/traversy_oop_crash/assets/2_constructor.png similarity index 100% rename from Week3/traversy_oop_crash/assets/2_constructor.png rename to Week3/AmirHossein/traversy_oop_crash/assets/2_constructor.png diff --git a/Week3/traversy_oop_crash/assets/3_prototypes.png b/Week3/AmirHossein/traversy_oop_crash/assets/3_prototypes.png similarity index 100% rename from Week3/traversy_oop_crash/assets/3_prototypes.png rename to Week3/AmirHossein/traversy_oop_crash/assets/3_prototypes.png diff --git a/Week3/traversy_oop_crash/assets/4_inheritance.png b/Week3/AmirHossein/traversy_oop_crash/assets/4_inheritance.png similarity index 100% rename from Week3/traversy_oop_crash/assets/4_inheritance.png rename to Week3/AmirHossein/traversy_oop_crash/assets/4_inheritance.png diff --git a/Week3/traversy_oop_crash/assets/6_classes.png b/Week3/AmirHossein/traversy_oop_crash/assets/6_classes.png similarity index 100% rename from Week3/traversy_oop_crash/assets/6_classes.png rename to Week3/AmirHossein/traversy_oop_crash/assets/6_classes.png diff --git a/Week3/traversy_oop_crash/assets/7_subclasses.png b/Week3/AmirHossein/traversy_oop_crash/assets/7_subclasses.png similarity index 100% rename from Week3/traversy_oop_crash/assets/7_subclasses.png rename to Week3/AmirHossein/traversy_oop_crash/assets/7_subclasses.png diff --git a/Week3/traversy_oop_crash/assets/function_proto.png b/Week3/AmirHossein/traversy_oop_crash/assets/function_proto.png similarity index 100% rename from Week3/traversy_oop_crash/assets/function_proto.png rename to Week3/AmirHossein/traversy_oop_crash/assets/function_proto.png diff --git a/Week3/traversy_oop_crash/index-all.html b/Week3/AmirHossein/traversy_oop_crash/index-all.html similarity index 100% rename from Week3/traversy_oop_crash/index-all.html rename to Week3/AmirHossein/traversy_oop_crash/index-all.html diff --git a/Week3/traversy_oop_crash/index-all.js b/Week3/AmirHossein/traversy_oop_crash/index-all.js similarity index 100% rename from Week3/traversy_oop_crash/index-all.js rename to Week3/AmirHossein/traversy_oop_crash/index-all.js diff --git a/Week3/traversy_oop_crash/index.html b/Week3/AmirHossein/traversy_oop_crash/index.html similarity index 100% rename from Week3/traversy_oop_crash/index.html rename to Week3/AmirHossein/traversy_oop_crash/index.html diff --git a/hackyourrepo-app/Masoud/week1/css/style.css b/hackyourrepo-app/Masoud/week1/css/style.css new file mode 100644 index 000000000..be7c42c4a --- /dev/null +++ b/hackyourrepo-app/Masoud/week1/css/style.css @@ -0,0 +1,92 @@ +* { + 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); + overflow: hidden; +} + +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.7em; + background-color: rgb(252, 103, 49); + color: white; +} + +#repo-items{ + font-size: 16px; + 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{ + width: 50%; + border: 3px rgb(223, 152, 152) solid; + margin: 5px; + +} + +table{ + border-spacing: 10px; +} + +@media only screen and (max-width:550px){ + .des-con{ + flex-direction: column; + align-items: center; + } + .description, .contributers{ + width: 90%; + } + .selector{ + text-align: center; + } + #repo-items{ + margin-top: 10px; + } +} \ No newline at end of file diff --git a/hackyourrepo-app/Masoud/week1/img/favicon.ico b/hackyourrepo-app/Masoud/week1/img/favicon.ico new file mode 100644 index 000000000..08da91b2b Binary files /dev/null and b/hackyourrepo-app/Masoud/week1/img/favicon.ico differ diff --git a/hackyourrepo-app/Masoud/week1/img/hyf.png b/hackyourrepo-app/Masoud/week1/img/hyf.png new file mode 100644 index 000000000..e01f87168 Binary files /dev/null and b/hackyourrepo-app/Masoud/week1/img/hyf.png differ diff --git a/hackyourrepo-app/Masoud/week1/index.html b/hackyourrepo-app/Masoud/week1/index.html new file mode 100644 index 000000000..34d6e57b6 --- /dev/null +++ b/hackyourrepo-app/Masoud/week1/index.html @@ -0,0 +1,67 @@ + + + + + + + Hack Your Future + + + + + +
+ +
+ +
+
+
+ + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
RepositorySampleRepo1
DescriptionThis repository is meant to be a sample
Forks5
Updated2020-05-27 12:00:00
+
+ +
+

contributers

+
+
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/hackyourrepo-app/Masoud/week1/js/script.js b/hackyourrepo-app/Masoud/week1/js/script.js new file mode 100644 index 000000000..bb31a8bb4 --- /dev/null +++ b/hackyourrepo-app/Masoud/week1/js/script.js @@ -0,0 +1 @@ +console.log('ssadfd'); 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/index.html b/hackyourrepo-app/index.html new file mode 100755 index 000000000..c17533242 --- /dev/null +++ b/hackyourrepo-app/index.html @@ -0,0 +1,87 @@ + + + + + + + + + + + + HackYourRepo + + + + +
+ +
+
+
+ + + + + + + + + + + + + + + + + + +
Repositories:SampleRepo1
Description: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, iure ipsum? Consequatur sequi esse veritatis in exercitationem quos repellat doloribus earum tempora cumque!
Forks: 5
Update: 2020-05-27 12:00:00
+
+ +
+
+
Contributors
+
+ + isalga +
9
+
+
+ + isalga +
9
+
+ +
+
+
+ + + + + + + diff --git a/hackyourrepo-app/script.js b/hackyourrepo-app/script.js new file mode 100755 index 000000000..705924282 --- /dev/null +++ b/hackyourrepo-app/script.js @@ -0,0 +1,26 @@ +"use strict"; + +/* + Write here your JavaScript for HackYourRepo! +*/ +const placeholderRepos = [ + { + name: 'SampleRepo1', + description: 'This repository is meant to be a sample', + forks: 5, + updated: '2020-05-27 12:00:00', + }, + { + name: 'AndAnotherOne', + description: 'Another sample repo! Can you believe it?', + forks: 9, + updated: '2020-05-27 12:00:00', + }, + { + name: 'HYF-Is-The-Best', + description: + "This repository contains all things HackYourFuture. That's because HYF is amazing!!!!", + forks: 130, + updated: '2020-05-27 12:00:00', + }, +]; \ No newline at end of file diff --git a/hackyourrepo-app/style.css b/hackyourrepo-app/style.css new file mode 100755 index 000000000..64627fdfd --- /dev/null +++ b/hackyourrepo-app/style.css @@ -0,0 +1,96 @@ +/* + Write here your CSS rules for HackYourRepo! +*/ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + +} + +#header { + color: white; + height: 50px; + background-color: #3f51b5; + display: flex; + align-items: center; + padding: 20px; + +} +p { + margin-right: 30px; +} + +.container { + width: 80%; + margin: 0 auto; + + +} + +.bottom-box { + + display: flex; + flex-direction: row; + height: auto; +} + +#left-side { + margin-top: 10px; + width: 50%; + +} +.card { + margin-left: 5px; + margin-top: 5px; + box-shadow: + 0px 20px 30px 0px rgba(0, 0, 0, 0.05), + 0px 4px 4px 0 rgba(0, 0, 0, .15), + 1px 2px 2px 0 rgba(0, 0, 0, .2); + font-size: 2vmin; +} +.card .col-right { + padding-left: 30px; + padding-right: 25px; + +} +.col-left { + + padding: 5px 0 0 5px; +} +#right-side { + + width: 50%; +} + +#contributor { + margin-top: 10px; + margin-left:0.4rem; + color: darkgray; + box-shadow: none; + padding-top: 1rem; + padding-left: 0.3rem; + border: 1px solid rgba(0, 0, 0, 0.12); + border-bottom: none; + height: 3em; +} +.small-card { + display: flex; + justify-content: flex-start; + align-items: center; + margin: 0.4rem; +} +img { + margin: 1rem; +} + + +.badge { + margin-left: auto; + background-color: #a9a9a9; + color: white; + border-radius: 4px; + margin-right: 1rem; + margin-top: 1.3rem; + padding: 0.1rem 0.8rem; +}