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

fix me please

master
niels de groot 4 years ago
parent
830fb6946a
commit
aefa9c21db
61 changed files with 1466 additions and 6 deletions
Split View Show Diff Stats
  1. 3
    6
      04-EX01/04-EX01.css
  2. 1
    0
      04-EX01/04-EX01.html
  3. 0
    0
      04-EX01/images/bg-image.png
  4. 0
    0
      04-EX01/images/pic01.jpg
  5. 0
    0
      04-EX01/images/pic02.jpg
  6. 0
    0
      04-EX01/images/pic03.jpg
  7. 6
    0
      07-javascript-intro/.prettierrc
  8. 33
    0
      07-javascript-intro/index.html
  9. 23
    0
      07-javascript-intro/main.css
  10. 9
    0
      07-javascript-intro/scripts/logger.js
  11. 115
    0
      07-javascript-intro/scripts/main.js
  12. 1
    0
      08-EX03/scripts/logger.js
  13. 0
    0
      08-EX03/scripts/main.js
  14. 6
    0
      08-EX03/style/.prettierrc
  15. 0
    0
      08-EX03/style/index.html
  16. 0
    0
      08-EX03/style/main.css
  17. 17
    0
      09-EX04/.vscode/launch.json
  18. 36
    0
      09-EX04/scripts/main.js
  19. 6
    0
      09-EX04/style/.prettierrc
  20. 20
    0
      09-EX04/style/main.css
  21. 23
    0
      09-EX04/style/main.html
  22. 6
    0
      09-form/styles/.prettierrc
  23. 32
    0
      09-form/styles/main.css
  24. 63
    0
      09-form/styles/main.html
  25. 28
    0
      09-form/styles/script/main.js
  26. 6
    0
      13-xhtmlhttprequest/.prettierrc
  27. 17
    0
      13-xhtmlhttprequest/index.html
  28. 57
    0
      13-xhtmlhttprequest/scripts/main.js
  29. 0
    0
      13-xhtmlhttprequest/styles/main.css
  30. 30
    0
      14-grid/index.html
  31. 6
    0
      14-grid/styles/.prettierrc
  32. 9
    0
      14-grid/styles/main.css
  33. 6
    0
      15-promises/.prettierrc
  34. 6
    0
      15-promises/fetch/.prettierrc
  35. 20
    0
      15-promises/fetch/index.html
  36. 125
    0
      15-promises/fetch/scripts/main.js
  37. 8
    0
      15-promises/fetch/scripts/oef.js
  38. 32
    0
      15-promises/fetch/styles/main.css
  39. 12
    0
      15-promises/index.html
  40. 0
    0
      15-promises/main.css
  41. 86
    0
      15-promises/main.js
  42. 56
    0
      15-promises/scripts/main.js
  43. 28
    0
      15-promises/styles/main.css
  44. 6
    0
      18-hangman/.prettierrc
  45. 17
    0
      18-hangman/.vscode/launch.json
  46. BIN
      18-hangman/images/hangman01.png
  47. BIN
      18-hangman/images/hangman02.png
  48. BIN
      18-hangman/images/hangman03.png
  49. BIN
      18-hangman/images/hangman04.png
  50. BIN
      18-hangman/images/hangman05.png
  51. BIN
      18-hangman/images/hangman06.png
  52. BIN
      18-hangman/images/hangman07.png
  53. BIN
      18-hangman/images/hangman08.png
  54. BIN
      18-hangman/images/hangman09.png
  55. 71
    0
      18-hangman/index.html
  56. 119
    0
      18-hangman/script.js
  57. 78
    0
      18-hangman/style.css
  58. 38
    0
      19-quiz/README.md
  59. 59
    0
      19-quiz/index.html
  60. 107
    0
      19-quiz/script.js
  61. 39
    0
      19-quiz/style.css

+ 3
- 6
04-EX01/04-EX01.css View File

@@ -126,8 +126,7 @@ justify-content: space-between;
height:500px;
background-color: black;
margin-top: 15%;
display:flex;
flex-wrap:wrap;
}


@@ -140,7 +139,7 @@ justify-content: space-between;
width: 33%;
height: 400px;
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: space-around;
border-bottom: 2px #dedede solid;
column-gap:500px;
@@ -150,7 +149,5 @@ text-align: center;
.footer {
font-size: 8px;
color: #dede;
display:flex;
flex-flow: row;
justify-content: center;
text-align: center;
}

