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

Skip to content

Commit 74de279

Browse files
Stef-LevStef-Lev
committed
Merge branch 'master' of https://github.com/Stef-Lev/JavaScript3
Wrong files in previous commit
2 parents c481a83 + 30cdb79 commit 74de279

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+2982
-2982
lines changed

‎Week1/Homework/codeAlong/number-facts/app.js

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
"use strict"
2-
3-
let fact = document.querySelector("#fact");
4-
let factText = document.querySelector("#factText");
5-
6-
let numberInput = document.querySelector("#numberInput");
7-
numberInput.addEventListener("input", getFact)
8-
9-
function getFact() {
10-
let number = numberInput.value;
11-
fetch("http://numbersapi.com/" + number)
12-
.then(response => response.text())
13-
.then(data => {
14-
if (number != "") {
15-
console.log(numberInput.value)
16-
fact.style.display = "block";
17-
factText.innerHTML = data;
18-
19-
}
20-
})
21-
.catch(err => console.log(err))
1+
"use strict"
2+
3+
let fact = document.querySelector("#fact");
4+
let factText = document.querySelector("#factText");
5+
6+
let numberInput = document.querySelector("#numberInput");
7+
numberInput.addEventListener("input", getFact)
8+
9+
function getFact() {
10+
let number = numberInput.value;
11+
fetch("http://numbersapi.com/" + number)
12+
.then(response => response.text())
13+
.then(data => {
14+
if (number != "") {
15+
console.log(numberInput.value)
16+
fact.style.display = "block";
17+
factText.innerHTML = data;
18+
19+
}
20+
})
21+
.catch(err => console.log(err))
2222
}

‎Week1/Homework/codeAlong/number-facts/index.html

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
1-
<!doctype html>
2-
<html lang="en">
3-
4-
<head>
5-
<!-- Required meta tags -->
6-
<meta charset="utf-8">
7-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8-
9-
<!-- Bootstrap CSS -->
10-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
11-
<link rel="stylesheet" href="style.css">
12-
13-
<title>Hello, world!</title>
14-
</head>
15-
16-
<body>
17-
<div class="container">
18-
<div class="row">
19-
<div class="col-md-6 mx-auto">
20-
<div class="card text-white mt-5 p-4">
21-
<h1>Number facts</h1>
22-
<p>Enter a number and get a random fact</p>
23-
<input type="number" class="form-control form-control-lg" id="numberInput" placeholder="Enter any number...">
24-
<div id="fact" class="card-body">
25-
<h4 class="card-title">
26-
<p id="factText" class="card-text"></p>
27-
</h4>
28-
</div>
29-
</div>
30-
</div>
31-
</div>
32-
33-
</div>
34-
35-
<!-- Optional JavaScript -->
36-
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
37-
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
38-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
39-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
40-
<script src="app.js"></script>
41-
</body>
42-
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
9+
<!-- Bootstrap CSS -->
10+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
11+
<link rel="stylesheet" href="style.css">
12+
13+
<title>Hello, world!</title>
14+
</head>
15+
16+
<body>
17+
<div class="container">
18+
<div class="row">
19+
<div class="col-md-6 mx-auto">
20+
<div class="card text-white mt-5 p-4">
21+
<h1>Number facts</h1>
22+
<p>Enter a number and get a random fact</p>
23+
<input type="number" class="form-control form-control-lg" id="numberInput" placeholder="Enter any number...">
24+
<div id="fact" class="card-body">
25+
<h4 class="card-title">
26+
<p id="factText" class="card-text"></p>
27+
</h4>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
33+
</div>
34+
35+
<!-- Optional JavaScript -->
36+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
37+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
38+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
39+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
40+
<script src="app.js"></script>
41+
</body>
42+
4343
</html>

‎Week1/Homework/codeAlong/number-facts/style.css

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
body {
2-
background-color: rgb(19, 16, 16);
3-
}
4-
5-
div.card {
6-
background-color: rgb(4, 98, 141);
7-
}
8-
9-
#fact {
10-
display: none;
1+
body {
2+
background-color: rgb(19, 16, 16);
3+
}
4+
5+
div.card {
6+
background-color: rgb(4, 98, 141);
7+
}
8+
9+
#fact {
10+
display: none;
1111
}

