Skip to content
This repository was archived by the owner on Aug 5, 2021. It is now read-only.

Ali haider js core3 week 2 #37

Open
wants to merge 6 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
10 changes: 10 additions & 0 deletions week-2/Homework/mandatory/1-practice/1-practice.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ You can ignore anything to do with `XMLHttpRequest`

- [FreeCodeCamp](https://www.freecodecamp.org/news/a-practical-es6-guide-on-how-to-perform-http-requests-using-the-fetch-api-594c3d91a547/)

read the article.

## Code along

Now that you've learned about APIs and how to connect with them, let's apply it in the context of a complete application.
Expand All @@ -16,6 +18,8 @@ Enjoy!

- [Vanilla JS Numbers Facts App - AJAX & Fetch](https://www.youtube.com/watch?v=tUE2Nic21BA)

watched the video.

## Question

The following endpoint is publicly available from Github
Expand All @@ -25,7 +29,13 @@ The following endpoint is publicly available from Github
1. What would you put in the following fields? `{owner}`, `{repo}`, `{pull_number}`?

<!-- Write your answer here -->
we can put the github username of user in `{owner}` .
we can put the github repository name which that user created in `{repo}` .
we can put the pull number of that repository in `{pull_number}` .



2. Describe in a sentence what this API endpoint returns when all of the fields are completed?

<!-- Write your answer here -->
When all of the fields are completed it will Lists all review comments for a pull request.
12 changes: 9 additions & 3 deletions week-2/Homework/mandatory/2-fetch-exercise/exercise.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,16 @@ Open index.html in your browser. Every time you refresh the page,
a different greeting should be displayed in the box.
*/

fetch('*** Write the API address here ***')
fetch("https://codeyourfuture.herokuapp.com/api/greetings")
.then(function(response) {
return response.text();
})
.then(function(greeting) {
.then(function(data) {
// Write the code to display the greeting text here
});
// console.log(data);
let greeting = document.getElementById("greeting-text");
greeting.textContent = data;
})
.catch(function (error) {
console.log(error);
})
24 changes: 24 additions & 0 deletions week-2/Homework/mandatory/3-dog-photo-gallery/exercise.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@

let getButton = document.querySelector("button");
getButton.addEventListener("click", function () {
fetch("https://dog.ceo/api/breeds/image/random")
.then(function (response) {
return response.json();
})



.then(function (data) {
let newImage = document.createElement("img");
newImage.src = data.message;
newImage.style.width = "150px";
newImage.style.height = "150px";
let ul = document.querySelector("ul");
ul.append(newImage);
})
.catch(function (error) {
console.log(error);
})
})


20 changes: 20 additions & 0 deletions week-2/Homework/mandatory/3-dog-photo-gallery/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!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>

<ul id="newImage" >

<img />
</ul>

<button>Generate New Dog Image</button>


<script src="exercise.js"></script>
</body>
</html>
17 changes: 17 additions & 0 deletions week-2/Homework/mandatory/4-programmer-humour/exercise.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@

fetch("https://xkcd.now.sh/?comic=latest")
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
let newImage = document.createElement("img");
newImage.src = data.img;
document.body.append(newImage);
})
.catch(function (error) {
console.log(error);
})



18 changes: 18 additions & 0 deletions week-2/Homework/mandatory/4-programmer-humour/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!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>



<img />



<script src="exercise.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions week-2/Homework/mandatory/5-project/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,8 @@ This could include

## Project Details

completed till level 400
https://github.com/AliHaider-1/tv-show-dom-project
https://cyf-alihaider-1-cyf.netlify.app/

All of the details for this project can be found [here](https://syllabus.codeyourfuture.io/js-core-3/tv-show-dom-project/readme)