JessyBruyneel
/
FrontEnd
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge

09-forms
Jessy Bruyneel 4 years ago
parent
28d7a32817 4b1c2a4104
commit
4b55d2cbc5
10 changed files with 37 additions and 340 deletions
Split View Show Diff Stats
  1. 0
    97
      01-html-css-intro/index.html
  2. 0
    45
      01-html-css-intro/style.css
  3. 0
    14
      01-html-css-intro/styletest.html
  4. 0
    29
      02-floats/Floats.html
  5. 0
    9
      07-javascript-intro/scripts/logger.js
  6. 0
    131
      07-javascript-intro/scripts/main.js
  7. 0
    0
      08-EX03/.prettierrc
  8. 0
    15
      08-EX03/index.html
  9. 37
    0
      08-EX03/scripts/main.js
  10. 0
    0
      08-EX03/styles/main.css

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

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

<head>
<meta charset = "utf-8">
<title>HTML/CSS - 001: HTML documents</title>
<!-- CSS aanspreken met een style tag -->
<style>
/* hier schrijf ik CSS */
/* dit identificeert wat ik wil stijlen */
h1.geel {
color: black;
}
h1.geel span {
color:deeppink;
}
.geel {
color:red;
background-color: goldenrod;
}
.blauw {
color:red;
background-color: aqua;
}
/* classes identificeren met een "." id's met een "#" */
/* volgorde wordt gerespecteerd */
</style>

<!-- meesteal wordt het CSS bestand ergens anders opgesteld en dan op deze manier naar gelinked -->
<link rel="stylesheet" href="style.css" type="text/css">

<!-- als je zowel een extern CSS bestand als style tags als in line styling hebt dan is de volgorde respectievelijk -->
</head>

<body>
<header>
<!-- Page contents.-->
<h1 class="geel">Header <span>met een span</span></h1>
<h1 class="blauw">andere styling als vorige h1 <span>die ook een span heeft</span></h1>
<h2>tot 6 ofzo</h2>
</header>

<main>
<p>
paragraaf ......... einde paragraaf....paragraaf ......... einde paragraaf
paragraaf ......... einde paragraaf....paragraaf ......... einde paragraaf
paragraaf ......... einde paragraaf....paragraaf ......... einde paragraaf
paragraaf ......... einde paragraaf....paragraaf ......... einde paragraaf
</p>
<ul>
<li>item 1</li>
<li>unordered list 2</li>
</ul>
<ol>
<li>ordered list</li>
<button>knop in de lijst</button>

</ol>
<button>knop</button>
</main>

<footer>
<div>dit is een div</div>
<span>dit is een span</span>

<!-- self explanatory allemaal block elementen dit gaan we gaan overrulen met CSS-->
<ul>
<li>div</li>
<li>main</li>
<li>header</li>
<li>footer</li>
<li>section</li>
<li>article</li>
<li>aside</li>
<li>nav</li>
</ul>
<!-- attributen -->
<!-- divs hebben een id en een class id's mogen maar 1 maal gebruikt worden classes meerdere malen-->
<div id = "div-1" class = "type-of-div">

</div>
<!-- Image source kan een path of een URL zijn alt is ter identificatie -->
<img src="D:\Afbeeldingen\VennAStatement.png" alt="een diagram over katten">

<!-- link href niet source maar ook een path of een URL target is waar de browser de link moet openen-->
<a href="D:\Afbeeldingen\VennAStatement.png" target="blank">
klik hier voor een diagram over katten
</a>
</footer>
</body>


</html>

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

@@ -1,45 +0,0 @@
html{
font-family: sans-serif;
font-size: 20px;
line-height: 30px;
font-weight: bold;
text-decoration: underline;
text-align: center;
}

body {
height: 500px;
font-size: 30px;
}

header {
background-color: red;
height: 50px;

}

main {
background-color: green;
font-size: 20px;
padding: 30px;
border: 6px solid black; /*-width -style -color */
margin: 100px;
}

main p {
height: 2rem;
width: 800px;
box-sizing: border-box
}

footer {
background-color: blue;
height: 50px;
width: 30vh;
}

ul {
list-style-type: circle ;
}

.class1 * {}

+ 0
- 14
01-html-css-intro/styletest.html View File

@@ -1,14 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"><meta charset = "utf-8">
<title>bla</title>

<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<header></header><main></main><footer></footer>
<p>ik ben tekst <span>en</span> ik ook</p>
</body>
</html>

+ 0
- 29
02-floats/Floats.html View File

@@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<!--
floats (niet voor lay-out bedoeld)
position (niet voor lay-out bedoeld)
flex-box (voor lay-out bedoeld)
grids (voor lay-out bedoeld)
-->

<head>
<meta charset="utf-8" />
<title>positionering: Float</title>
<link rel="stylesheet" href="style-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= "clear"></div>
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
<div class= "clear"></div>
</div>
</body>

</html>

+ 0
- 9
07-javascript-intro/scripts/logger.js View File

@@ -1,9 +0,0 @@
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;
};

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

@@ -1,131 +0,0 @@
// declareren van een object
// let foo = {
// bar: 5,
// };

// dit declareert ook een object
let foo = {};
let propName = 'bar';