+ 1
- 0
04-EX01/04-EX01.html View File

@@ -4,6 +4,7 @@
<title>Industrious page</title>
<link rel="stylesheet" href="industrious.css">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" href="04-EX01.css">
<body>
<header>
Industrious

04-EX01/bg-image.png → 04-EX01/images/bg-image.png View File


04-EX01/pic01.jpg → 04-EX01/images/pic01.jpg View File


04-EX01/pic02.jpg → 04-EX01/images/pic02.jpg View File


04-EX01/pic03.jpg → 04-EX01/images/pic03.jpg View File


+ 6
- 0
07-javascript-intro/.prettierrc View File

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

+ 33
- 0
07-javascript-intro/index.html View File

@@ -0,0 +1,33 @@
<!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="main.css" />
<title>07-javascript-intro</title>
</head>
<body>
<div id="logger"></div>
<div id="app"></div>

<button id="btn">Klik op mij plies</button>

<div id="oefenen">
<button id="oef-btn">Moet zien ik kan iets!</button>
</div>

<div id="oefenen2">
<button id="oef-btn-2">ik kan nog veel meer!</button>
<button id="clear-btn-2">Weg ermee</button>
</div>

<div id="oefenen-3">
<div id='timerText'></div>
<button id="oef-btn-3">Get 300!</button>
</div>

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

+ 23
- 0
07-javascript-intro/main.css View File

@@ -0,0 +1,23 @@


button {
color: darksalmon;
background-color: hotpink;
margin-bottom:50px;
border: darkslateblue 2px outset;
border-radius: 10%;
}

#oefenen-3 {
border: 5px orangered solid;
text-align: center;
margin-left:20%;
margin-right:20%;
}

#oef-btn-3 {
margin-top: 20px;
color: black;
}


+ 9
- 0
07-javascript-intro/scripts/logger.js View File

@@ -0,0 +1,9 @@
const logger = printable => {
const parent = document.getElementById('logger')
parent.innerHTML += `<p><pre style="font-family:mono;">${JSON.stringify(
printable,
null,
2
)}</pre></p>`
return printable
}

+ 115
- 0
07-javascript-intro/scripts/main.js View File

@@ -0,0 +1,115 @@
let foo = {};
let propname = 'bar';

foo.bar = 5;
foo[propname] = 5;

let nenArray = [1, 2, 3, 4, 5];
nenArray[3] = 5;

let appDiv = document.getElementById('app');

console.log(appDiv);

appDiv.innerHTML = 'Mahow zeh te javascript';

for (let i = 0; i < 4; i++) {
let newPar = document.createElement('p');
newPar.innerHTML = i + 1;
console.log(newPar);
appDiv.appendChild(newPar);
}

btn.addEventListener('click', function(event) {
console.log('click');
let newPa = document.createElement('p');
newPa.innerHTML = 'joew';
});

/*knop 2 */

let oefDiv = document.getElementById('oefenen');
let oefBtn = document.getElementById('oef-btn');

function oefnClick(event) {
let newPar = document.createElement('p');
newPar.innerHTML = 'paragraaf';
oefDiv.appendChild(newPar);
}

oefBtn.addEventListener('click', oefnClick);

/*knop 3 */

let oefnDiv = document.getElementById('oefenen2');
let oefnBtn = document.getElementById('oef-btn-2');
let count = 0;
let clearBtn = document.getElementById('clear-btn-2');

function oefClick(event) {
let newPar = document.createElement('p');
count++;
newPar.innerHTML = count;
oefnDiv.appendChild(newPar);
}

function clearCount(event) {
let oefnDiv = document.querySelectorAll('#oefenen2 p');
console.log(oefnDiv);
for (let i = 0; i < oefnDiv.length; i++) {
oefnDiv[i].remove();
}
}
oefnBtn.addEventListener('click', oefClick);
clearBtn.addEventListener('click', clearCount);

/*set interval functie


function intervalFunction() {
console.log('nu')
}
let intervaal = setInterval (intervalFunction,1000);

clearInterval(interval);

*/

let oefenenBtn = document.getElementById('oef-btn-3');
let oefeningDrie = document.getElementById('oefenen-3');
let county = 0;
let timerTextt = document.getElementById('timerText');
let newPar = document.createElement('p');
let newPaar = document.createElement('p');

function oefinterval() {
county++;
console.log(county);
}

