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

clone Korneel

master
Lennart Coppens 4 years ago
commit
2cec3b8c76
29 changed files with 1011 additions and 0 deletions
Split View Show Diff Stats
  1. 2
    0
      .vscode/settings.json
  2. 39
    0
      01-html-css-intro/index.html
  3. 41
    0
      01-html-css-intro/style.css
  4. 29
    0
      02-floats/floats.css
  5. 22
    0
      02-floats/floats.html
  6. 41
    0
      03-positioning/positioning.css
  7. 45
    0
      03-positioning/positioning.html
  8. 54
    0
      04-EX01/ex-01.css
  9. 26
    0
      04-EX01/ex-01.html
  10. 46
    0
      05-flex/flex.css
  11. 20
    0
      05-flex/flex.html
  12. BIN
      06-EX02/images/Exercise.png
  13. BIN
      06-EX02/images/bg-image.png
  14. BIN
      06-EX02/images/pic01.jpg
  15. BIN
      06-EX02/images/pic02.jpg
  16. BIN
      06-EX02/images/pic03.jpg
  17. 160
    0
      06-EX02/index.html
  18. 194
    0
      06-EX02/style.css
  19. 6
    0
      07-javascript-intro/.prettierrc
  20. 32
    0
      07-javascript-intro/index.html
  21. 39
    0
      07-javascript-intro/scripts/ex-03.result.js
  22. 9
    0
      07-javascript-intro/scripts/logger.js
  23. 88
    0
      07-javascript-intro/scripts/main.js
  24. 23
    0
      07-javascript-intro/styles/main.css
  25. 6
    0
      08-EX03/.prettierrc
  26. 18
    0
      08-EX03/index.html
  27. 9
    0
      08-EX03/scripts/logger.js
  28. 39
    0
      08-EX03/scripts/main.js
  29. 23
    0
      08-EX03/styles/main.css

+ 2
- 0
.vscode/settings.json View File

@@ -0,0 +1,2 @@
{
}

+ 39
- 0
01-html-css-intro/index.html View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>HTML/CSS - 001: Html documents</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<h1>Title</h1>
<p>Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf
Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf </p>
<div class="first">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="second">
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</div>
<div class="third">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQoW0JuJXTeLUEdMGw3-GStCzaj05CQCBrUpDs7fhQr829_jyuI"
alt="Een kat">
</div>
</body>

</html>

+ 41
- 0
01-html-css-intro/style.css View File

@@ -0,0 +1,41 @@
html {
font-family: verdana;
}

h1 {
font-size: 30px;
font-weight: bold;
text-align: center;
background-color: red;
color: white;
}

p {
font-size: 20px;
}

div {
margin: 8px;
}

.first {
width: 30%;
background-color: darkgoldenrod;
border: 5px solid lightcoral;
}

.second {
width: 50%;
background-color: olivedrab;
border: 5px dashed maroon;
}

.third {
width: 70%;
background-color: mediumspringgreen;
border: 5px solid gold;
}

.third img {
width: 100%;
}

+ 29
- 0
02-floats/floats.css View File

@@ -0,0 +1,29 @@
.div-1, .div-2, .div-3 {
width: 25%;
height: 50px;
box-sizing: border-box;
float: left;
}

.div-1 {
border: 3px solid orchid;
height: 55px;
}

.div-2 {
border: 3px solid aquamarine;
}

.div-3 {
border: 3px solid indianred;
}

.clear {
clear: both;
}

.container {
background-color: lightblue;
width: 60%;
margin: 0 auto;
}

+ 22
- 0
02-floats/floats.html View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Positioning: Float</title>
<link rel="stylesheet" href="floats.css" type="text/css" />
</head>

<body>
<div class="container">
<div class="div-1"></div>
<div class="div-2"> </div>
<div class="div-3"></div>
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
<div class="clear"></div>
</div>
</body>

</html>

+ 41
- 0
03-positioning/positioning.css View File

@@ -0,0 +1,41 @@
html {
font-size: 30px;
}

.container {
background-color: gold;
position: relative;
}

.relative {
height: 150px;
background-color: hotpink;
position: relative;
left: 10px;
top: -20px;
}

.absolute {
background-color: maroon;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}

.fixed {
height: 175px;
width: 100%;
background-color: navy;
position: fixed;
top: 20px;
}

.sticky {
height: 50px;
width: 100%;
background-color: palevioletred;
top: 10px;
position: sticky;
}

+ 45
- 0
03-positioning/positioning.html View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Positioning: Positioning</title>
<link rel="stylesheet" href="positioning.css" type="text/css" />
</head>

<body>
<div class="container">
<div class="relative">
</div>
<div class="absolute">
</div>
<div class="fixed">
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<div class="sticky"></div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>

