hace 4 años · 830fb6946a
--- a/index.html
+++ b/index.html
@@ -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>
--- a/main.css
+++ b/main.css
@@ -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;
 }

--- a/main.js
+++ b/main.js
@@ -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);