function stopTimer() {
if (county === 300) {
newPaar.innerHTML = 'Bots 300!!';
oefeningDrie.appendChild(newPaar);
} else {
newPar.innerHTML = 'Jammer, geen 300';
oefeningDrie.appendChild(newPar);
}
county = 0;
}

function timerText() {
timerTextt.innerHTML = county;
oefeningDrie.appendChild(timerTextt);
}

function wegText() {
oefeningDrie.removeChild(newPar);
oefeningDrie.removeChild(newPaar);
}

let interval = setInterval(oefinterval, 10);
oefenenBtn.addEventListener('click', wegText);
oefenenBtn.addEventListener('click', timerText);
oefenenBtn.addEventListener('click', stopTimer);


+ 1
- 0
08-EX03/scripts/logger.js View File

@@ -0,0 +1 @@


+ 0
- 0
08-EX03/scripts/main.js View File


+ 6
- 0
08-EX03/style/.prettierrc View File

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

+ 0
- 0
08-EX03/style/index.html View File


+ 0
- 0
08-EX03/style/main.css View File


+ 17
- 0
09-EX04/.vscode/launch.json View File

@@ -0,0 +1,17 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\scripts\\main.js"
}
]
}

+ 36
- 0
09-EX04/scripts/main.js View File

@@ -0,0 +1,36 @@








const form = document.getElementById("form");




form.addEventListener('submit', function(e) {
e.preventDefault();
const paragraaf = document.querySelector("p");
const textArea = form.querySelector('input[name = "textarea"]');
const string = textArea.value;
var splitter = string.split(" ")
var newString = [];
var used;
for(i = 0; i < splitter.length; i++) {
var nummer = Math.floor(Math.random() * splitter.length);
for(i = 0; i < used.length; i++)
if
newString.push(splitter[nummer]);
console.log(newString);
}
paragraaf.innerHTML = newString;
})

+ 6
- 0
09-EX04/style/.prettierrc View File

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

+ 20
- 0
09-EX04/style/main.css View File

@@ -0,0 +1,20 @@
header {
background-color: rgb(38, 161, 38);
height: 200px;
color:white;
font-family: monospace;
font-size: 40px;
text-align: center;

}

textarea {
margin: 10px;
display:flex;
}




+ 23
- 0
09-EX04/style/main.html View File

@@ -0,0 +1,23 @@
<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>Wordscrambler</title>
<link rel="stylesheet" href="C:\Users\de groot\Desktop\frontend\09-EX04\style\main.css">
</head>
<body>
<header>Word scrambler</header>
<form action="#" method = "POST" id="form">
<input type="textarea" name="textarea" type ="text"/>
<input type="submit"/>
</form>

<br>
<br>
<br>
<p id=scrambledString></p>
<script src="C:\Users\de groot\Desktop\frontend\09-EX04\scripts\main.js"></script>
</body>
</html>

+ 6
- 0
09-form/styles/.prettierrc View File

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

+ 32
- 0
09-form/styles/main.css View File

@@ -0,0 +1,32 @@
body {

background-color: darksalmon;
border: dashed 2px blueviolet;
font-family: sans-serif;
display:flex;
}

form {
width: 60%;
margin: 0 auto;
}
label {
display:block;
margin-top:1rem;
}

input {
margin-left: 1rem;
/* width: calc(100% -2rem);*/
float:right;
width:50%;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1rem;
}

input[type="radio"],
input[type="checkbox"] {
margin-left:0;
margin-right:2rem;
}

+ 63
- 0
09-form/styles/main.html View File

@@ -0,0 +1,63 @@
<!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="main.css" />
<title>forms</title>
</head>
<body>
<form action="#" method="POST" id="form">
<input type="hidden" name="hidden" value="jezietmeniet" />
<label>
Textfield
<input name="text" type="text" />
</label>
<label>
Datefield
<input type="date" name="date" />
</label>
<label>
Emailfield
<input type="email" name="email" />
</label>
<label>
Passwordfield
<input type="password" name="password" />
</label>
<label>
Radio 1
<input type="radio" name="radio" value="radio-1" checked />
</label>
<label>
Radio 2
<input type="radio" name="radio" value="radio-2" />
</label>
<label>
Radio 3
<input type="radio" name="radio" value="radio-3" />
</label>
<label>
Radio 4
<input type="radio" name="radio" value="radio-4" />
</label>
<input type="checkbox" name="checkbox" value="checkbox-1" />
<input type="checkbox" name="checkbox" value="checkbox-2" />
<input type="checkbox" name="checkbox" value="checkbox-3" />
<input type="checkbox" name="checkbox" value="checkbox-4" />
<input type="checkbox" name="checkbox" value="checkbox-5" />
<label>
Select
<select name="select" multiple>
<option value="select-1">Select 1</option>
<option value="select-2">Select 2</option>
<option value="select-3">Select 3</option>
<option value="select-4">Select 4</option>
</select>
</label>
<input type="submit" />
</form>
<script src="script/main.js"></script>
</body>
</html>