‎Week1/Homework/js-exercises/dogPhotoGallery/dogPhoto.js

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
1-
"use strict"
2-
const xmlButton = document.querySelector("#xml");
3-
const axButton = document.querySelector("#axios");
4-
const ul = document.querySelector("ul");
5-
6-
7-
const xml = new XMLHttpRequest();
8-
let xmData;
9-
let axData;
10-
let newLi;
11-
let newImg;
12-
13-
14-
function requestXML() {
15-
xml.onreadystatechange = () => {
16-
if (xml.readyState === 4 && xml.status === 200) {
17-
xmData = JSON.parse(xml.response);
18-
console.log(xml.response);
19-
newLi = document.createElement("li");
20-
newImg = document.createElement("img");
21-
newImg.src = xmData.message;
22-
newLi.appendChild(newImg);
23-
ul.appendChild(newLi);
24-
25-
} else {
26-
err => console.log(err)
27-
}
28-
}
29-
30-
xml.open("GET", "https://dog.ceo/api/breeds/image/random", true);
31-
xml.send();
32-
}
33-
xmlButton.addEventListener("click", requestXML);
34-
35-
function requestAxios() {
36-
axios
37-
.get("https://dog.ceo/api/breeds/image/random")
38-
.then(resp => {
39-
console.log(resp);
40-
axData = resp.data.message;
41-
newLi = document.createElement("li");
42-
newImg = document.createElement("img");
43-
newImg.src = axData;
44-
newLi.appendChild(newImg);
45-
ul.appendChild(newLi);
46-
47-
})
48-
.catch(err => console.log(err))
49-
}
1+
"use strict"
2+
const xmlButton = document.querySelector("#xml");
3+
const axButton = document.querySelector("#axios");
4+
const ul = document.querySelector("ul");
5+
6+
7+
const xml = new XMLHttpRequest();
8+
let xmData;
9+
let axData;
10+
let newLi;
11+
let newImg;
12+
13+
14+
function requestXML() {
15+
xml.onreadystatechange = () => {
16+
if (xml.readyState === 4 && xml.status === 200) {
17+
xmData = JSON.parse(xml.response);
18+
console.log(xml.response);
19+
newLi = document.createElement("li");
20+
newImg = document.createElement("img");
21+
newImg.src = xmData.message;
22+
newLi.appendChild(newImg);
23+
ul.appendChild(newLi);
24+
25+
} else {
26+
err => console.log(err)
27+
}
28+
}
29+
30+
xml.open("GET", "https://dog.ceo/api/breeds/image/random", true);
31+
xml.send();
32+
}
33+
xmlButton.addEventListener("click", requestXML);
34+
35+
function requestAxios() {
36+
axios
37+
.get("https://dog.ceo/api/breeds/image/random")
38+
.then(resp => {
39+
console.log(resp);
40+
axData = resp.data.message;
41+
newLi = document.createElement("li");
42+
newImg = document.createElement("img");
43+
newImg.src = axData;
44+
newLi.appendChild(newImg);
45+
ul.appendChild(newLi);
46+
47+
})
48+
.catch(err => console.log(err))
49+
}
5050
axButton.addEventListener("click", requestAxios)

‎Week1/Homework/js-exercises/dogPhotoGallery/index.html

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Dog Gallery</title>
8-
</head>
9-
10-
<body>
11-
<button id="xml">XML</button>
12-
<button id="axios">AXIOS</button>
13-
<div>
14-
<ul>
15-
16-
</ul>
17-
18-
</div>
19-
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
20-
<script src="dogPhoto.js"></script>
21-
</body>
22-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Dog Gallery</title>
8+
</head>
9+
10+
<body>
11+
<button id="xml">XML</button>
12+
<button id="axios">AXIOS</button>
13+
<div>
14+
<ul>
15+
16+
</ul>
17+
18+
</div>
19+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
20+
<script src="dogPhoto.js"></script>
21+
</body>
22+
2323
</html>

‎Week1/Homework/js-exercises/programmerHumor/progHumor.html

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>progHumor</title>
8-
</head>
9-
10-
<body>
11-
<button id="xml">XML</button>
12-
<button id="axios">AXIOS</button>
13-
<br>
14-
<img src="" id="cat-image" width="500px" style="border: 2px solid grey; border-radius: 10px; margin: 20px;">
15-
16-
17-
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
18-
<script src="progHumor.js"></script>
19-
</body>
20-
21-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>progHumor</title>
8+
</head>
9+
10+
<body>
11+
<button id="xml">XML</button>
12+
<button id="axios">AXIOS</button>
13+
<br>
14+
<img src="" id="cat-image" width="500px" style="border: 2px solid grey; border-radius: 10px; margin: 20px;">
15+
16+
17+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
18+
<script src="progHumor.js"></script>
19+
</body>
20+
21+
2222
</html>

0 commit comments

Comments
 (0)