</body>

</html>

+ 54
- 0
04-EX01/ex-01.css View File

@@ -0,0 +1,54 @@
header {
position: fixed;
height: 50px;
width: 100%;
top: 0;
left: 0;
background-color: darkorange;
}

.logo {
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
width: 10%;
background-color: lightgray;
}

nav {
position: absolute;
left: 5px;
top: 5px;
bottom: 5px;
width: 75%;
background-color: lightgray;
padding: 5px;
box-sizing: border-box;
}

.nav-item {
float: left;
width: 20%;
background-color: royalblue;
height: 100%;
border: 2px solid greenyellow;
box-sizing: border-box;
}

main {
width: 100%;
height: 500px;
background-color: saddlebrown;
margin: 60px 0;
position: relative;
}

.lower {
position: absolute;
top: 10px;
bottom: -10px;
left: 10px;
right: 10px;
background-color: aquamarine;
}

+ 26
- 0
04-EX01/ex-01.html View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Exercise 1: Float</title>
<link rel="stylesheet" href="ex-01.css" type="text/css" />
</head>

<body>
<header>
<div class="logo"></div>
<nav>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
</nav>
</header>
<main>
<div class="lower"></div>
</main>
</body>

</html>

+ 46
- 0
05-flex/flex.css View File

@@ -0,0 +1,46 @@
.container {
background-color: bisque;
padding: 10px;
display: flex;
height: 500px;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
}

.container div {
line-height: 40px;
font-size: 20px;
color: white;
text-align: center;
}

.div-1 {
background-color: darkseagreen;
flex: 2 0 200px;
order: 5;
}

.div-2 {
background-color: darkslateblue;
flex: 1 1 100px;
order: 2;
}

.div-3 {
background-color: darkviolet;
flex: 1 1 100px;
order: 1;
}

.div-4 {
background-color: dimgray;
flex: 1 1 100px;
order: 4;
}

.div-5 {
background-color: darkorange;
flex: 1 1 100px;
order: 3;
}

+ 20
- 0
05-flex/flex.html View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Positioning: Flex</title>
<link rel="stylesheet" href="flex.css" type="text/css" />
</head>

<body>
<div class="container">
<div class="div-1">1</div>
<div class="div-2">2</div>
<div class="div-3">3</div>
<div class="div-4">4</div>
<div class="div-5">5</div>
</div>
</body>

</html>

BIN
06-EX02/images/Exercise.png View File


BIN
06-EX02/images/bg-image.png View File


BIN
06-EX02/images/pic01.jpg View File


BIN
06-EX02/images/pic02.jpg View File


BIN
06-EX02/images/pic03.jpg View File


+ 160
- 0
06-EX02/index.html View File

@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Exercise 2: Flex</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400,500&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/9953f27da4.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<header>
<div class="logo">Industrious</div>
<nav>
Menu
</nav>
</header>
<section class="banner">
<h1>INDUSTRIOUS</h1>
<p>HIer staat een beetje tekst een beetje tekst een beetje tekst</p>
<p>HIer staat een beetje tekst maar dan nog wat langer een beetje tekst</p>
</section>
<section class="icons">
<div class="intro">
<h2>SEM TURPIS AMET SEMPER</h2>
<p>Lorem ipsum dolor sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit? amet consectetur
adipisicing elit. Praesentium fuga non deleniti aspernatur autem
quidem odit, necessitatibus dolorum labore id.</p>
</div>
<div class="icons-grid grid">
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-address-card-o fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-files-o fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-floppy-o fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-line-chart fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-paper-plane-o fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-qrcode fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
</div>
</section>
<section class="red-section">
<div class="intro">
<h2>CURABITUR ULLAMCORPER ULTRICIES</h2>
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non
faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan
varius montes viverra nibh in adipiscing. Lorem ipsum dolor vestibulum ante ipsum primis in faucibus
vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing sed feugiat eu faucibus. Integer
ac sed amet praesent. Nunc lacinia ante nunc ac gravida.</p>
</div>
</section>
<section class="testimonials">
<div class="intro">
<h2>FAUCIBUS CONSEQUAT LOREM</h2>
<p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis
commodo ornare aliquet accumsan erat tempus amet porttitor.</p>
</div>
<div class="testimonials-grid grid">
<div class="testimonial grid-item">
<blockquote>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non
mi integer non faucibus.</blockquote>
<div class="writer">
<div class="round-image"></div>
<p>- <span class="red">Jane Doe</span> CEO - ABC Inc.</p>
</div>
</div>
<div class="testimonial grid-item">
<blockquote>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non
mi integer non faucibus.</blockquote>
<div class="writer">
<div class="round-image"></div>
<p>- <span class="red">Jane Doe</span> CEO - ABC Inc.</p>
</div>
</div>
<div class="testimonial grid-item">
<blockquote>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non
mi integer non faucibus.</blockquote>
<div class="writer">
<div class="round-image"></div>
<p>- <span class="red">Jane Doe</span> CEO - ABC Inc.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="content">
<section>
<h3>Accumsan montes viverra</h3>
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non
faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan
varius montes viverra nibh in adipiscing. Lorem ipsum dolor vestibulum ante ipsum primis in faucibus
vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing sed feugiat eu faucibus.
Integer ac sed amet praesent. Nunc lacinia ante nunc ac gravida.</p>
</section>
<section>
<h4>Sem turpis amet semper</h4>
<ul class="alt">
<li><a href="#">Dolor pulvinar sed etiam.</a></li>
<li><a href="#">Etiam vel lorem sed amet.</a></li>
<li><a href="#">Felis enim feugiat viverra.</a></li>
<li><a href="#">Dolor pulvinar magna etiam.</a></li>
</ul>
</section>
<section>
<h4>Magna sed ipsum</h4>
<ul class="plain">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Github</a></li>
</ul>
</section>
</div>
<div class="copyright">
© Untitled. Photos <a href="https://unsplash.co">Unsplash</a>, Video <a href="https://coverr.co">Coverr</a>.
</div>
</footer>
</body>

