senneDM
/
Frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

fetch folder

15-promises
senne 4 years ago
parent
9ea56f5504
commit
df68e1b677
9 changed files with 226 additions and 2 deletions
Split View Show Diff Stats
  1. 6
    0
      13-xmlhttprequest/.prettierrc
  2. 18
    0
      13-xmlhttprequest/index.html
  3. 56
    0
      13-xmlhttprequest/scripts/main.js
  4. 28
    0
      13-xmlhttprequest/styles/main.css
  5. 6
    0
      15-promises/fetch/.prettierrc
  6. 18
    0
      15-promises/fetch/index.html
  7. 61
    0
      15-promises/fetch/scripts/main.js
  8. 28
    0
      15-promises/fetch/styles/main.css
  9. 5
    2
      15-promises/scripts/main.js

+ 6
- 0
13-xmlhttprequest/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 18
- 0
13-xmlhttprequest/index.html View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>13-xmlhttprequest</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div>
<button id="get-endpoints-btn">Get endpoints</button>
</div>
<div id="endpoint-container"></div>

<script src="scripts/main.js"></script>
</body>
</html>

+ 56
- 0
13-xmlhttprequest/scripts/main.js View File

@@ -0,0 +1,56 @@
const endpointContainer = document.getElementById('endpoint-container');
const getEndpointsBtn = document.getElementById('get-endpoints-btn');

function getEndpoints() {
let request = new XMLHttpRequest();

request.addEventListener('load', function(event) {
let response = JSON.parse(event.target.responseText);
addBtns(response);
});

request.open('GET', 'https://swapi.co/api/');
request.send();
}

function addBtns(response) {
const btnHtml = Object.keys(response).reduce(function(html, responseKey) {
return (
html +
'<button data-url="' +
response[responseKey] +
'">' +
responseKey +
'</button>'
);
}, '');

endpointContainer.innerHTML = btnHtml;
}

function makeRequest(event) {
if (event.target.matches('button')) {
let btn = event.target;
let btnText = btn.innerHTML;
btn.innerHTML = 'loading...';

let request = new XMLHttpRequest();

request.addEventListener('load', function(event) {
if (event.target.status === 200) {
let response = JSON.parse(event.target.responseText);
console.log(response);
btn.innerHTML = btnText;
} else {
console.log(event.target);
btn.innerHTML = 'Dikke fail...';
}
});

request.open('GET', event.target.dataset.url);
request.send();
}
}

getEndpointsBtn.addEventListener('click', getEndpoints);
endpointContainer.addEventListener('click', makeRequest);

+ 28
- 0
13-xmlhttprequest/styles/main.css View File

@@ -0,0 +1,28 @@
html {
font-size: 15px;
font-family: sans-serif;
}

div {
margin: 4rem auto;
width: 80%;
max-width: 50rem;
text-align: center;
padding: 3rem;
}

#endpoint-container {
display: flex;
flex-direction: column;
align-items: center;
}

button {
line-height: 2rem;
font-weight: 600;
background-color: teal;
color: white;
border: none;
margin: 0.5rem 0;
padding: 0.6rem 2rem;
}

+ 6
- 0
15-promises/fetch/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 18
- 0
15-promises/fetch/index.html View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>13-xmlhttprequest</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div>
<button id="get-endpoints-btn">Get endpoints</button>
</div>
<div id="endpoint-container"></div>

<script src="scripts/main.js"></script>
</body>
</html>

+ 61
- 0
15-promises/fetch/scripts/main.js View File

@@ -0,0 +1,61 @@
const endpointContainer = document.getElementById('endpoint-container');
const getEndpointsBtn = document.getElementById('get-endpoints-btn');

function getEndpoints() {
fetch('https://swapi.co/api/')
.then(function(response){
if(response.ok){
return response.json();
}

return Promise.reject('promise not ok');
}).then(function(jsonResponse){
addBtns(jsonResponse);
})
.catch(function(error){
console.error(error);
});
}

function addBtns(response) {
const btnHtml = Object.keys(response).reduce(function(html, responseKey) {
return (
html +
'<button data-url="' +
response[responseKey] +
'">' +
responseKey +
'</button>'
);
}, '');

endpointContainer.innerHTML = btnHtml;
}

function makeRequest(event) {
if (event.target.matches('button')) {
let btn = event.target;
let btnText = btn.innerHTML;
btn.innerHTML = 'loading...';

let request = new XMLHttpRequest();

request.addEventListener('load', function(event) {
if (event.target.status === 200) {
let response = JSON.parse(event.target.responseText);
console.log(response);
btn.innerHTML = btnText;
} else {
console.log(event.target);
btn.innerHTML = 'Dikke fail...';
}
});

request.open('GET', event.target.dataset.url);
request.send();
}
}

getEndpointsBtn.addEventListener('click', getEndpoints);
endpointContainer.addEventListener('click', makeRequest);

+ 28
- 0
15-promises/fetch/styles/main.css View File

@@ -0,0 +1,28 @@
html {
font-size: 15px;
font-family: sans-serif;
}

div {
margin: 4rem auto;
width: 80%;
max-width: 50rem;
text-align: center;
padding: 3rem;
}

#endpoint-container {
display: flex;
flex-direction: column;
align-items: center;
}

button {
line-height: 2rem;
font-weight: 600;
background-color: teal;
color: white;
border: none;
margin: 0.5rem 0;
padding: 0.6rem 2rem;
}

+ 5
- 2
15-promises/scripts/main.js View File

@@ -5,12 +5,16 @@ function doSomething(){
newAray.push(i);
}

resolve(newAray);

if(newAray.length ===0){
reject('oh ow!');
}else{
resolve(newAray);
}
});
return promise;
}

doSomething()
.then(function(result){
@@ -20,4 +24,3 @@ function doSomething(){
console.log(error);
});
}

Write Preview
Loading…
Cancel
Save