Home Explore Help
Register Sign In
eugeniy.ho
/
javascript_practice
Watch 1
Star 0
Fork 0
Files Issues 12 Pull Requests 0 Wiki
Browse Source

homework12 done

holevchuk.evgeny 1 year ago
parent
229bdc5b3c
commit
8f95b43b02
8 changed files with 196 additions and 0 deletions
Split View Show Diff Stats
  1. 21 0
      hw12/fetchBasic.html
  2. 26 0
      hw12/fetchBasic.js
  3. 22 0
      hw12/fetchImproved.html
  4. 51 0
      hw12/fetchImproved.js
  5. 10 0
      hw12/myfetch.html
  6. 25 0
      hw12/myfetch.js
  7. 10 0
      hw12/race.html
  8. 31 0
      hw12/race.js

+ 21 - 0
hw12/fetchBasic.html
View File 

@@ -0,0 +1,21 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+	<style>

+        table {

+            border: 1px solid red;

+            border-collapse: collapse;

+        }

+

+        td {

+	        padding: 5px;

+            border: 1px solid red;

+        }

+	</style>

+</head>

+<body>

+<script src="fetchBasic.js"></script>

+</body>

+</html>

+ 26 - 0
hw12/fetchBasic.js
View File 

@@ -0,0 +1,26 @@
 
+const renderTableFromJSON = (parent, jsonObj) => {

+

+	const tableConstruct = json => {

+		let tableElement = '<table>';

+

+		for (const row in json) {

+			tableElement += `

+				<tr>

+					<td>${row}</td>

+					<td>${json[row]}</td>

+				</tr>`;

+		}

+

+		tableElement += '</table>';

+

+		return tableElement;

+	}

+

+	fetch(`${jsonObj}`)

+		.then(response => response.json())

+		.then(luke => {

+			parent.insertAdjacentHTML('beforeend', tableConstruct(luke));

+		});

+}

+

+renderTableFromJSON(document.body, 'https://swapi.dev/api/people/1/');

+ 22 - 0
hw12/fetchImproved.html
View File 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+	<style>

+        table {

+            border: 1px solid red;

+            border-collapse: collapse;

+	        margin: 10px;

+        }

+

+        td {

+            padding: 5px;

+            border: 1px solid red;

+        }

+	</style>

+</head>

+<body>

+<script src="fetchImproved.js"></script>

+</body>

+</html>

+ 51 - 0
hw12/fetchImproved.js
View File 

@@ -0,0 +1,51 @@
 
+const renderTableFromJSON = (parent, jsonObj) => {

+

+	const buildButton = (value, parent) => {

+		const button = document.createElement('button');

+		button.type = 'button';

+		button.textContent = value;

+		button.addEventListener('click', () => {

+			button.remove();

+			renderTableFromJSON(parent, `${value}`)

+		});

+		return parent.appendChild(button);

+	}

+

+	const insertButton = (value, parent) => {

+		if(typeof value === 'string' && value.includes('https://swapi.dev/api/')) {

+			return buildButton(value, parent);

+		} else if(typeof value === 'object') {

+			value.forEach((element, index) => {

+				if(element.includes('https://swapi.dev/api/')) {

+					value[index] = buildButton(element, parent);

+				}

+			});

+			return value;

+		} else {

+			return parent.append(value);

+		}

+	}

+

+	const tableConstruct = json => {

+		let tableElement = document.createElement('table');

+

+		for (const row in json) {

+			const tableRowElement = document.createElement('tr');

+

+			tableRowElement.insertCell(0).innerHTML = `${row}`;

+			insertButton(json[row], tableRowElement.insertCell(1));

+

+			tableElement.appendChild(tableRowElement);

+		}

+

+		return tableElement;

+	}

+

+	fetch(`${jsonObj}`)

+		.then(response => response.json())

+		.then(luke => {

+			parent.appendChild(tableConstruct(luke));

+		});

+}

+

+renderTableFromJSON(document.body, 'https://swapi.dev/api/people/1/');

+ 10 - 0
hw12/myfetch.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+</head>

+<body>

+<script src="myfetch.js"></script>

+</body>

+</html>

+ 25 - 0
hw12/myfetch.js
View File 

@@ -0,0 +1,25 @@
 
+const myfetch = (method, url) => {

+	return new Promise((resolve, reject) => {

+		const errorObj = xhr => {

+			return {

+				status: xhr.status,

+				statusText: xhr.statusText

+			}

+		}

+		const xhr = new XMLHttpRequest();

+		xhr.open(method, url);

+		xhr.onload = () => {

+			if (xhr.status !== 200) {

+				reject(errorObj(xhr));

+			} else {

+				resolve(JSON.parse(xhr.response));

+			}

+		};

+		xhr.onerror = () => reject(errorObj(xhr));

+		xhr.send();

+	});

+}

+

+myfetch('GET', 'https://swapi.dev/api/people/1/')

+	.then(luke => console.log(luke))

+	.catch(error => console.error('There was an error!', error.statusText));

+ 10 - 0
hw12/race.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+</head>

+<body>

+<script src="race.js"></script>

+</body>

+</html>

+ 31 - 0
hw12/race.js
View File 

@@ -0,0 +1,31 @@
 
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));

+

+const myfetch = (method, url) => {

+	return new Promise((resolve, reject) => {

+		const errorObj = xhr => {

+			return {

+				status: xhr.status,

+				statusText: xhr.statusText

+			}

+		}

+		const xhr = new XMLHttpRequest();

+		xhr.open(method, url);

+		xhr.onload = () => {

+			if (xhr.status !== 200) {

+				reject(errorObj(xhr));

+			} else {

+				resolve(JSON.parse(xhr.response));

+			}

+		};

+		xhr.onerror = () => reject(errorObj(xhr));

+		xhr.send();

+	});

+}

+

+const fetchResult = myfetch('GET', 'https://swapi.dev/api/people/1/')

+	.then(luke => console.log(luke))

+	.catch(error => console.error('There was an error!', error.statusText));

+

+let race = Promise.race([fetchResult, delay(45)]);

+

+race.then(result => console.log(result));