</html>

+ 194
- 0
06-EX02/style.css View File

@@ -0,0 +1,194 @@
html {
font-size: 16px;
font-family: 'Raleway', sans-serif;
color: rgb(73, 73, 73);
}

* {
margin: 0;
box-sizing: border-box;
}

a {
text-decoration: none;
color: inherit;
}

ul {
list-style: none;
padding: 0;
}

body {
margin: 0;
}


h2 {
font-size: 2.2rem;
font-weight: 300;
line-height: 6rem;
text-transform: uppercase;
}

h3 {
font-size: 1.3rem;
line-height: 4.8rem;
font-weight: 300;
text-transform: uppercase;
}

h4 {
font-size: 1rem;
line-height: 3.2rem;
font-weight: 300;
text-transform: uppercase;
}



p {
font-size: 1rem;
line-height: 1.6rem;
}

header {
height: 3rem;
background-color: black;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
}

.logo {
font-weight: 600;
}

nav {
color: rgb(219, 219, 219);
}

.banner {
height: 35rem;
background-image: url(images/bg-image.png);
background-size: cover;
display: flex;
color: white;
flex-direction: column;
justify-content: center;
align-items: center;
}

.banner h1 {
font-size: 4rem;
font-weight: 300;
line-height: 7rem;
}

.banner p {
font-size: 1.5rem;
line-height: 2.5rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.65);
}

.icons {
padding: 5rem;
}

.intro {
margin: 3rem auto;
width: 75%;
text-align: center;

}

.grid {
margin: 3rem auto;
width: 75%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}

.grid-item {
padding: 3rem 0;
flex: 0 1 27%;
}

.icon-item {
text-align: center;
}

.red {
color: rgb(204, 41, 41);
}

.red-section {
background-color: rgb(204, 41, 41);
color: white;
padding: 5rem;
}

.testimonials {
padding: 5rem;
}

.testimonial blockquote {
padding: .5rem 0 .5rem 2rem;
font-size: 1.2rem;
line-height: 1.8rem;
font-style: italic;
margin: 1.5rem 0;
border-left: .5rem solid darkgrey;
}

.writer {
display: flex;
align-items: center;
justify-content: space-between;
}

.writer p {
font-size: .8rem;
}

.writer p span {
font-weight: 600;
}

.round-image {
height: 3.5rem;
width: 3.5rem;
border-radius: 50%;
background-image: url(images/pic01.jpg);
background-size: cover;
}

footer {
padding: 5rem;
background-color: black;
color:white;
}

.content {
width: 75%;
margin: 0 auto;
display: flex;
}

.content section {
flex: 1 1 25%;
padding-right: 3rem;
}

.content section:first-child {
flex: 2 1 50%;
}

.copyright {
width: 75%;
margin: 0 auto;
}

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

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

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

@@ -0,0 +1,32 @@
<!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>07-javascript-intro</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div id="logger"></div>

<div id="app">
<button id="btn">Klik op mij toe plies!!</button>
</div>

<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 id="oef-3-timer">**</p>
<button id="oef-btn-3">Get 300!</button>
</div>
<script src="scripts/main.js"></script>
</body>
</html>

+ 39
- 0
07-javascript-intro/scripts/ex-03.result.js View File