+ 28
- 0
09-form/styles/script/main.js View File

@@ -0,0 +1,28 @@
const form = document.getElementById('form');

form.addEventListener('submit', function(e) {
e.preventDefault();

const text = form.querySelector('input[name="text"]');
console.log(text.value);

const select = form.querySelector('select[name="select"]');
console.log(select.value);

const selectedOption = form.querySelectorAll('option:checked');
console.log(selectedOption.value);
for (let i = 0; i < selectedOption.length; i++) {
console.log(selectedOption[i].value);
}

const radioBtn = form.querySelector('input[name="radio"]:checked');
console.log(radioBtn.value);

const checkBoxes = form.querySelectorAll('input[name="checkbox"]:checked');
console.log(checkBoxes);
for (i = 0; i < checkBoxes.length; i++) {
console.log(checkBoxes[i].value);
}

console.log(form.querySelector('input[name="date"]').value)
});

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

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

+ 17
- 0
13-xhtmlhttprequest/index.html View File

@@ -0,0 +1,17 @@
<!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>Document</title>
</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>

+ 57
- 0
13-xhtmlhttprequest/scripts/main.js View File

@@ -0,0 +1,57 @@
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) {
let response = JSON.parse(event.target.responseText);
if (response.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);

+ 0
- 0
13-xhtmlhttprequest/styles/main.css View File


+ 30
- 0
14-grid/index.html View File

@@ -0,0 +1,30 @@
<!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>14-Grid</title>
</head>
<body>
<div id ="grid">
<div id = "one"></div>
<div id = "two"></div>
<div id = "three"></div>
<div id = "four"></div>
<div id = "five"></div>
<div id = "five"></div>
<div id = "five"></div>
<div id = "five"></div>
<div id = "five"></div>
<div id = "five"></div>
<div id = "five"></div>
<div id = "five"></div>
<div id = "five"></div>
<div id = "five"></div>
<div id = "five"></div>
<div id = "five"></div>

</div>
</body>
</html>

+ 6
- 0
14-grid/styles/.prettierrc View File

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

+ 9
- 0
14-grid/styles/main.css View File

@@ -0,0 +1,9 @@
#grid {
display: grid;
width: 500px;
height:00px;
grid-template-columns: 50px 40% 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-row-gap:20px;
}


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

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

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

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

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

@@ -0,0 +1,20 @@
<!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 ="list-container"></div>
<div id="details-container"></div>

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

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

@@ -0,0 +1,125 @@
const endpointContainer = document.getElementById('endpoint-container');
const listContainer = document.getElementById('list-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(new Error('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 listHtml(list) {
return list.reduce(function(html, listItem) {
return `
${html}
<article class="list-item">
<p>${listItem.name ? listItem.name : listItem.title}</p>
<button data-url="${listItem.url}">Show details</button>
</article>
`;
}, '');
}

function button(btn) {

}
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) {
console.log(jsonResponse);
btn.innerHTML = btnText;
listContainer.innerHTML = listHtml(jsonResponse.results);
btn.disabled = false;
})
.catch(function(error) {
console.error(error);
btn.innerHTML = 'Dikke fail...';
btn.disabled = false;
});
}
}

function listDetails(detail) {
return Object.keys(details).reduce(function(html, detailKey){
return `
${html}
<p>
<strong>${detailKey}:</strong>
${details[detailKey]};
</p>
`;
}, '');
}
function requestDetails() {
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) {
console.log(jsonResponse);
btn.innerHTML = btnText;
listContainer.innerHTML = listHtml(jsonResponse.results);
btn.disabled = false;
})
.catch(function(error) {
console.error(error);
btn.innerHTML = 'Dikke fail...';
btn.disabled = false;
});
}
}


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

+ 8
- 0
15-promises/fetch/scripts/oef.js View File

