Skip to content

Commit b03fbaa

Browse files
remarcmijremarcmij
committed
Rewriting text
1 parent ac39409 commit b03fbaa

37 files changed

+993
-6
lines changed

‎.eslintrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"strict": "off",
1818
"no-plusplus": "off",
1919
"linebreak-style": "off",
20+
"no-restricted-syntax": "off",
2021
"no-param-reassign": [
2122
"error",
2223
{

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
"editor.detectIndentation": false,
66
"editor.tabSize": 2,
77
"cSpell.words": [
8+
"READYSTATE",
9+
"Traversy",
10+
"ajaxcrash",
811
"networkidle",
912
"remarcmij",
1013
"tabindex",

‎Week1/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ Here are resources that we like you to read as a preparation for the first lectu
1818
- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work
1919
- Traversy Media (YouTube, 18 mins): [What Is A RESTful API? Explanation of REST & HTTP](https://youtu.be/Q-BpqyOT3a8).
2020

21-
### XMLHttpRequests
21+
### AJAX & XMLHttpRequests
2222

23+
- Watch the [Ajax Crash Course](./ajaxcrash) (45 mins) from Traversy Media.
2324
- [Making HTTP Requests in JavaScript](https://www.kirupa.com/html5/making_http_requests_js.htm)
2425

2526
### Clean Code

‎Week1/traversy_ajax_crash/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# AJAX Crash Course
2+
3+
Please watch the first 45 mins of the Ajax Crash Course by Traversy Media (see link below).
4+
5+
The example code in this course is using on ES5 syntax. In the **ajaxcrash** folder in this repo you will find updated example code (**ajax1** to **ajax3**) that use the ES6 syntax and styling that we prefer in HYF. Specifically, the following changes have been made:
6+
7+
1. The JavaScript code has been placed in a separate file, loaded with a `<script>` tag from the HTML file.
8+
2. Instead of **var** to declare a variable, **const** and **let** are used.
9+
3. The non-strict equality operator `==` has been replaced with the strict version `===`.
10+
4. Functions are defined before they are used.
11+
5. Anonymous functions use the arrow syntax instead of the **function** keyword. Consequently, the `this` value inside the **XMLHttpRequest** event handlers have been replaced with the `xhr` variable name.
12+
6. The `for...in` loops for iterating through an array have been replace with `for...of`.
13+
14+
Watch this YouTube video up until the PHP examples (45 mins):
15+
16+
> Traversy Media - [Ajax Crash Course](https://youtu.be/82hnvUYY6QA)

‎Week1/traversy_ajax_crash/ajax1.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Ajax 1 - Text File</title>
8+
</head>
9+
<body>
10+
<button id="button">Get Text File</button>
11+
<br /><br />
12+
<div id="text"></div>
13+
14+
<script src="ajax1.js"></script>
15+
</body>
16+
</html>

‎Week1/traversy_ajax_crash/ajax1.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* eslint-disable no-console */
2+
3+
'use strict';
4+
5+
{
6+
function loadText() {
7+
// Create XHR Object
8+
const xhr = new XMLHttpRequest();
9+
// OPEN - type, url/file, async
10+
xhr.open('GET', 'sample.txt', true);
11+
12+
console.log('READYSTATE: ', xhr.readyState);
13+
14+
// OPTIONAL - used for loaders
15+
xhr.onprogress = () => {
16+
console.log('READYSTATE: ', xhr.readyState);
17+
};
18+
19+
xhr.onload = () => {
20+
console.log('READYSTATE: ', xhr.readyState);
21+
if (xhr.status === 200) {
22+
// console.log(this.responseText);
23+
document.getElementById('text').innerHTML = xhr.responseText;
24+
} else if (this.status === 404) {
25+
document.getElementById('text').innerHTML = 'Not Found';
26+
}
27+
};
28+
29+
xhr.onerror = () => {
30+
console.log('Request Error...');
31+
};
32+
33+
// xhr.onreadystatechange = () => {
34+
// console.log('READYSTATE: ', xhr.readyState);
35+
// if xhr.readyState === 4 && xhr.status === 200){
36+
// //console.log(this.responseText);
37+
// }
38+
// }
39+
40+
// Sends request
41+
xhr.send();
42+
}
43+
44+
// readyState Values
45+
// 0: request not initialized
46+
// 1: server connection established
47+
// 2: request received
48+
// 3: processing request
49+
// 4: request finished and response is ready
50+
51+
// HTTP Statuses
52+
// 200: "OK"
53+
// 403: "Forbidden"
54+
// 404: "Not Found"
55+
56+
document.getElementById('button').addEventListener('click', loadText);
57+
}

‎Week1/traversy_ajax_crash/ajax2.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Ajax 2 - Local JSON</title>
8+
</head>
9+
<body>
10+
<button id="button1">Get User</button>
11+
<button id="button2">Get Users</button>
12+
<br /><br />
13+
<h1>User</h1>
14+
<div id="user"></div>
15+
<h1>Users</h1>
16+
<div id="users"></div>
17+
18+
<script src="ajax2.js"></script>
19+
</body>
20+
</html>

‎Week1/traversy_ajax_crash/ajax2.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
'use strict';
2+
3+
{
4+
function loadUser() {
5+
const xhr = new XMLHttpRequest();
6+
xhr.open('GET', 'user.json', true);
7+
8+
xhr.onload = () => {
9+
if (xhr.status === 200) {
10+
const user = JSON.parse(xhr.responseText);
11+
12+
let output = '';
13+
14+
output +=
15+
`<ul>` +
16+
`<li> ID: ${user.id}</li >` +
17+
`<li>Name: ${user.name}</li>` +
18+
`<li>Email: ${user.email}</li>` +
19+
`</ul>`;
20+
21+
document.getElementById('user').innerHTML = output;
22+
}
23+
};
24+
25+
xhr.send();
26+
}
27+
28+
function loadUsers() {
29+
const xhr = new XMLHttpRequest();
30+
xhr.open('GET', 'users.json', true);
31+
32+
xhr.onload = () => {
33+
if (xhr.status === 200) {
34+
const users = JSON.parse(xhr.responseText);
35+
36+
let output = '';
37+
38+
for (const user of users) {
39+
output +=
40+
`<ul>` +
41+
`<li> ID: ${user.id}</li >` +
42+
`<li>Name: ${user.name}</li>` +
43+
`<li>Email: ${user.email}</li>` +
44+
`</ul>`;
45+
}
46+
47+
document.getElementById('users').innerHTML = output;
48+
}
49+
};
50+
51+
xhr.send();
52+
}
53+
54+
document.getElementById('button1').addEventListener('click', loadUser);
55+
document.getElementById('button2').addEventListener('click', loadUsers);
56+
}

‎Week1/traversy_ajax_crash/ajax3.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Ajax 3 - External API</title>
8+
<style>
9+
.user {
10+
display: flex;
11+
background: #f4f4f4;
12+
padding: 10px;
13+
margin-bottom: 10px;
14+
}
15+
16+
.user ul {
17+
list-style: none;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<button id="button">Load GitHub Users</button>
23+
<br /><br />
24+
<h1>Github Users</h1>
25+
<div id="users"></div>
26+
27+
<script src="ajax3.js"></script>
28+
</body>
29+
</html>

‎Week1/traversy_ajax_crash/ajax3.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
'use strict';
2+
3+
{
4+
// Load Github Users
5+
function loadUsers() {
6+
const xhr = new XMLHttpRequest();
7+
xhr.open('GET', 'https://api.github.com/users', true);
8+
9+
xhr.onload = () => {
10+
if (xhr.status === 200) {
11+
const users = JSON.parse(xhr.responseText);
12+
13+
let output = '';
14+
for (const user of users) {
15+
output +=
16+
`<div class="user"> <img src="${user.avatar_url} width="70" height="70">` +
17+
`<ul>` +
18+
`<li>ID: ${user.id}</li>` +
19+
`<li>Login: ${user.login}</li>` +
20+
`</ul>` +
21+
`</div>`;
22+
}
23+
24+
document.getElementById('users').innerHTML = output;
25+
}
26+
};
27+
28+
xhr.send();
29+
}
30+
31+
document.getElementById('button').addEventListener('click', loadUsers);
32+
}

0 commit comments

Comments
 (0)