@@ -0,0 +1,39 @@
let attempt = 0;
let time = 0;
let goal = 300;
let gameOver = false;
let oefThreeDiv = document.getElementById('oefenen-3');
let oefThreePar = document.getElementById('oef-3-timer');
let oefThreeBtn = document.getElementById('oef-btn-3');

function timer() {
time++;
}

let countInterval = setInterval(timer, 10);

function stopTimer(event) {
console.log('click');
if (gameOver) {
gameOver = false;
countInterval = setInterval(timer, 10);
oefThreeBtn.innerHTML = 'Get ' + goal + '!';
oefThreePar.innerText = '**';
time = 0;
} else {
clearInterval(countInterval);
oefThreePar.innerHTML = time;
gameOver = true;
attempt++;
let newPar = document.createElement('p');
if (time === goal) {
newPar.innerHTML = '<p>Poging ' + attempt + ': you won!!</p>';
} else {
newPar.innerHTML = '<p>Poging ' + attempt + ': you lost!!</p>';
}
oefThreeDiv.appendChild(newPar);
oefThreeBtn.innerText = 'Try again';
}
}

oefThreeBtn.addEventListener('click', stopTimer);

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

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

@@ -0,0 +1,88 @@
let foo = {};
let propName = 'bar';

foo.bar = 5;
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');
}

btn.addEventListener('click', clickedBtn);

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

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

oefBtn.addEventListener('click', oefClick);

let count = 0;
let oefTwoDiv = document.getElementById('oefenen-2');
let oefTwoBtn = document.getElementById('oef-btn-2');
let clearBtn = document.getElementById('clear-btn-2');

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

function clearCount(event) {
let oefTwoPars = document.querySelector('#oefenen-2 p');
console.log(oefTwoPars);
for (let i = 0; i < oefTwoPars.length; i++) {
oefTwoPars[i].remove();
}
count = 0;
}

// function intervalFunction() {
// console.log('nu');
// }

// let interval = setInterval(intervalFunction, 1000);

// clearInterval(interval);

oefTwoBtn.addEventListener('click', oefTwoClick);
clearBtn.addEventListener('click', clearCount);

let count2 = 0;
let oefThreeDiv = document.getElementById('oefenen-3');
let oefThreePar = document.querySelector('#oefenen-3 p');
let oefThreeBtn = document.getElementById('oef-btn-3');

function timer() {
count2++;
}

let interval = setInterval(timer, 10);

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

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

@@ -0,0 +1,23 @@
html {
font-size: 15px;
font-family: sans-serif;
}

div {
margin: 4rem auto;
width: 80%;
max-width: 50rem;
text-align: center;
padding: 3rem;
border: 0.4rem solid gold;
}

button {
width: 100%;
line-height: 2rem;
font-weight: 600;
background-color: teal;
color: lightblue;
border: none;
margin: 0.5rem 0;
}

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

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

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

@@ -0,0 +1,18 @@
<!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>07-javascript-intro</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div id="oefenen-3">
<p id="oef-3-timer">**</p>
<button id="oef-btn-3">Get 300!</button>
</div>

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

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

@@ -0,0 +1,39 @@
let attempt = 0;
let time = 0;
let goal = 300;
let gameOver = false;
let oefThreeDiv = document.getElementById('oefenen-3');
let oefThreePar = document.getElementById('oef-3-timer');
let oefThreeBtn = document.getElementById('oef-btn-3');

function timer() {
time++;
}

let countInterval = setInterval(timer, 10);

function stopTimer(event) {
console.log('click');
if (gameOver) {
gameOver = false;
countInterval = setInterval(timer, 10);
oefThreeBtn.innerHTML = 'Get ' + goal + '!';
oefThreePar.innerText = '**';
time = 0;
} else {
clearInterval(countInterval);
oefThreePar.innerHTML = time;
gameOver = true;
attempt++;
let newPar = document.createElement('p');
if (time === goal) {
newPar.innerHTML = '<p>Poging ' + attempt + ': you won!!</p>';
} else {
newPar.innerHTML = '<p>Poging ' + attempt + ': you lost!!</p>';
}
oefThreeDiv.appendChild(newPar);
oefThreeBtn.innerText = 'Try again';
}
}

oefThreeBtn.addEventListener('click', stopTimer);

+ 23
- 0
08-EX03/styles/main.css View File

@@ -0,0 +1,23 @@
html {
font-size: 15px;
font-family: sans-serif;
}

div {
margin: 4rem auto;
width: 80%;
max-width: 50rem;
text-align: center;
padding: 3rem;
border: 0.4rem solid gold;
}

button {
width: 100%;
line-height: 2rem;
font-weight: 600;
background-color: teal;
color: lightblue;
border: none;
margin: 0.5rem 0;
}

Write Preview
Loading…
Cancel
Save