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. 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..6bb910f7b --- /dev/null +++ b/Week2/homework/exercise01.js @@ -0,0 +1,38 @@ +// 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`; + return resolve(fullName) + } else { + reject("You didn't pass in a first name!") + } + }, 2000) + }) +} +getAnonName("John") + .then(res => console.log(res)) + .catch((error) => { + console.log(error); + }) + diff --git a/Week2/homework/exersice02.js b/Week2/homework/exersice02.js new file mode 100644 index 000000000..9f89c2eb0 --- /dev/null +++ b/Week2/homework/exersice02.js @@ -0,0 +1,25 @@ +// 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("The number is bigger than 10!") + } else if (number < 10) { + reject("Error! The number is smaller than 10...") + } + }) + +} +checkDoubleDigits(8).then((res) => console.log(res)) + .catch((error) => { + console.log(error); + }) 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 new file mode 100644 index 000000000..ded69cf75 --- /dev/null +++ b/Week2/homework/pokemon-app/index.html @@ -0,0 +1,16 @@ + + + + + + + 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..736f0e861 --- /dev/null +++ b/Week2/homework/pokemon-app/script.js @@ -0,0 +1,68 @@ + +function main() { + + + 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"; + + const divElement = document.createElement("div"); + document.body.appendChild(divElement); + divElement.id = "div"; + + + 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 fetchData() { + fetch(url) + .then(async (res) => { + if (!res.ok) { + throw `ERROR: ${res.status} ${res.statusText}` + } + const jsonData = await res.json() + pokemonArr = jsonData.results + pokemonArr.map((element) => { + let option = document.createElement("option") + select.appendChild(option) + option.value = element.name + option.innerHTML = element.name + }) + }) + .catch((error) => { + console.log(error); + }) + }) + + select.onchange = function addPokemonToDOM() { + fetch(`https://pokeapi.co/api/v2/pokemon/${select.value}`) + .then(async (res1) => { + if (!res1.ok) { + throw `ERROR: ${res1.status} ${res1.statusText}` + } + const imageData = await res1.json() + const image = imageData.sprites.front_default + div.appendChild(img) + img.src = image + }) + .catch((error) => { + console.log(error); + } + ) + } +} main() + + diff --git a/hackyourrepo-app/script.js b/hackyourrepo-app/script.js index a2206d1ed..ec2e66ead 100755 --- a/hackyourrepo-app/script.js +++ b/hackyourrepo-app/script.js @@ -3,3 +3,233 @@ /* 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) +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 aName = document.createElement("a") +divRepositoryName.appendChild(aName).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 divMainRight = document.createElement("div"); +divContainer.appendChild(divMainRight); +divMainRight.id = "main-right" + +const divContributors = document.createElement("div") +divMainRight.appendChild(divContributors) +divContributors.id = "contributors" +const pContributors = document.createElement("p") +divContributors.appendChild(pContributors).innerHTML = "Contributors" + + + +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 fetchData() { + 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((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(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) => { + 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..68fab46b7 100755 --- a/hackyourrepo-app/style.css +++ b/hackyourrepo-app/style.css @@ -1,3 +1,133 @@ /* 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; + 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); +} +a, p { + width: calc(65% ); +} +#contributors { + display: flex; + flex-direction: column; + color:rgb(168, 168, 168); + border: 1px solid lightgray; + padding: 20px; + 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); +} +#errorMessage { + margin: 0 auto; + color: rgb(78, 32, 32); + background-color: pink; + 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; + } + #repository { + width: calc(100vw - 44%); + + } + #main-right { + float: right; + width: 75%; + } + + @media screen and (max-width: 480px){ + #test, #repository, #container, #dropdown-menu{ + width: 100%; + } + +} +} \ No newline at end of file