Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Nizami week2 #435

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Week1/MAKEME.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
3 changes: 3 additions & 0 deletions Week2/homework/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
38 changes: 38 additions & 0 deletions Week2/homework/exercise01.js
Original file line number Diff line number Diff line change
@@ -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);
})

25 changes: 25 additions & 0 deletions Week2/homework/exersice02.js
Original file line number Diff line number Diff line change
@@ -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);
})
3 changes: 3 additions & 0 deletions Week2/homework/pokemon-app/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
16 changes: 16 additions & 0 deletions Week2/homework/pokemon-app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

<script src="script.js"></script>

</body>

</html>
68 changes: 68 additions & 0 deletions Week2/homework/pokemon-app/script.js
Original file line number Diff line number Diff line change
@@ -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()


Loading