// dit verandert een property van een object
foo.bar = 5;
foo['bar'] = 5;
foo[propName] = 5;

let nenArray = [1, 2, 3, 4, 5];
nenArray[3] = 6;

let appDiv = document.getElementById('app');

console.log(appDiv);

appDiv.innerHTML = 'mahow zeg tis ier javascript enol';

// tellen tot 100 met javascript.
// for (let i = 0; i < 100; i++) {
// let newPar = document.createElement('p');
// newPar.innerHTML = i;
// console.log(newPar);
// appDiv.appendChild(newPar);
// }

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

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

btn.addEventListener('click', clickedBtn);

// dit is hetzelfde als bovenstaand
// btn.addEventListener('click', function(event) {
// console.log('click');
// });

let oefenBtn = document.getElementById('oef-btn');
let oefenen = document.getElementById('oefenen');
// Browser maakt dit automatisch beschikbaar,nog steeds is het bad practise om dat niet zelf op te vragen

function clickedOefen(event) {
let newText = document.createElement('p');
newText.innerHTML = 'Willekeurige tekst';
oefenen.appendChild(newText);
}
function dblClickedOefen(event) {
let newText = document.createElement('p');
newText.innerHTML = 'Verdorie hedde jij gedubbelclicked';
oefenen.appendChild(newText);
}

oefenBtn.addEventListener('dblclick', dblClickedOefen);
oefenBtn.addEventListener('click', clickedOefen);

//teller moet buiten de functie gedeclareerd worden door de scope v/e functie
let telBtn = document.getElementById('tel-btn');
let tellen = document.getElementById('tellen');
let teller = 0;

function clickedTellen(event) {
let newText = document.createElement('p');
newText.innerHTML = teller;
tellen.appendChild(newText);
teller++;
}

let clearBtn = document.getElementById('clear-btn');

function clickedClear(event) {
let tellerPars = document.querySelectorAll('#tellen p');
for (i = 0; i < tellerPars.length; i++) {
tellerPars[i].remove();
}
teller = 0;
}

telBtn.addEventListener('click', clickedTellen);
clearBtn.addEventListener('click', clickedClear);

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

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

let counter = 0;
let count = document.getElementById('oefening-3');
let countBtn = document.getElementById('oef-btn-3');
let clrCount = document.getElementById('clr-oef-3');
let hint = document.getElementById('hint');
let result = document.getElementById('oef-3-timer');
let interval = setInterval(countInterval, 100);

function countInterval() {
counter++;
}

function countClicked() {
let newText = document.createElement('p');
result.innerHTML = counter;
if (count == 100) {
}
count.appendChild(newText);
clearInterval(interval);
counter = 0;
interval = setInterval(countInterval, 100);
}
function clearCount() {
let tellerPars = document.querySelectorAll('#oefening-3 p');
for (i = 0; i < tellerPars.length; i++) {
tellerPars[i].remove();
}
}
function displayHint() {
let newText = document.createElement('p');
newText.innerHTML = 'It takes exactly 10 seconds';
count.appendChild(newText);
}

countBtn.addEventListener('click', countClicked);
clrCount.addEventListener('click', clearCount);
hint.addEventListener('click', displayHint);

07-javascript-intro/.prettierrc → 08-EX03/.prettierrc View File


07-javascript-intro/index.html → 08-EX03/index.html View File

@@ -7,21 +7,6 @@
<link rel="stylesheet" href="styles/main.css" type="text/css" />
</head>
<body>
<div id="logger"></div>

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

<button id="btn">Klik op mij</button>

<div class="container" id="oefenen">
<button id="oef-btn">Ik doe echt iets</button>
<p>Willekeurige tekst</p>
</div>
<div class="container" id="tellen">
<button id="tel-btn">Ik kan tellen</button>
<button id="clear-btn">Weg weg weg!</button>
</div>

<div id="oefening-3">
<p id="oef-3-timer">**</p>
<button id="oef-btn-3">get 100!</button>

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

@@ -0,0 +1,37 @@
let counter = 0;
let count = document.getElementById('oefening-3');
let countBtn = document.getElementById('oef-btn-3');
let clrCount = document.getElementById('clr-oef-3');
let hint = document.getElementById('hint');
let result = document.getElementById('oef-3-timer');
let interval = setInterval(countInterval, 100);

function countInterval() {
counter++;
}

function countClicked() {
let newText = document.createElement('p');
result.innerHTML = counter;
if (count == 100) {
}
count.appendChild(newText);
clearInterval(interval);
counter = 0;
interval = setInterval(countInterval, 100);
}
function clearCount() {
let tellerPars = document.querySelectorAll('#oefening-3 p');
for (i = 0; i < tellerPars.length; i++) {
tellerPars[i].remove();
}
}
function displayHint() {
let newText = document.createElement('p');
newText.innerHTML = 'It takes exactly 10 seconds';
count.appendChild(newText);
}

countBtn.addEventListener('click', countClicked);
clrCount.addEventListener('click', clearCount);
hint.addEventListener('click', displayHint);

07-javascript-intro/styles/main.css → 08-EX03/styles/main.css View File


Write Preview
Loading…
Cancel
Save