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

week8 H.W is done #1013

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

week8 H.W is done #1013

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
2 changes: 2 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,8 @@ The following endpoint is publicly available from Github

<!-- Write your answer here -->

an API returns data in one of two possible formats: Extensible Markup Language (XML) and JavaScript Object Notation (JSON).

2. What would you put in the following fields? `{owner}`, `{repo}`, `{pull_number}`?

<!-- Write your answer here -->
15 changes: 8 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,11 @@ 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").textContent = greeting;
Copy link

Choose a reason for hiding this comment

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

perfect !

// Write the code to display the greeting text here
});
48 changes: 24 additions & 24 deletions week-8/Homework/mandatory/2-fetch-exercise/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
<!doctype html>
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>CodeYourFuture - Fetch</title>
<meta name="description" content="Introduction to Fetch">
<meta name="author" content="CodeYourFuture">
<style>
#greeting-text {
font-size: 20px;
border: 1px solid #ccc;
background-color: #ddd;
width: 20%;
text-align: center;
margin: 0 50px;
padding: 30px;
}
</style>
</head>
<head>
<meta charset="utf-8" />
<title>CodeYourFuture - Fetch</title>
<meta name="description" content="Introduction to Fetch" />
<meta name="author" content="CodeYourFuture" />
<style>
#greeting-text {
font-size: 20px;
border: 1px solid #ccc;
background-color: #ddd;
width: 20%;
text-align: center;
margin: 0 50px;
padding: 30px;
}
</style>
</head>

<body>
<h1>A greeting in a random language...</h1>
<p id="greeting-text"></p>
<body>
<h1>A greeting in a random language...</h1>
<p id="greeting-text"></p>

<script src="exercise.js"></script>
</body>
</html>
<script src="exercise.js"></script>
</body>
</html>
131 changes: 131 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,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>a randomized dog photo gallery!</title>
</head>
<body>
<div class="header">
<h1>Random Dog Image Generator!</h1>
</div>
<div class="container">
<ul class="images">
<li id="dog-img1">
<p>Placeholder Image</p>
</li>
<li id="dog-img2">
<p>Placeholder Image</p>
</li>
</ul>

<div class="buttons">
<button id="btn1-dog">Random1 DOG!</button>
<button id="btn2-dog">Random2 DOG!</button>
</div>
</div>
<style>
@import url("https://fonts.googleapis.com/css?family=Cute+Font&display=swap");

* {
box-sizing: border-box;
}
body {
background-color: #9c2e5873;
margin: 0;
font-family: "Cute Font", cursive;
font-size: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
color: #fff;
letter-spacing: 1px;
text-align: center;
}

.header {
margin-top: 10px;
}

.container {
background-color: #53119e;
/* width: 70vw; */
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border-radius: 10px;
box-shadow: 8px 8px 8px #114d99, -8px -8px 8px #114d99,
8px -8px 8px #114d99, -8px 8px 8px #114d99;
}

.images,
.buttons {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
}

#dog-img1,
#dog-img2 {
background-color: #fff;
margin: 10px;
width: 300px;
height: 300px;
border-radius: 15px;
}

#dog-img1 img,
#dog-img2 img {
object-fit: cover;
height: 100%;
width: 100%;
border-radius: 15px;
}

#btn1-dog,
#btn2-dog {
margin: 10px;
padding: 2px 12px;
border-radius: 5px;
outline: none;
font-family: inherit;
font-size: 36px;
font-weight: 600;
color: #fff;
background-color: #114d99;
}

#btn1-dog:hover,
#btn2-dog:hover {
background-color: #ea9306;
transform: scale(1.2);
}

#btn1-dog:active,
#btn2-dog:active {
transform: scale(0.9);
}

@media only screen and (max-width: 590px) {
.header {
font-size: 20px;
}
#dog-img1,
#dog-img2 {
background-color: #fff;
width: 200px;
height: 200px;
}
}
</style>
<script src="script.js"></script>
</body>
</html>
47 changes: 47 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,47 @@
// var button = document.createElement("button");
// button.innerHTML = "click for a random dog photo";

// // 2. Append somewhere
// var body = document.getElementsByTagName("body");
// body.appendChild(button);

// //3. Add event handler
// var cont = document.getElementById("container");
// var ul = document.createElement("ul");
// var li = document.createElement("li");
// ul.appendChild(li);
// cont.appendChild(ul);

// button.addEventListener("click", function () {
// fetch("https://dog.ceo/api/breeds/image/random");

// .then((response) => response.json())
// .then((data) =>
// return (li.innerHTML = `< img src = "${data.file}" />`);
// });

const dogImage1 = document.getElementById("dog-img1");
const dogButton1 = document.getElementById("btn1-dog");
const dogButton2 = document.getElementById("btn2-dog");
const dogImage2 = document.getElementById("dog-img2");

dogButton1.addEventListener("click", fetchDogImage1);
dogButton2.addEventListener("click", fetchDogImage2);

function fetchDogImage1() {
fetch("https://dog.ceo/api/breeds/image/random")
.then((response) => response.json())
.then((data) => {
dogImage1.innerHTML = `<img src="${data.message}"/>`;
Copy link

Choose a reason for hiding this comment

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

excellent !

});
//.catch ((error) => Alert("there is an error"));
}

function fetchDogImage2() {
fetch("https://dog.ceo/api/breeds/image/random")
.then((response) => response.json())
.then((data) => {
dogImage2.innerHTML = `<img src="${data.message}"/>`;
});
// .catch ((error) => Alert("there is an error"));
}
Empty file added week-8/Homework/mandatory/3-dog-photo-gallery/style.css
View file
Open in desktop
Empty file.
15 changes: 15 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,15 @@
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>CodeYourFuture - programmer-humour</title>
<meta name="description" content="Introduction to Fetch" />
<meta name="author" content="CodeYourFuture" />
</head>

<body>
<img id="image" />
<script src="script.js"></script>
</body>
</html>
8 changes: 8 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,8 @@
fetch(`https://xkcd.now.sh/?comic=latest`)
.then((response) => response.json())
.then((response) => {
Copy link

Choose a reason for hiding this comment

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

you need to add some error handling

document.getElementById("image").src = response.img;
});
.catch ((error) => console.log(error));
// .catch((error)=> alert (error));

Empty file added week-8/Homework/mandatory/4-programmer-humour/style.css
View file
Open in desktop
Empty file.