Home Explore Help
Sign In
pvvvm505
/
JavaScript
Watch 1
Star 0
Fork 0
Files Issues 7 Pull Requests 0 Wiki
Browse Source

done

pavlovm503 4 years ago
parent
5fc3309bef
commit
d22d28a1e6
4 changed files with 172 additions and 0 deletions
Split View Show Diff Stats
  1. 43 0
      Pavlov_hm12/css/clean.css
  2. 29 0
      Pavlov_hm12/css/style.css
  3. 16 0
      Pavlov_hm12/inddex.html
  4. 84 0
      Pavlov_hm12/script/script.js

+ 43 - 0
Pavlov_hm12/css/clean.css
View File 

@@ -0,0 +1,43 @@
 
+ html, body, div, span, applet, object, iframe,
 
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
+    a, abbr, acronym, address, big, cite, code,
 
+    del, dfn, em, img, ins, kbd, q, s, samp,
 
+    small, strike, strong, sub, sup, tt, var,
 
+    b, u, i, center,
 
+    dl, dt, dd, ol, ul, li,
 
+    fieldset, form, label, legend,
 
+    table, caption, tbody, tfoot, thead, tr, th, td,
 
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
 
+    time, mark, audio, video {
 
+    	margin: 0;
 
+    	padding: 0;
 
+    	border: 0;
 
+    	font-size: 100%;
 
+    	font: inherit;
 
+    	vertical-align: baseline;
 
+    }
 
+    /* HTML5 display-role reset for older browsers */
 
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, nav, section {
 
+    	display: block;
 
+    }
 
+    body {
 
+    	line-height: 1;
 
+    }
 
+    ol, ul {
 
+    	list-style: none;
 
+    }
 
+    blockquote, q {
 
+    	quotes: none;
 
+    }
 
+    blockquote:before, blockquote:after,
 
+    q:before, q:after {
 
+    	content: '';
 
+    	content: none;
 
+    }
 
+    table {
 
+    	border-collapse: collapse;
 
+    	border-spacing: 0;
 
+    }

+ 29 - 0
Pavlov_hm12/css/style.css
View File 

@@ -0,0 +1,29 @@
 
+body{
 
+	background-color: black;
 
+	font-family: 'Quantico', sans-serif;
 
+}
 
+#assignment{border: 5px solid green; color:green;margin:5px auto;width: 800px;}
 
+#improved{border: 5px solid green;color: green;margin:5px auto;width: 800px;}
 
+button{
 
+	background: black;
 
+	border: 3px solid green;
 
+	margin:2px;
 
+	color: green;
 
+	cursor: pointer;
 
+	font-family: 'Quantico', sans-serif;
 
+	outline: none;
 
+}
 
+button:hover{
 
+	background: green;
 
+	color:black;
 
+}
 
+th {
 
+	width: 233;
 
+	border: 1px solid green;
 
+	padding: 2px;
 
+	text-transform: capitalize;
 
+}
 
+td {
 
+	border: 1px solid green;
 
+	padding: 2px;
 
+}

+ 16 - 0
Pavlov_hm12/inddex.html
View File 

@@ -0,0 +1,16 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+	<meta charset="utf-8">
 
+	<title>Pavlov_Maik_FSA3</title>
 
+	<link rel="stylesheet" href="css/clean.css">
 
+	<style>body{background-color: black}</style>
 
+	<link href="https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet">
 
+</head>
 
+<body>
 
+	<table id="assignment"></table>
 
+	<table id="improved"></table>
 
+	<link rel="stylesheet" href="css/style.css">
 
+	<script src="script/script.js"></script>
 
+</body>
 
+</html>

+ 84 - 0
Pavlov_hm12/script/script.js
View File 

@@ -0,0 +1,84 @@
 
+function createTable(element,information){
 
+	for(let i in information){
 
+		let tr = document.createElement('tr');
 
+		let th = document.createElement('th');
 
+		let td = document.createElement('td');
 
+		th.innerText=i;
 
+		td.innerText = information[i];
 
+		tr.appendChild(th);
 
+		tr.appendChild(td);
 
+		element.appendChild(tr);
 
+	};
 
+};
 
+
 
+fetch('https://swapi.dev/api/starships/9/')
 
+  .then(res => res.json())
 
+  .then(luke =>createTable(assignment,luke))
 
+
 
+function createImproved(element,information){
 
+	function clickBtn(btn,el){
 
+		btn.onclick=()=>{
 
+			fetch(el)
 
+			.then(res => res.json())
 
+		    .then(luke =>createImproved(improved,luke))
 
+		};
 
+	};
 
+	for(let i in information){
 
+		let tr = document.createElement('tr');
 
+		let th = document.createElement('th');
 
+		let td = document.createElement('td');
 
+		th.innerText=i;
 
+		tr.appendChild(th);
 
+		if (typeof information[i]==='string'&&information[i].indexOf("http://swapi.dev/api/")===0){
 
+			let btn = document.createElement('button');
 
+			td.appendChild(btn);
 
+			btn.classList.add('linkBtn');
 
+			btn.innerText='link';
 
+			clickBtn(btn,information[i]);
 
+		} else if(typeof information[i]==='object'){
 
+			for(let key of information[i]){
 
+				let btn = document.createElement('button');
 
+				td.appendChild(btn)
 
+				btn.innerText='oppen array';
 
+				clickBtn(btn,key);
 
+			}
 
+		} else {
 
+				td.innerText =information[i];
 
+		}
 
+		tr.appendChild(td);
 
+		element.appendChild(tr);
 
+	};
 
+};
 
+
 
+fetch('https://swapi.dev/api/starships/9/')
 
+  .then(res => res.json())
 
+  .then(luke =>createImproved(improved,luke))
 
+
 
+function mFetch(url){
 
+    return new Promise(function (res, rej){
 
+        const xxx = new XMLHttpRequest();
 
+        xxx.open("GET", url,true);
 
+	    xxx.onload = () =>{
 
+	    	if (xxx.status != 200){
 
+                rej(xxx.response);
 
+                }else {
 
+                res(JSON.parse(xxx.responseText));
 
+                };
 
+		};
 
+	    xxx.onerror = () => reject(xhr.statusText);
 
+	    xxx.send();
 
+    });
 
+};
 
+
 
+mFetch('https://swapi.dev/api/starships/9/')
 
+.then(luke => console.log(luke))
 
+
 
+const promise1 = new Promise(function(resolve,reject){
 
+	mFetch('https://swapi.dev/api/starships/9/')
 
+  	.then(() =>resolve('promise1') )
 
+});
 
+const promise2 = ms => new Promise(ok => setTimeout(() => ok("promise2"), ms));
 
+
 
+Promise.race([promise1, promise2(120)]).then(function(value) {
 
+  console.log(value);
 
+});