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

08-EX03

08-EX03
Jessy Bruyneel 4 years ago
parent
3ab26a743f
commit
4b1c2a4104
11 changed files with 37 additions and 460 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
    120
      02-floats/Positioning.html
  6. 0
    9
      07-javascript-intro/scripts/logger.js
  7. 0
    131
      07-javascript-intro/scripts/main.js
  8. 0
    0
      08-EX03/.prettierrc
  9. 0
    15
      08-EX03/index.html
  10. 37
    0
      08-EX03/scripts/main.js
  11. 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
- 120
02-floats/Positioning.html View File

@@ -1,120 +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: positionering</title>
<link rel="stylesheet" href="style-positionering.css" type="text/css">
</head>

<body>
<div class="container">
<div class="relative">

</div>
<div class="absolute">

</div>
<div class="fixed">

</div>
</div>
<p> According to all known laws
of aviat
there is no way a bee
should be able to
Its wings are too small to get
its fat little body off the gro
The bee, of course, flies an
because bees don't care
what humans think is impossi
Yellow, black. Yellow, black.
Yellow, black. Yellow, bla
Ooh, black and yellow!
Let's shake it up a litt
Barry! Breakfast is rea
Ooming!
Hang on a second.
Hello?
- Barry?
- Ada
- Oan you believe this is happening?
- I can't. I'll pick you up.
Looking sharp.
Use the stairs. Your father
paid good money for those.
Sorry. I'm excited.
Here's the graduate.
We're very proud of you, son.
A perfect report card, all B's.
Very proud.
Ma! I got a thing going here.
- You got lint on your fuzz.
- Ow! That's me!
</p>
<div class = "sticky">

</div>
<p>
- Wave to us! We'll be in row 118,000.
- Bye
Barry, I told you,
stop flying in the house
- Hey, Adam.
- Hey, Barry
- Is that fuzz gel?
- A little. Special day, graduation
Never thought I'd make it
Three days grade school,
three days high school
Those were awkward
Three days college. I'm glad I took
a day and hitchhiked around the hive.
You did come back different.
- Hi, Barry.
- Artie, growing a mustache? Looks good.
- Hear about Frankie?
- Yeah.
- You going to the funeral?
- No, I'm not going.
Everybody knows,
sting someone, you die.
Don't waste it on a squirrel.
Such a hothead.
I guess he could have
just gotten out of the way.
I love this incorporating
an amusement park into our day.
That's why we don't need vacations.
Boy, quite a bit of pomp...
under the circumstances.
- Well, Adam, today we are men.
- We are!
- Bee-men.
- Amen!
Hallelujah!
Students, faculty, distinguished bees,
please welcome Dean Buzzwell.
Welcome, New Hive Oity
graduating class of...
...9:15.
That concludes our ceremonies.
And begins your career
at Honex Industries!
Will we pick ourjob today?
I heard it's just orientation.
Heads up! Here we go.
Keep your hands and antennas
inside the tram at all times.
- Wonder what it'll be like?
- A little scary.
</p>
</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