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

07-javascript-intro

07-javascript-intro
emieldkr 4 years ago
parent
fab1124f5b
commit
96199496ff
7 changed files with 175 additions and 0 deletions
Split View Show Diff Stats
  1. 3
    0
      01-html-css-intro/debug.log
  2. 6
    0
      07-javascript-intro/.prettierrc
  3. 3
    0
      07-javascript-intro/debug.log
  4. 36
    0
      07-javascript-intro/index.html
  5. 9
    0
      07-javascript-intro/scripts/logger.js
  6. 91
    0
      07-javascript-intro/scripts/main.js
  7. 27
    0
      07-javascript-intro/styles/main.css

+ 3
- 0
01-html-css-intro/debug.log View File

@@ -0,0 +1,3 @@
[1021/133753.744:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1021/133753.745:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1021/133753.745:ERROR:crash_report_database_win.cc(469)] failed to stat report

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

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

+ 3
- 0
07-javascript-intro/debug.log View File

@@ -0,0 +1,3 @@
[1021/125419.648:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1021/125419.649:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1021/125419.649:ERROR:crash_report_database_win.cc(469)] failed to stat report

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

@@ -0,0 +1,36 @@
<!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" type="text/css" />

<title>07-javascript-intro</title>
</head>
<body>
<div id="logger"></div>

<div id="app"></div>

<button id="button">Klik op mij, plies!!!</button>

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

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

<div id="oefenen-3">
<p>0</p>
<button id="start-btn-3">Start the timer!</button>
<button id="oef-btn-3">Get 10!</button>
</div>

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

+ 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;
};

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

@@ -0,0 +1,91 @@
let foo = {};

foo.bar = 5;

let array = [1, 2, 3, 4, 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;
console.log(newPar);
appDiv.appendChild(newPar);
}

let btn = document.getElementById('button');

function clickedBtn(event) {
console.log('click');
}

btn.addEventListener('click', clickedBtn);

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

oefBtn.addEventListener('click', function(event) {
let newPar = document.createElement('p');
newPar.innerHTML = 'text';
oefenDiv.appendChild(newPar);
});

let oefenDiv2 = document.getElementById('oefenen-2');
let oefBtn2 = document.getElementById('oef-btn-2');
let counter = 0;

oefBtn2.addEventListener('click', function(event) {
let newPar = document.createElement('p');
counter++;
newPar.innerHTML = counter;
oefenDiv2.appendChild(newPar);
});

let clearBtn = document.getElementById('clear-btn-2');
clearBtn.addEventListener('click', function(event) {
let x = document.querySelectorAll('#oefenen-2 p');
// Array.prototype.forEach.call(x, function(node) {
// node.parentNode.removeChild(node);
// });

for (let i = 0; i < x.length; i++) {
x[i].remove();
}
counter = 0;
});

let oefenDiv3 = document.getElementById('oefenen-3');
let oefBtn3 = document.getElementById('oef-btn-3');
let startBtn3 = document.getElementById('start-btn-3');
let timer = 0;
let pTag = document.querySelector('#oefenen-3 p');
let interval;
let attemptCounter = 0;

startBtn3.addEventListener('click', function(event) {
timer = 0;
function intervalFunction() {
pTag.innerHTML = '***';
timer++;
}
interval = setInterval(intervalFunction, 1000);
});

oefBtn3.addEventListener('click', function(event) {
pTag.innerHTML = timer;
attemptCounter++;
if (timer == 10) {
let newPar = document.createElement('p');
newPar.innerHTML = 'Attempt ' + attemptCounter + ' : you win!';
oefenDiv3.appendChild(newPar);
clearInterval(interval);
} else {
let newPar = document.createElement('p');
newPar.innerHTML = 'Attempt ' + attemptCounter + ' : you loose!';
oefenDiv3.appendChild(newPar);
clearInterval(interval);
}
});

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

@@ -0,0 +1,27 @@
p {
text-align: center;
}

button {
background-color: #310e818e;
color: rgb(255, 255, 255);
border-radius: 12px;
border: solid thick pink;
width: 100%;
margin: 1px 0;
}

div {
margin: 5px;
}

body {
background-color: rgba(0, 255, 191, 0.26);
}

#oefenen,
#oefenen-2,
#oefenen-3 {
padding: 50px;
border: solid thick green;
}

Write Preview
Loading…
Cancel
Save