@@ -0,0 +1,8 @@
let p = new Promise((resolve, reject) => {
let a = 1+ 1;
if(a == 2) {
resolve("Succes");
} else {
reject("Failed");
}
});

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

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

button:disbaled {
background-color: gray;
}

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

@@ -0,0 +1,12 @@
<!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>Document</title>
</head>
<body>
</body>
</html>

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


+ 86
- 0
15-promises/main.js View File

@@ -0,0 +1,86 @@

/*function doSomething() {
const promise = new Promise(function(resolve,reject) {
const newArray = [];
for(let i = 0; i < 99999; 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)
*/

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) {
let response = JSON.parse(event.target.responseText);
if (response.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);

+ 56
- 0
15-promises/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
15-promises/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
18-hangman/.prettierrc View File

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

+ 17
- 0
18-hangman/.vscode/launch.json View File

@@ -0,0 +1,17 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\script.js"
}
]
}

BIN
18-hangman/images/hangman01.png View File


BIN
18-hangman/images/hangman02.png View File


BIN
18-hangman/images/hangman03.png View File


BIN
18-hangman/images/hangman04.png View File


BIN
18-hangman/images/hangman05.png View File


BIN
18-hangman/images/hangman06.png View File


BIN
18-hangman/images/hangman07.png View File


BIN
18-hangman/images/hangman08.png View File


BIN
18-hangman/images/hangman09.png View File


+ 71
- 0
18-hangman/index.html View File

@@ -0,0 +1,71 @@
1<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hangman</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Hangman
</h1>
</div>
</div>
</section>
<section class="columns">
<aside class="column">
<div id="letter-container">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
<div class="letter">F</div>
<div class="letter">G</div>
<div class="letter">H</div>
<div class="letter">I</div>
<div class="letter">J</div>
<div class="letter">K</div>
<div class="letter">L</div>
<div class="letter">M</div>
<div class="letter">N</div>
<div class="letter">O</div>
<div class="letter">P</div>
<div class="letter">Q</div>
<div class="letter">R</div>
<div class="letter">S</div>
<div class="letter">T</div>
<div class="letter">U</div>
<div class="letter">V</div>
<div class="letter">W</div>
<div class="letter">X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
</div>
</aside>
<main class="column is-three-quarters">
<section id="image-container">
<img id="image" src="images/hangman01.png" alt="">
</section>
<section id="solution-container">
<div class="solution-letter"></div>
<div class="solution-letter"></div>
<div class="solution-letter"></div>
<div class="solution-letter"></div>
<div class="solution-letter"></div>

</section>
<section id="win-lose-container">
You won!
</section>
</main>
</section>
<script src="script.js"></script>
</body>
</html>

+ 119
- 0
18-hangman/script.js View File

@@ -0,0 +1,119 @@
const randomWords = [
'condition',
'bottom',
'lineage',
'trip',
'reporter',
'paper',
'colorful',
'agent',
'justify',
'torture',
'cap',
'earthflax',
'payment',
'research',
'picture',
'garage',
'honor',
'memorial',
'planet',
'biography',
'profound',
'rumor',
'gear',
'bedroom',
'orthodox',
'penalty',
'grief',
'promote',
'roof',
'suite',
'moving',
'killer',
'museum',
'essay',
'fever',
'dignity',
'shadow',
'enjoy',
'kill',
'shy',
'counter',
'pawn',
'button',
'bullet',
'skin',
'rate',
'shop',
'consider',
'other',
'prospect',
];
const hangManImage = document.querySelector('#image');
const solutionContainer = document.querySelector('#solution-container');
const winOrLoseContainer = document.querySelector('#win-lose-container');
const letterContainer = document.querySelector('#letter-container');
const letters = document.querySelectorAll('.letter');

const gameState = {
word: [],
hangman: 1,
turn: 1,
lettersFound: 0,
won: false,
lost: false,

randomWord: function() {
const number = Math.floor(Math.random() * 50);
const rword = randomWords[number].toUpperCase();
gameState.word = rword;
console.log(rword);
},
};

function yolo() {
letters.forEach(letter => {
letter.addEventListener('click', function() {
const splitString = gameState.word.split('');
if (splitString.indexOf(letter.innerHTML) === -1) {
letter.setAttribute('class', 'letter failed');
image();
} else {
letter.setAttribute('class', 'letter success');
lettersFind();
}
});
});
}

gameState.randomWord();
yolo();

