Skip to content
This repository has been archived by the owner on Oct 26, 2020. It is now read-only.

Leidas week 8 homework #1005

Open
wants to merge 1 commit into
base: manchester3
Choose a base branch
from
Open

Leidas week 8 homework #1005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 6 additions & 0 deletions week-8/Homework/mandatory/1-practice/1-practice.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ The following endpoint is publicly available from Github

<!-- Write your answer here -->

{owner} - github username
{repo} - repository name
{pull_number} - pull request number

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

<!-- Write your answer here -->

It should return all the comments on that specified pull request made on that repo by that owner.
72 changes: 72 additions & 0 deletions week-8/Homework/mandatory/1-practice/numbersFact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
#fact {
display: none;
}
</style>
<title>Number Facts</title>
</head>
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card bg-primary text-white mt-5 p-4">
<h1>Number Facts</h1>
<p>Enter a number and get a random fact</p>
<input
type="number"
class="form-control form-control-lg"
id="numberInput"
placeholder="Enter any number..."
/>
<div id="fact" class="card-body">
<h4 class="card-title">
Number Fact
</h4>
<p id="factText" class="cardText"></p>
</div>
</div>
</div>
</div>
</div>
<script>
let fact = document.querySelector("#fact");
let factText = document.querySelector("#factText");
let numberInput = document.querySelector("#numberInput");
numberInput.addEventListener("input", getFactFetch);

// function getFactAjax() {
// let number = numberInput.value;
// let xhr = new XMLHttpRequest();
// xhr.open("GET", "http://numberapi.com/" + number);
// xhr.onload = function () {
// if (this.status == 200 && number != "") fact.style.display = "block";
// factText.innerText = this.responseText;
// };
// xhr.send();
// }
function getFactFetch() {
let number = numberInput.value;
fetch("http://numberapi.com/" + number)
.then((response) => response.text())
.then((data) => {
if (number != "") {
fact.style.display = "block";
fact.innerText = data;
}
})
.catch((error) => console.log(error));
}
</script>
</body>
</html>
17 changes: 10 additions & 7 deletions week-8/Homework/mandatory/2-fetch-exercise/exercise.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,13 @@ 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 ***')
.then(function(response) {
return response.text();
})
.then(function(greeting) {
// Write the code to display the greeting text here
});
fetch("https://codeyourfuture.herokuapp.com/api/greetings")
.then(function (response) {
return response.text();
})
.then(function (greeting) {
document.getElementById("greeting-text").innerText = greeting;
})
.catch((error) => {
console.error(error);
});
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done Leida.

32 changes: 32 additions & 0 deletions week-8/Homework/mandatory/3-dog-photo-gallery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style>
body {
background-color: aquamarine;
}
ul {
list-style: none;
}
#getImage {
width: 150px;
height: 40px;
margin-bottom: 50px;
}
</style>
<title>Dog Images Gallery</title>
</head>
<body>
<h3>
Hit the gray generate button and you will get a new dog image.
</h3>
<button id="getImage">generate</button>
<div id="container">
<ul id="dogList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
23 changes: 23 additions & 0 deletions week-8/Homework/mandatory/3-dog-photo-gallery/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
const dogList = document.getElementById("dogList");
const api_url = "https://dog.ceo/api/breeds/image/random";

const button = document.getElementById("getImage");
button.addEventListener("click", getRandomDog);

function getRandomDog() {
fetch(api_url)
.then((response) => response.json())
.then((dog) => {
console.log(dog);
const li = document.createElement("li");
const img = document.createElement("img");
img.classList.add("dogImages");
img.src = dog.message;
li.appendChild(img);
dogList.appendChild(li);
})
.catch((error) => {
console.log("error!!!");
console.error(error);
});
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Job Leida, you forgot to implement error handling code at the fetched data. Implement that.

16 changes: 16 additions & 0 deletions week-8/Homework/mandatory/4-programmer-humour/index.html
View file
Open in desktop
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" />
<link rel="stylesheet" href="style.css" />
<title>Programmer Jokes</title>
</head>
<body>
<div id="container">
<h2 id="jokeTitle"></h2>
<img id="joke" src="" alt="" />
</div>
<script src="script.js"></script>
</body>
</html>
20 changes: 20 additions & 0 deletions week-8/Homework/mandatory/4-programmer-humour/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
const api_url = "https://xkcd.now.sh/?comic=latest";

let jokeImage = document.getElementById("joke");
let jokeTitle = document.getElementById("jokeTitle");

function getJoke() {
fetch(api_url)
.then((response) => response.json())
.then((joke) => {
console.log(joke);
jokeTitle.innerText = joke.title;
jokeImage.src = joke.img;
jokeImage.alt = joke.alt;
})
.catch((error) => {
console.log("error!!!");
console.error(error);
});
}
getJoke();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function is correct, calling the function at line 20 is not appropriate. what you could do separate the fetching and the getJoke then call getJoke in the .then() or the easiest way apply the innerText in the .then() . Work on that.

7 changes: 7 additions & 0 deletions week-8/Homework/mandatory/4-programmer-humour/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
#container {
text-align: center;
}
img {
display: block;
margin: 0 auto;
}