Emiel_DK
/
frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

15-promises

15-promises
emieldkr 4 years ago
parent
476ee1c50e
commit
4e4f06d4db
11 changed files with 247 additions and 1 deletions
Split View Show Diff Stats
  1. 3
    0
      13-xmlhttprequest/debug.log
  2. 1
    1
      13-xmlhttprequest/scripts/main.js
  3. 6
    0
      15-promises/.prettierrc
  4. 9
    0
      15-promises/debug.log
  5. 6
    0
      15-promises/fetch/.prettierrc
  6. 22
    0
      15-promises/fetch/index.html
  7. 126
    0
      15-promises/fetch/scripts/main.js
  8. 33
    0
      15-promises/fetch/styles/main.css
  9. 13
    0
      15-promises/index.html
  10. 28
    0
      15-promises/scripts/main.js
  11. 0
    0
      15-promises/styles/main.css

+ 3
- 0
13-xmlhttprequest/debug.log View File

@@ -4,3 +4,6 @@
[1117/220412.648:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.650:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.650:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1202/095604.702:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1202/095604.702:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1202/095604.702:ERROR:crash_report_database_win.cc(469)] failed to stat report

+ 1
- 1
13-xmlhttprequest/scripts/main.js View File

@@ -59,7 +59,7 @@ function makeRequest(event) {
btn.innerHTML = 'dikke fail';
}
});
newRequest.open('GET', event.target.dataset.url + '/2000');
newRequest.open('GET', event.target.dataset.url);
newRequest.send();
}
}

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

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

+ 9
- 0
15-promises/debug.log View File

@@ -0,0 +1,9 @@
[1105/125502.914:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1105/125502.914:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1105/125502.914:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.648:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.650:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.650:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1202/094041.690:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1202/094041.690:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1202/094041.690:ERROR:crash_report_database_win.cc(469)] failed to stat report

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

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

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

@@ -0,0 +1,22 @@
<!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>

<div id="resultContainer"></div>

<div id="detailsContainer"></div>

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

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

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

function getEndpoints() {
fetch('https://swapi.co/api/')
.then(function(response) {
if (response.ok) {
return response.json();
}
return Promise.reject('Oh ow');
// throw new Error('Oh ow');
})
.then(function(jsonResponse) {
addBtns(jsonResponse);
})
.catch(function(error) {
console.log(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;
btn.disabled = true;
let btnText = btn.innerHTML;
btn.innerHTML = 'loading...';

fetch(event.target.dataset.url)
.then(function(response) {
if (response.ok) {
return response.json();
}
return Promise.reject(new Error('Request failed'));
})
.then(function(jsonResponse) {
btn.innerHTML = btnText;
btn.disabled = false;
console.log(jsonResponse);
resultContainer.innerHTML = printElements(jsonResponse.results);
})
.catch(function(error) {
console.log(event.target);
btn.innerHTML = 'Dikke fail...';
btn.disabled = false;
});
}
}

function printElements(list) {
return list.reduce(function(html, listItem) {
return `
${html}
<article>
<p>${listItem.name ? listItem.name : listItem.title} </p>
<button data-url="${listItem.url}">Show details </button>
</article>
`;
}, '');
}

function printDetails(list) {
// let newString = '';
// Object.keys(list).map(function(item) {
// newString += list[item] + ' ';
// });
// detailsContainer.innerHTML = newString;

return Object.keys(list).reduce(function(html, detailKey) {
debugger;
return `
${html}
<p>
<strong>${detailKey}:</strong>
${details[detailKey]}
</p>
`;
}, '');
}

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

fetch(event.target.dataset.url)
.then(function(response) {
if (response.ok) {
return response.json();
}
return Promise.reject(new Error('Request failed'));
})
.then(function(jsonResponse) {
btn.innerHTML = btnText;
btn.disabled = false;
detailsContainer.innerHTML = printDetails(jsonResponse);
})
.catch(function(error) {
console.log(event.target);
btn.innerHTML = 'Dikke fail...';
btn.disabled = false;
});
}
}

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

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

@@ -0,0 +1,33 @@
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;
}

article {
display: flex;
justify-content: space-between;
}

+ 13
- 0
15-promises/index.html View File

@@ -0,0 +1,13 @@
<!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" />
<link rel="stylesheet" href="styles/main.css" />
<title>15-promises</title>
</head>
<body>
<script src="scripts/main.js"></script>
</body>
</html>

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

@@ -0,0 +1,28 @@
function doSomething() {
const promise = new Promise(function(resolve, reject) {
const newArray = [];
for (let i = 0; i < 9999999; i++) {
newArray.push(i);
}

if (newArray.length === 0) {
reject('Oh ow');
} else {
resolve(newArray);
}
});

return promise;
}

const newPromise = doSomething();

newPromise
.then(function(result) {
console.log(result);
})
.catch(function(error) {
console.log(error);
});

console.log(newPromise);

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


Write Preview
Loading…
Cancel
Save