function image() {
gameState.hangman++;
const srcImage = 'images/hangman0' + gameState.hangman + '.png';
hangManImage.src = srcImage;
if (srcImage === 'images/hangman09.png') {
console.log('you lose');
winOrLoseContainer.innerHTML = 'You lose biitch!';
letterContainer.style['pointer-events'] = 'none';
}
}

function lettersFind() {
const spliet = gameState.word.split('');
gameState.lettersFound++;
if (gameState.lettersFound === spliet.length) {
winOrLoseContainer.innerHTML = 'you win biiitch';
letterContainer.style['pointer-events'] = 'none';
}
}

function showLetters() {
const splat = gameState.word.split('');
for (i = 0; i < splat.length; i++) {
}
}


+ 78
- 0
18-hangman/style.css View File

@@ -0,0 +1,78 @@



#letter-container{
padding: .5rem .8rem;
margin: 1rem;
border: solid black .5rem;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
pointer-events: initial;
}

.letter{
margin: .3rem 0;
-webkit-border-radius: .2rem;
-moz-border-radius: .2rem;
border-radius: .5rem;
min-width: 2.5rem;
line-height: 2.5rem;
background-color: #00a5a5;
text-align: center;
cursor: pointer;
}

.letter:hover{
background-color: #8ecfcc;
}

.letter.failed{
cursor: not-allowed;
text-decoration: line-through;
background-color: #b43131;
}

.letter.success {
cursor: not-allowed;
background-color: #009500;
}

#letter-container::after {
content: "";

min-width: 2.5rem;
}

#image-container{
padding: 2rem;
text-align: center;
}

#solution-container {
display: flex;
justify-content: center;
}

.solution-letter{
margin: .2rem .4rem;
text-align: center;
font-size: 2rem;
line-height: 2.5rem;
width: 2.5rem;
height: 2.5rem;
border-bottom: 2px solid black;
}

#win-lose-container{
-webkit-border-radius: .2rem;
-moz-border-radius: .2rem;
border-radius: .5rem;
min-width: 2.5rem;
line-height: 2.5rem;
background-color: #00a5a5;
text-align: center;
cursor: pointer;
text-align: center;
margin-top: 5rem;
}

+ 38
- 0
19-quiz/README.md View File

@@ -0,0 +1,38 @@
## Oefeningen Quizr:
#### Doel:
Een simpele quiz spel met Juist/Fout vragen.

- Er zijn steeds 10 vragen die elk nieuw spel in een willekeurige volgorde worden getoond.
- De antwoorden (of ze al dan niet correct zijn) worden bijgehouden in:
`<div class="result tag is-dark is-large">Vraag 01</div>`
dit element heeft drie mogelijke standen:
- nog niet beantwoord, met de class: `is-dark`
- correct beantwoord, met de class: `is-success`
- fout beantwoord, met de class: `is-danger`
- Het aantal correcte antwoorden word bijgehouden in:
`<span id="total-correct">1</span>`
- De vraag wordt getoond in:
```
<div id="question" data-index="5">
Een vraag...
</div>
```
De index van de houdige vraag wordt bijgehouden in `data-index="0"`
- Antwoorden doe je door te klikken op:
`<a id="answer-true" class="answer button is-success is-medium">True</a>`
of
`<a id="answer-false" class="answer button is-danger is-medium">False</a>`
- Wanneer alle vragen beantwoord zijn wordt in plaats van een vraag het resultaat getoond.
Als er dan op de `#answer-true` knop wordt geklikt begint het spel opnieuw.
De oplossing staat in de map `ex-06_quizr/solution` open dit in je browser om te kijken hoe het
programma hoort te werken.

Succes!!





+ 59
- 0
19-quiz/index.html View File

@@ -0,0 +1,59 @@
<!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>Quizr</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>

<body>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Quizr
</h1>
</div>
</div>
</section>
<section class="columns is-gapless">
<aside class="column is-one-quarter">
<div id="result-container">
<div class="result tag is-dark is-large">Vraag 01</div>
<div class="result tag is-dark is-large">Vraag 02</div>
<div class="result tag is-dark is-large">Vraag 03</div>
<div class="result tag is-dark is-large">Vraag 04</div>
<div class="result tag is-dark is-large">Vraag 05</div>
<div class="result tag is-dark is-large">Vraag 06</div>
<div class="result tag is-dark is-large">Vraag 07</div>
<div class="result tag is-dark is-large">Vraag 08</div>
<div class="result tag is-dark is-large">Vraag 09</div>
<div class="result tag is-dark is-large">Vraag 10</div>
</div>
<div id="total-container">
<span id="total-correct">1</span>/10
</div>
</aside>
<main class="column">
<div id="question-container">
<div id="question" data-index="-1">
</div>
<div id="answer-container">
<a id="answer-true" class="answer button is-success is-medium">True</a>
<a id="answer-false" class="answer button is-danger is-medium">False</a>
</div>
</div>
</main>
</section>
<script src="script.js"></script>
</body>
</html>

