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

07-js

master
Simondb 4 years ago
parent
2610c8ba9f
commit
5e69aa3658
7 changed files with 219 additions and 0 deletions
Split View Show Diff Stats
  1. 6
    0
      07-javascript-intro/.prettierrc
  2. 33
    0
      07-javascript-intro/index.html
  3. 17
    0
      07-javascript-intro/oef3.html
  4. 9
    0
      07-javascript-intro/scripts/logger.js
  5. 117
    0
      07-javascript-intro/scripts/main.js
  6. 36
    0
      07-javascript-intro/scripts/oef3.js
  7. 1
    0
      07-javascript-intro/styles/main.css

+ 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" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="logger"></div>
<div id="app"></div>
<button id="btn">Klik op mij toe!</button>

<div id="oefenen">
<button id="oef-btn">Moet zien ik kan iets!</button>
<p>Text</p>
</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="oefening3">
<button id="oef-btn-3">Get 10!</button>
</div>

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

+ 17
- 0
07-javascript-intro/oef3.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>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="oef3">
<p id="win"></p>
<button id="btn"></button>
</div>
<script src="scripts/oef3.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;
};

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

@@ -0,0 +1,117 @@
// //GLOBAL SCOPE

// let x = 5;

// function test() {
// let y = 6;
// }

// if (true) {
// var q = 8;
// let z = 7;
// }

// logger(x);
// logger(y);
// logger(q);
// logger(z);

let foo = {
bar: 5,
};
let propName = 'bar';

foo.bir = 6;
foo['boo'] = 4;
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);
}

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

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

//oef

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

function clickedBtnOef(event) {
let newPar = document.createElement('p');
newPar.innerHTML = 'Text';
console.log(newPar);
oefDiv.appendChild(newPar);
}

btnoef.addEventListener('click', clickedBtnOef);

//oef2
let oefDiv2 = document.getElementById('oefenen2');
let btnoef2 = document.getElementById('oef-btn-2');
let clearoef2 = document.getElementById('clear-btn-2');

let count = 0;
function clickedBtnOef2(event) {
let newPar = document.createElement('p');
count++;
newPar.innerHTML = count;
console.log(newPar);
oefDiv2.appendChild(newPar);
}

btnoef2.addEventListener('click', clickedBtnOef2);

function clickedClearOef2(event) {
let oefTwoPars = document.querySelectorAll('#oefenen2 p');
console.log(oefTwoPars);
for (let i = 0; i < oefTwoPars.length; i++) {
oefTwoPars[i].remove();
}
count = 0;
}

clearoef2.addEventListener('click', clickedClearOef2);

// interval voorbeeld

/*function intervalFunction() {
console.log('nu');
}
let interval(intervalFunction, 1000);
clearInterval(interval); */

//oef 3

let countOef3 = 0;

let oefDiv3 = document.getElementById('oefening3');
let btnoef3 = document.getElementById('oef-btn-3');
let oefThreePar = document.querySelector('#oefening3 p');
let counter = 0;

function timer() {
counter++;
}
let Interval = (timer, 10);

function clickedBtnOef3(event) {
oefThreePar.innerHTML = count;
}

btnoef3.addEventListener('click', clickedBtnOef3);

+ 36
- 0
07-javascript-intro/scripts/oef3.js View File

@@ -0,0 +1,36 @@
let count = 0;
let attempts = 0;
let timer = setInterval(autoTime, 1);
let win = 500;

let btnMsg = 'Click the button when you think the time is right!';

let btn = document.getElementById('btn');
let div = document.getElementById('oef3');
let p = document.getElementById('win');

btn.innerHTML = btnMsg;

function clickedBtnOef3(event) {
attempts = attempts + 1;

let par = document.createElement('p');
par.innerHTML =
'Attemt ' +
attempts +
': ' +
(count == win ? 'You won ' : 'You lost ') +
'You clicked at: ' +
count;
div.appendChild(par);

clearInterval(timer);
count = 0;
timer = setInterval(autoTime, 1);
}

btn.addEventListener('click', clickedBtnOef3);

function autoTime() {
count = count + 1;
}

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

@@ -0,0 +1 @@


Write Preview
Loading…
Cancel
Save