From 461f73ec7000fb1c3a8146912fed3e16d5e5eb82 Mon Sep 17 00:00:00 2001 From: robvk Date: Sat, 19 Dec 2020 14:17:56 +0100 Subject: [PATCH 01/10] Update MAKEME.md --- Week1/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index f4eaae7d2..6f040f6bc 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -127,7 +127,7 @@ After you've finished your todo list it's time to show us what you got! The home 1. JavaScript exercises 2. PROJECT: HackYourRepo I -Upload both to your forked JavaScript3 repository in GitHub. Make a pull request to your teacher's forked repository. +Upload both to your forked JavaScript3 repository in GitHub. Make a pull request to the HackYourHomework forked repository. > Forgotten how to upload your homework? Go through the [guide](../hand-in-homework-guide.md) to learn how to do this again. From a064e47ab2e1f4d7b654d7877faef77b3268befb Mon Sep 17 00:00:00 2001 From: Nizami Mursudlu Date: Tue, 5 Jan 2021 20:51:00 +0100 Subject: [PATCH 02/10] exersices 01 02 03 done --- Week2/homework/.vscode/settings.json | 3 +++ Week2/homework/exercise01.js | 33 +++++++++++++++++++++++ Week2/homework/exersice02.js | 24 +++++++++++++++++ Week2/homework/pokemon-app/index.html | 24 +++++++++++++++++ Week2/homework/pokemon-app/script.js | 38 +++++++++++++++++++++++++++ 5 files changed, 122 insertions(+) create mode 100644 Week2/homework/.vscode/settings.json create mode 100644 Week2/homework/exercise01.js create mode 100644 Week2/homework/exersice02.js create mode 100644 Week2/homework/pokemon-app/index.html create mode 100644 Week2/homework/pokemon-app/script.js diff --git a/Week2/homework/.vscode/settings.json b/Week2/homework/.vscode/settings.json new file mode 100644 index 000000000..aef844305 --- /dev/null +++ b/Week2/homework/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Week2/homework/exercise01.js b/Week2/homework/exercise01.js new file mode 100644 index 000000000..1cd6c8f8e --- /dev/null +++ b/Week2/homework/exercise01.js @@ -0,0 +1,33 @@ +// Take a look at the following function (and try it out in your console): + +// const getAnonName = (firstName, callback) => { +// setTimeout(() => { +// if (!firstName) +// return callback(new Error("You didn't pass in a first name!")); + +// const fullName = `${firstName} Doe`; + +// return callback(fullName); +// }, 2000); +// }; + +// getAnonName('John', console.log); +// Rewrite this function, but replace the callback syntax with the Promise syntax: + +// Have the getAnonName function return a new Promise that uses the firstName parameter +// If the Promise resolves, pass the full name as an argument to resolve with +// If the Promise rejects, pass an error as the argument to reject with: "You didn't pass in a first name!" + +function getAnonName(firstName) { + return new Promise((resolve, reject) => { + setTimeout(() => { + if (firstName) { + const fullName = `${firstName} Doe`; + resolve(console.log(fullName)) + } else { + reject(console.log("You didn't pass in a first name!")) + } + }, 2000) + }) +} +getAnonName("John") \ No newline at end of file diff --git a/Week2/homework/exersice02.js b/Week2/homework/exersice02.js new file mode 100644 index 000000000..232804f5f --- /dev/null +++ b/Week2/homework/exersice02.js @@ -0,0 +1,24 @@ +// Exercise 2: Is it bigger than 10? + +// Write a function called checkDoubleDigits that: + +// Takes 1 argument: a number +// Returns a new Promise +// If the number is bigger than 10, resolve with the string: "The number is bigger than 10!" +// If the number is smaller than 10, reject with the error: "Error! The number is smaller than 10..." + + + +function checkDoubleDigits(number) { + return new Promise((resolve, reject) => { + if (number > 10) { + resolve(console.log("The number is bigger than 10!")) + } else if (number < 10) { + reject(console.log("Error! The number is smaller than 10...")) + } + }) + .catch((error) => { + console.log(error); + }) +} +checkDoubleDigits(11) diff --git a/Week2/homework/pokemon-app/index.html b/Week2/homework/pokemon-app/index.html new file mode 100644 index 000000000..d3a6531ff --- /dev/null +++ b/Week2/homework/pokemon-app/index.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + + + + + +
+ + +
+ + + + + + \ No newline at end of file diff --git a/Week2/homework/pokemon-app/script.js b/Week2/homework/pokemon-app/script.js new file mode 100644 index 000000000..d3ba48af4 --- /dev/null +++ b/Week2/homework/pokemon-app/script.js @@ -0,0 +1,38 @@ +function main() { + const select = document.getElementById("select"); + const url = "https://pokeapi.co/api/v2/pokemon/?limit=151" + const button = document.getElementById("button"); + + img = document.createElement("img") + button.addEventListener('click', + + function fetchName() { + fetch(url) + .then((res) => res.json()) + .then((jsonData) => { + pokemonArr = jsonData.results + pokemonArr.map((element) => { + let option = document.createElement("option") + select.appendChild(option) + option.value = element.name + option.innerHTML = element.name + }) + }); + }) +} main() + +function fetchImage() { + fetch(`https://pokeapi.co/api/v2/pokemon/${select.value}`) + .then(res1 => res1.json()) + .then(function (imageData) { + const div = document.getElementById("div") + div.appendChild(img) + img.src = imageData.sprites.front_default + img.style.width = "250px" + }) + +} + + + + From d3197d985d9be56b0bdde05fdae6f7b01312c080 Mon Sep 17 00:00:00 2001 From: Nizami Mursudlu Date: Wed, 6 Jan 2021 13:08:32 +0100 Subject: [PATCH 03/10] rewrote all html in js for the project --- .../pokemon-app/.vscode/settings.json | 3 ++ Week2/homework/pokemon-app/index.html | 4 --- Week2/homework/pokemon-app/script.js | 36 ++++++++++++++++--- 3 files changed, 34 insertions(+), 9 deletions(-) create mode 100644 Week2/homework/pokemon-app/.vscode/settings.json diff --git a/Week2/homework/pokemon-app/.vscode/settings.json b/Week2/homework/pokemon-app/.vscode/settings.json new file mode 100644 index 000000000..aef844305 --- /dev/null +++ b/Week2/homework/pokemon-app/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Week2/homework/pokemon-app/index.html b/Week2/homework/pokemon-app/index.html index d3a6531ff..1906a8f6d 100644 --- a/Week2/homework/pokemon-app/index.html +++ b/Week2/homework/pokemon-app/index.html @@ -9,10 +9,6 @@ - - - -
diff --git a/Week2/homework/pokemon-app/script.js b/Week2/homework/pokemon-app/script.js index d3ba48af4..0a96b5f34 100644 --- a/Week2/homework/pokemon-app/script.js +++ b/Week2/homework/pokemon-app/script.js @@ -1,8 +1,30 @@ + function main() { + + function addPokemonToDOM() { + const buttonElement = document.createElement("button"); + document.body.appendChild(buttonElement); + buttonElement.id = "button"; + buttonElement.innerHTML = "GetPokemon!"; + + const formElement = document.createElement("form"); + document.body.appendChild(formElement); + + const selectElement = document.createElement("select"); + formElement.appendChild(selectElement); + selectElement.id = "select"; + selectElement.setAttribute("onchange", "fetchImage()"); + + const divElement = document.createElement("div"); + document.body.appendChild(divElement); + divElement.id = "div"; + } + addPokemonToDOM() + const select = document.getElementById("select"); const url = "https://pokeapi.co/api/v2/pokemon/?limit=151" const button = document.getElementById("button"); - + const div = document.getElementById("div") img = document.createElement("img") button.addEventListener('click', @@ -16,6 +38,7 @@ function main() { select.appendChild(option) option.value = element.name option.innerHTML = element.name + }) }); }) @@ -23,16 +46,19 @@ function main() { function fetchImage() { fetch(`https://pokeapi.co/api/v2/pokemon/${select.value}`) + .then(res1 => res1.json()) .then(function (imageData) { - const div = document.getElementById("div") div.appendChild(img) img.src = imageData.sprites.front_default - img.style.width = "250px" }) - } - +// HELLO I DID GET THE GOOD OUTCOME, +// BUT I DONT THINK I MEET ALL THE REQUIREMENTS OF THE EXERSISE +// +// DOESN'T WORK INSIDE OF THE MAIN() FUNCTION +// IN CASE THAT HAS TO BE FIX, I HAVE NO IDEA HOW... :)))) +// PLAESE GIVE ME A HIT!!! From e1b53f543398e7854286ac41a890106dde48a14c Mon Sep 17 00:00:00 2001 From: Nizami Mursudlu Date: Thu, 7 Jan 2021 11:41:54 +0100 Subject: [PATCH 04/10] errors are handeled --- Week2/homework/pokemon-app/index.html | 4 -- Week2/homework/pokemon-app/script.js | 70 +++++++++++++-------------- 2 files changed, 33 insertions(+), 41 deletions(-) diff --git a/Week2/homework/pokemon-app/index.html b/Week2/homework/pokemon-app/index.html index 1906a8f6d..ded69cf75 100644 --- a/Week2/homework/pokemon-app/index.html +++ b/Week2/homework/pokemon-app/index.html @@ -9,10 +9,6 @@ - - - - diff --git a/Week2/homework/pokemon-app/script.js b/Week2/homework/pokemon-app/script.js index 0a96b5f34..267eeeca3 100644 --- a/Week2/homework/pokemon-app/script.js +++ b/Week2/homework/pokemon-app/script.js @@ -1,34 +1,33 @@ function main() { - function addPokemonToDOM() { - const buttonElement = document.createElement("button"); - document.body.appendChild(buttonElement); - buttonElement.id = "button"; - buttonElement.innerHTML = "GetPokemon!"; - const formElement = document.createElement("form"); - document.body.appendChild(formElement); + const buttonElement = document.createElement("button"); + document.body.appendChild(buttonElement); + buttonElement.id = "button"; + buttonElement.innerHTML = "GetPokemon!"; - const selectElement = document.createElement("select"); - formElement.appendChild(selectElement); - selectElement.id = "select"; - selectElement.setAttribute("onchange", "fetchImage()"); + const formElement = document.createElement("form"); + document.body.appendChild(formElement); + + const selectElement = document.createElement("select"); + formElement.appendChild(selectElement); + selectElement.id = "select"; + + const divElement = document.createElement("div"); + document.body.appendChild(divElement); + divElement.id = "div"; - const divElement = document.createElement("div"); - document.body.appendChild(divElement); - divElement.id = "div"; - } - addPokemonToDOM() const select = document.getElementById("select"); const url = "https://pokeapi.co/api/v2/pokemon/?limit=151" const button = document.getElementById("button"); const div = document.getElementById("div") img = document.createElement("img") - button.addEventListener('click', - function fetchName() { + + button.addEventListener('click', + function fetchData() { fetch(url) .then((res) => res.json()) .then((jsonData) => { @@ -38,27 +37,24 @@ function main() { select.appendChild(option) option.value = element.name option.innerHTML = element.name - }) - }); + }) + .catch((error) => { + console.log(error); + }) }) -} main() - -function fetchImage() { - fetch(`https://pokeapi.co/api/v2/pokemon/${select.value}`) - - .then(res1 => res1.json()) - .then(function (imageData) { - div.appendChild(img) - img.src = imageData.sprites.front_default - }) -} -// HELLO I DID GET THE GOOD OUTCOME, -// BUT I DONT THINK I MEET ALL THE REQUIREMENTS OF THE EXERSISE -// -// DOESN'T WORK INSIDE OF THE MAIN() FUNCTION -// IN CASE THAT HAS TO BE FIX, I HAVE NO IDEA HOW... :)))) -// PLAESE GIVE ME A HIT!!! + select.onchange = function addPokemonToDOM() { + fetch(`https://pokeapi.co/api/v2/pokemon/${select.value}`) + .then(res1 => res1.json()) + .then(function (imageData) { + div.appendChild(img) + img.src = imageData.sprites.front_default + }) + .catch((error) => { + console.log(error); + }) + } +} main() From 2ea422963f1531b6cc792cacd9b5c6d56cd81c13 Mon Sep 17 00:00:00 2001 From: Nizami Mursudlu Date: Thu, 7 Jan 2021 16:45:17 +0100 Subject: [PATCH 05/10] finished project week2,not sure about error handeling --- hackyourrepo-app/script.js | 118 +++++++++++++++++++++++++++++++++++++ hackyourrepo-app/style.css | 86 +++++++++++++++++++++++++++ 2 files changed, 204 insertions(+) diff --git a/hackyourrepo-app/script.js b/hackyourrepo-app/script.js index a2206d1ed..8b3893e64 100755 --- a/hackyourrepo-app/script.js +++ b/hackyourrepo-app/script.js @@ -3,3 +3,121 @@ /* Write here your JavaScript for HackYourRepo! */ +// writing html in js + +const divMenu = document.createElement("div"); +document.body.appendChild(divMenu); +divMenu.id = "dropdown-menu"; + +const label = document.createElement("label") +divMenu.appendChild(label).innerHTML = "HYF Repositories"; + +const selectElement = document.createElement("select"); +divMenu.appendChild(selectElement); +selectElement.id = "select"; + +const optionElement = document.createElement("option"); +selectElement.appendChild(optionElement).innerHTML = "Chose repository..." +optionElement.setAttribute("value", "''") + +const divError = document.createElement("div") +document.body.appendChild(divError) +divError.id = "errorMessage" + + +const divContainer = document.createElement("div") +document.body.appendChild(divContainer) +divContainer.id = "container" + +const divRepository = document.createElement("div") +divContainer.appendChild(divRepository) +divRepository.id = "repository" + +const divRepositoryName = document.createElement("div") +divRepository.appendChild(divRepositoryName) +divRepositoryName.classList.add("horisontal") +const h4Name = document.createElement("h4") +divRepositoryName.appendChild(h4Name).innerHTML = "Repository:" +const pName = document.createElement("p") +divRepositoryName.appendChild(pName).id = "repository-name" + +const divRepositoryDescription = document.createElement("div") +divRepository.appendChild(divRepositoryDescription) +divRepositoryDescription.classList.add("horisontal") +const h4Description = document.createElement("h4") +divRepositoryDescription.appendChild(h4Description).innerHTML = "Description:" +const pDescription = document.createElement("p") +divRepositoryDescription.appendChild(pDescription).id = "repository-description" + +const divRepositoryForks = document.createElement("div") +divRepository.appendChild(divRepositoryForks) +divRepositoryForks.classList.add("horisontal") +const h4Forks = document.createElement("h4") +divRepositoryForks.appendChild(h4Forks).innerHTML = "Forks:" +const pForks = document.createElement("p") +divRepositoryForks.appendChild(pForks).id = "repository-forks" + +const divRepositoryUpdated = document.createElement("div") +divRepository.appendChild(divRepositoryUpdated) +divRepositoryUpdated.classList.add("horisontal") +const h4Updated = document.createElement("h4") +divRepositoryUpdated.appendChild(h4Updated).innerHTML = "Updated:" +const pUpdated = document.createElement("p") +divRepositoryUpdated.appendChild(pUpdated).id = "repository-updated" + +const divContributors = document.createElement("div") +divContainer.appendChild(divContributors) +divContributors.id = "contributors" +const pContributors = document.createElement("p") +divContributors.appendChild(pContributors).innerHTML = "Contributors" + + + +const repository = document.getElementById("repository"); +const repositoryName = document.getElementById("repository-name"); +const repositoryDescription = document.getElementById("repository-description") +const repositoryForks = document.getElementById("repository-forks") +const repositoryUpdated = document.getElementById("repository-updated") +const select = document.getElementById("select") + + +function main() { + function fetchData() { + fetch("https://api.github.com/orgs/HackYourFuture/repos?per_page=100") + .then(response1 => response1.json()) + .then((data) => { + data.map(element1 => { + let option = document.createElement("option") + select.appendChild(option) + option.value = element1.name + option.innerHTML = element1.name + }) + }) + .catch((error) => { + document.getElementById("errorMessage").style.padding = "14px"; + document.getElementById("errorMessage").innerHTML = error; + }) + } fetchData() + + + select.onchange = function getData() { + fetch(`https://api.github.com/repos/HackYourFuture/${select.value}`) + .then(respons2 => respons2.json()) + .then(result2 => { + repositoryName.innerText = result2.name + repositoryDescription.innerText = result2.description + repositoryForks.innerText = result2.forks + repositoryUpdated.innerText = result2.updated_at + }) + .catch((error) => { + console.log(error) + document.getElementById("errorMessage").style.padding = "14px"; + document.getElementById("errorMessage").innerHTML = error; + }) + } +} +main() + + + + diff --git a/hackyourrepo-app/style.css b/hackyourrepo-app/style.css index 5b3acae8a..a7626e133 100755 --- a/hackyourrepo-app/style.css +++ b/hackyourrepo-app/style.css @@ -1,3 +1,89 @@ /* Write here your CSS rules for HackYourRepo! */ +* +{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + font-family: 'Roboto', sans-serif; +} +#dropdown-menu{ + margin: 0 auto; + height: 55px; + width: calc(100vw - 30%); + background-color:#3f51b5;; +} +label { + position: absolute; + color:white; + padding: 16px; + font-size: 16px; +} +select{ + margin-top: 15px; + margin-left: 150px; + width: 162px; + height: 23px; + position: fixed; +} +.horisontal { + display: flex; + flex-direction: row; + justify-content: space-between; +} +#container { + width: calc(100vw - 30%); + margin: 0 auto; + display: flex; +} +#repository{ + width: 50%; + margin: 3px; + border: 1px solid lightgray; + padding: 20px; + line-height: 1.6; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.01); +} +p { + width: calc(70% ); +} +#contributors { + color:rgb(168, 168, 168); + margin: 3px; + border: 1px solid lightgray; + padding: 20px; + width: 50%; + height: 50px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.01); +} +#errorMessage { + margin: 0 auto; + color: rgb(78, 32, 32); + background-color: pink; + padding: 0px; + margin-top: 2px; + width: calc(100vw - 30%); + +} +@media screen and (max-width: 769px){ + #container { + display: block; + } + #repository { + width: calc(100vw - 44%); + + } + #contributors { + float: right; + width: 75%; + } + @media screen and (max-width: 480px){ + #contributors, #repository, #container, #dropdown-menu{ + width: 100%; + } + +} +} \ No newline at end of file From 0316092319d0e1a9a86f59f94911d22d84734ae0 Mon Sep 17 00:00:00 2001 From: Nizami Mursudlu Date: Tue, 12 Jan 2021 22:34:20 +0100 Subject: [PATCH 06/10] corrected error handling --- Week2/homework/pokemon-app/script.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/Week2/homework/pokemon-app/script.js b/Week2/homework/pokemon-app/script.js index 267eeeca3..eca6971f3 100644 --- a/Week2/homework/pokemon-app/script.js +++ b/Week2/homework/pokemon-app/script.js @@ -29,7 +29,13 @@ function main() { button.addEventListener('click', function fetchData() { fetch(url) - .then((res) => res.json()) + .then(res => { + if (res.ok) { + return res.json() + } else { + throw `ERROR: ${res.status} ${res.statusText}` + } + }) .then((jsonData) => { pokemonArr = jsonData.results pokemonArr.map((element) => { @@ -46,7 +52,13 @@ function main() { select.onchange = function addPokemonToDOM() { fetch(`https://pokeapi.co/api/v2/pokemon/${select.value}`) - .then(res1 => res1.json()) + .then(res1 => { + if (res1.ok) { + return res1.json() + } else { + throw `ERROR: ${res1.status} ${res1.statusText}` + } + }) .then(function (imageData) { div.appendChild(img) img.src = imageData.sprites.front_default From 7ef41da2337e65eb31dc083db3bc4ceb036c017c Mon Sep 17 00:00:00 2001 From: Nizami Mursudlu Date: Tue, 12 Jan 2021 22:40:52 +0100 Subject: [PATCH 07/10] project finished --- hackyourrepo-app/script.js | 146 ++++++++++++++++++++++++++++++++----- hackyourrepo-app/style.css | 58 +++++++++++++-- 2 files changed, 180 insertions(+), 24 deletions(-) diff --git a/hackyourrepo-app/script.js b/hackyourrepo-app/script.js index 8b3893e64..ec2e66ead 100755 --- a/hackyourrepo-app/script.js +++ b/hackyourrepo-app/script.js @@ -5,6 +5,8 @@ */ // writing html in js + + const divMenu = document.createElement("div"); document.body.appendChild(divMenu); divMenu.id = "dropdown-menu"; @@ -17,7 +19,7 @@ divMenu.appendChild(selectElement); selectElement.id = "select"; const optionElement = document.createElement("option"); -selectElement.appendChild(optionElement).innerHTML = "Chose repository..." +selectElement.appendChild(optionElement) optionElement.setAttribute("value", "''") const divError = document.createElement("div") @@ -38,8 +40,8 @@ divRepository.appendChild(divRepositoryName) divRepositoryName.classList.add("horisontal") const h4Name = document.createElement("h4") divRepositoryName.appendChild(h4Name).innerHTML = "Repository:" -const pName = document.createElement("p") -divRepositoryName.appendChild(pName).id = "repository-name" +const aName = document.createElement("a") +divRepositoryName.appendChild(aName).id = "repository-name" const divRepositoryDescription = document.createElement("div") divRepository.appendChild(divRepositoryDescription) @@ -65,26 +67,96 @@ divRepositoryUpdated.appendChild(h4Updated).innerHTML = "Updated:" const pUpdated = document.createElement("p") divRepositoryUpdated.appendChild(pUpdated).id = "repository-updated" +const divMainRight = document.createElement("div"); +divContainer.appendChild(divMainRight); +divMainRight.id = "main-right" + const divContributors = document.createElement("div") -divContainer.appendChild(divContributors) +divMainRight.appendChild(divContributors) divContributors.id = "contributors" const pContributors = document.createElement("p") divContributors.appendChild(pContributors).innerHTML = "Contributors" -const repository = document.getElementById("repository"); -const repositoryName = document.getElementById("repository-name"); -const repositoryDescription = document.getElementById("repository-description") -const repositoryForks = document.getElementById("repository-forks") -const repositoryUpdated = document.getElementById("repository-updated") -const select = document.getElementById("select") +function main() { + + const repositoryName = document.getElementById("repository-name") + const repositoryDescription = document.getElementById("repository-description") + const repositoryForks = document.getElementById("repository-forks") + const repositoryUpdated = document.getElementById("repository-updated") + const select = document.getElementById("select") + + + document.getElementById("select").innerText = "" + + + + + fetch("https://api.github.com/orgs/HackYourFuture/repos?per_page=100") + .then(response1 => { + if (response1.ok) { + return response1.json() + } else { + throw `ERROR: ${response1.status} ${response1.statusText}` + } + }) + .then((data0) => { + aName.setAttribute("href", `https://github.com/HackYourFuture/${data0[0].name}`) + repositoryName.innerHTML = data0[0].name + repositoryDescription.innerText = data0[0].description + repositoryForks.innerText = data0[0].forks + repositoryUpdated.innerText = data0[0].updated_at + return data0[0].contributors_url + }) + .then(newURL => { + fetch(newURL) + .then(response4 => { + if (response4.ok) { + return response4.json() + } else { + throw `ERROR: ${response1.status} ${response1.statusText}` + } + }) + .then(result0 => { + divMainRight.innerText = "" + result0.forEach(element0 => { + const infoDiv = document.createElement("div") + divMainRight.appendChild(infoDiv) + infoDiv.classList.add("info-div") + const avatar = document.createElement("img") + avatar.src = element0.avatar_url + avatar.style.width = "50px" + infoDiv.appendChild(avatar) + const aCont = document.createElement("a") + aCont.setAttribute("href", `https://github.com/${element0.login}`) + infoDiv.appendChild(aCont).innerText = element0.login + const divNum = document.createElement("div") + divNum.id = "div-num" + infoDiv.appendChild(divNum).innerText = element0.contributions + }) + }) + .catch((error) => { + document.getElementById("errorMessage").style.padding = "14px"; + document.getElementById("errorMessage").innerHTML = error; + }) + }) + .catch((error) => { + document.getElementById("errorMessage").style.padding = "14px"; + document.getElementById("errorMessage").innerHTML = error; + }) -function main() { function fetchData() { fetch("https://api.github.com/orgs/HackYourFuture/repos?per_page=100") - .then(response1 => response1.json()) + .then(response1 => { + if (response1.ok) { + return response1.json() + } else { + throw `ERROR: ${response1.status} ${response1.statusText}` + } + }) + .then((data) => { data.map(element1 => { let option = document.createElement("option") @@ -99,25 +171,65 @@ function main() { }) } fetchData() - select.onchange = function getData() { fetch(`https://api.github.com/repos/HackYourFuture/${select.value}`) - .then(respons2 => respons2.json()) + .then(response2 => { + if (response2.ok) { + return response2.json() + } else { + throw `ERROR: ${response2.status} ${response2.statusText}` + } + }) + + .then(result2 => { + aName.setAttribute("href", `https://github.com/HackYourFuture/${result2.name}`) repositoryName.innerText = result2.name repositoryDescription.innerText = result2.description repositoryForks.innerText = result2.forks repositoryUpdated.innerText = result2.updated_at + return result2.contributors_url + }) + .then(contributorsURL => { + fetch(contributorsURL) + .then(response3 => { + if (response3.ok) { + return response3.json() + } else { + throw `ERROR: ${response3.status} ${response3.statusText}` + } + }) + + .then(result3 => { + divMainRight.innerText = "" + result3.forEach(element3 => { + const infoDiv = document.createElement("div") + divMainRight.appendChild(infoDiv) + infoDiv.classList.add("info-div") + const avatar = document.createElement("img") + avatar.src = element3.avatar_url + avatar.style.width = "50px" + infoDiv.appendChild(avatar) + const aCont = document.createElement("a") + aCont.setAttribute("href", `https://github.com/${element3.login}`) + infoDiv.appendChild(aCont).innerText = element3.login + const divNum = document.createElement("div") + divNum.id = "div-num" + infoDiv.appendChild(divNum).innerText = element3.contributions + }); + }) + .catch((error) => { + document.getElementById("errorMessage").style.padding = "14px"; + document.getElementById("errorMessage").innerHTML = error; + }) }) .catch((error) => { - console.log(error) document.getElementById("errorMessage").style.padding = "14px"; document.getElementById("errorMessage").innerHTML = error; }) } } -main() - +main() diff --git a/hackyourrepo-app/style.css b/hackyourrepo-app/style.css index a7626e133..68fab46b7 100755 --- a/hackyourrepo-app/style.css +++ b/hackyourrepo-app/style.css @@ -38,24 +38,27 @@ select{ width: calc(100vw - 30%); margin: 0 auto; display: flex; + font-size: 16px; } #repository{ width: 50%; + height: 20%; margin: 3px; border: 1px solid lightgray; padding: 20px; line-height: 1.6; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.01); } -p { - width: calc(70% ); +a, p { + width: calc(65% ); } #contributors { + display: flex; + flex-direction: column; color:rgb(168, 168, 168); - margin: 3px; border: 1px solid lightgray; padding: 20px; - width: 50%; + width: 100%; height: 50px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.01); } @@ -66,8 +69,48 @@ p { padding: 0px; margin-top: 2px; width: calc(100vw - 30%); - + +} + +ul { + list-style: none; } + +.info-div{ + height: 90px; + width: 100%; + display: flex; + flex-direction: column; + + display:flex; + flex-direction: row; + align-items: center; + border: 1px solid lightgray; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.01); +} +#main-right { + display: flex; + flex-direction: column; + width: 50%; +} +.info-div img { + margin-left: 20px; + margin-right: 20px; +} + +#div-num { + background-color: rgb(173, 173, 173); + height: 30px; + width: 60px; + border-radius: 4px; + margin-right: 20px; + color: white; + font-size: 18px; + display: flex; + align-items: center; + justify-content: space-evenly; +} + @media screen and (max-width: 769px){ #container { display: block; @@ -76,12 +119,13 @@ p { width: calc(100vw - 44%); } - #contributors { + #main-right { float: right; width: 75%; } + @media screen and (max-width: 480px){ - #contributors, #repository, #container, #dropdown-menu{ + #test, #repository, #container, #dropdown-menu{ width: 100%; } From d0f1e43cbdae5a0375cdfadfc3e1f42e574c4022 Mon Sep 17 00:00:00 2001 From: Nizami Mursudlu Date: Wed, 13 Jan 2021 23:02:44 +0100 Subject: [PATCH 08/10] correted ex01 and ex02 after Jasper's feedback --- Week2/homework/exercise01.js | 5 +++-- Week2/homework/exersice02.js | 13 +++++++------ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/Week2/homework/exercise01.js b/Week2/homework/exercise01.js index 1cd6c8f8e..2ad588de3 100644 --- a/Week2/homework/exercise01.js +++ b/Week2/homework/exercise01.js @@ -23,11 +23,12 @@ function getAnonName(firstName) { setTimeout(() => { if (firstName) { const fullName = `${firstName} Doe`; - resolve(console.log(fullName)) + return resolve(fullName) } else { reject(console.log("You didn't pass in a first name!")) } }, 2000) }) } -getAnonName("John") \ No newline at end of file +getAnonName("John") + .then(res => console.log(res)) diff --git a/Week2/homework/exersice02.js b/Week2/homework/exersice02.js index 232804f5f..9f89c2eb0 100644 --- a/Week2/homework/exersice02.js +++ b/Week2/homework/exersice02.js @@ -12,13 +12,14 @@ function checkDoubleDigits(number) { return new Promise((resolve, reject) => { if (number > 10) { - resolve(console.log("The number is bigger than 10!")) + resolve("The number is bigger than 10!") } else if (number < 10) { - reject(console.log("Error! The number is smaller than 10...")) + reject("Error! The number is smaller than 10...") } }) - .catch((error) => { - console.log(error); - }) + } -checkDoubleDigits(11) +checkDoubleDigits(8).then((res) => console.log(res)) + .catch((error) => { + console.log(error); + }) From af19f22f9e30333c7be0300c142854553169e7e0 Mon Sep 17 00:00:00 2001 From: Nizami Mursudlu Date: Sun, 17 Jan 2021 11:18:18 +0100 Subject: [PATCH 09/10] deleted console ex01 after Jaspers corrections --- Week2/homework/exercise01.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Week2/homework/exercise01.js b/Week2/homework/exercise01.js index 2ad588de3..7f4542918 100644 --- a/Week2/homework/exercise01.js +++ b/Week2/homework/exercise01.js @@ -32,3 +32,7 @@ function getAnonName(firstName) { } getAnonName("John") .then(res => console.log(res)) + .catch((error) => { + console.log(error); + }) + From 6337e89b83d8217f6d848b931c22571f81748335 Mon Sep 17 00:00:00 2001 From: Nizami Mursudlu Date: Sun, 17 Jan 2021 17:12:49 +0100 Subject: [PATCH 10/10] corrected afterd Jasper's feedback --- Week2/homework/exercise01.js | 2 +- Week2/homework/pokemon-app/script.js | 24 ++++++++++-------------- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/Week2/homework/exercise01.js b/Week2/homework/exercise01.js index 7f4542918..6bb910f7b 100644 --- a/Week2/homework/exercise01.js +++ b/Week2/homework/exercise01.js @@ -25,7 +25,7 @@ function getAnonName(firstName) { const fullName = `${firstName} Doe`; return resolve(fullName) } else { - reject(console.log("You didn't pass in a first name!")) + reject("You didn't pass in a first name!") } }, 2000) }) diff --git a/Week2/homework/pokemon-app/script.js b/Week2/homework/pokemon-app/script.js index eca6971f3..736f0e861 100644 --- a/Week2/homework/pokemon-app/script.js +++ b/Week2/homework/pokemon-app/script.js @@ -29,14 +29,11 @@ function main() { button.addEventListener('click', function fetchData() { fetch(url) - .then(res => { - if (res.ok) { - return res.json() - } else { + .then(async (res) => { + if (!res.ok) { throw `ERROR: ${res.status} ${res.statusText}` } - }) - .then((jsonData) => { + const jsonData = await res.json() pokemonArr = jsonData.results pokemonArr.map((element) => { let option = document.createElement("option") @@ -52,20 +49,19 @@ function main() { select.onchange = function addPokemonToDOM() { fetch(`https://pokeapi.co/api/v2/pokemon/${select.value}`) - .then(res1 => { - if (res1.ok) { - return res1.json() - } else { + .then(async (res1) => { + if (!res1.ok) { throw `ERROR: ${res1.status} ${res1.statusText}` } - }) - .then(function (imageData) { + const imageData = await res1.json() + const image = imageData.sprites.front_default div.appendChild(img) - img.src = imageData.sprites.front_default + img.src = image }) .catch((error) => { console.log(error); - }) + } + ) } } main()