6 changed files with 101 additions and 0 deletions
+ 6
- 0
08-EX03/.prettierrc
View File
| @@ -0,0 +1,6 @@ | |||
| { | |||
| "trailingComma": "es5", | |||
| "tabWidth": 4, | |||
| "semi": true, | |||
| "singleQuote": true | |||
| } | |||
+ 6
- 0
08-EX03/debug.log
View File
| @@ -0,0 +1,6 @@ | |||
| [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 | |||
| [1104/083148.920:ERROR:crash_report_database_win.cc(469)] failed to stat report | |||
| [1104/083148.920:ERROR:crash_report_database_win.cc(469)] failed to stat report | |||
| [1104/083148.920:ERROR:crash_report_database_win.cc(469)] failed to stat report | |||
+ 21
- 0
08-EX03/index.html
View File
| @@ -0,0 +1,21 @@ | |||
| <!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="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
08-EX03/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; | |||
| }; | |||
+ 32
- 0
08-EX03/scripts/main.js
View File
| @@ -0,0 +1,32 @@ | |||
| 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
08-EX03/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; | |||
| } | |||
Loading…