+ 107
- 0
19-quiz/script.js View File

@@ -0,0 +1,107 @@
const questions = [{
question: 'Linus Torvalds created Linux and Git.',
correctAnswer: 'True',
}, {
question: 'The programming language "Python" is based off a modified version of "JavaScript".',
correctAnswer: 'False',
}, {
question: 'The logo for Snapchat is a Bell.',
correctAnswer: 'False',
}, {
question: 'RAM stands for Random Access Memory.',
correctAnswer: 'True',
}, {
question: '"HTML" stands for Hypertext Markup Language.',
correctAnswer: 'True',
}, {
question: 'In most programming languages, the operator ++ is equivalent to the statement "+= 1".',
correctAnswer: 'True',
}, {
question: 'The Windows 7 operating system has six main editions.',
correctAnswer: 'True',
}, {
question: 'The Windows ME operating system was released in the year 2000.',
correctAnswer: 'True',
}, {
question: 'The NVidia GTX 1080 gets its name because it can only render at a 1920x1080 screen resolution.',
correctAnswer: 'False',
}, {
question: 'Linux was first created as an alternative to Windows XP.',
correctAnswer: 'False',
}];

let count = 1;
const correcteAntwoorden = document.getElementById("total-correct");
const question = document.getElementById("question")
let questionCounter = question.getAttribute("data-index")
let teller = 0;
const falseBtn = document.getElementById("answer-false").addEventListener("click", trueFalseClick);
const trueBtn = document.getElementById("answer-true").addEventListener("click", trueFalseClick);

init(questions);

question.innerHTML = questions[teller].question;

function init(questions) {
for (let i = questions.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[questions[i], questions[j]] = [questions[j], questions[i]];
}
console.log(questions)
return questions;
}

function trueFalseClick() {
showQuestions();
const resultTag = document.getElementById("result-container").getElementsByTagName('div');
questionCounter++;
console.log(teller);
const arrayAnswer = questions[questionCounter].correctAnswer;
console.log(arrayAnswer);

if(this.innerHTML === "False"){
if(this.innerHTML === arrayAnswer) {
correcteAntwoordenTeller();
resultTag[teller -1].setAttribute("class", "result tag is-success is-large");
}else {
resultTag[teller -1].setAttribute("class", "result tag is-danger is-large");
}
}

if(this.innerHTML === "True") {
if(this.innerHTML === arrayAnswer) {
correcteAntwoordenTeller();
resultTag[teller -1].setAttribute("class", "result tag is-success is-large");
}else {
resultTag[teller -1].setAttribute("class", "result tag is-danger is-large");
}
}
}

function showQuestions() {
if(teller === 9) {
console.log("win-conditie") //win-conditie maken
question = correcteAntwoorden.innerHTML;
document.getElementById("answer-true").addEventListener('click', buttonRestart);
}else{
teller++;
let arrayQuestion = questions[teller].question;
question.innerHTML = arrayQuestion;
}

}


function correcteAntwoordenTeller() {
count++;
correcteAntwoorden.innerHTML = count;
}

function buttonRestart() {
count = 1;
teller = 0;
questionCounter = -1;
init(questions);
}


+ 39
- 0
19-quiz/style.css View File

@@ -0,0 +1,39 @@
#result-container{
display: flex;
flex-direction: column;
border: 5px solid #4a4a4a;
padding: .375rem .75rem;
}

.result {
margin: .375rem 0;
}

#total-container{
background-color: #363636;
color: #f5f5f5;
text-align: center;
font-size: 1.25rem;
padding: .75rem;
}

#question-container{
border: 5px solid #4a4a4a;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#question{
font-size: 2rem;
text-align: center;
}

#answer-container{
display: flex;
justify-content: center;
}

#answer-container .button{
margin: 0 1rem;
}

Write Preview
Loading…
Cancel
Save