wdad5_oef1

In this example below you will see how to do a wdad5_oef1 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by maitehuylebroeck, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright maitehuylebroeck ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>wdad5_oef1</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul id="list1">
  <li class="a">item 1</li>
  <li class="a">item 2</li>
  <li class="b">item 3</li>
  <li class="b">item 4</li>
</ul>
<p class="a">Dit is paragraaf 1.</p>
<p>Dit is paragraaf 2.</p>
<p class="b">Dit is paragraaf 3.</p>
<p>Dit is paragraaf 4.</p>
<p class="a">Dit is paragraaf 5.</p>
<p class="b">Dit is paragraaf 6.</p>
<ul id="list2">
  <li class="a">item 1</li>
  <li class="a">item 2</li>
  <li class="b">item 3</li>
  <li class="b">item 4
  	<ul>
    	<li class="a">item 4-1</li>
        <li class="b">item 4-2</li>
        <li class="a">item 4-3</li>
        <li class="a">item 4-4</li>
    </ul>
  </li>
</ul>
<p>Dit is paragraaf 7.</p>
<p>Dit is paragraaf 8.</p>
<p>Dit is paragraaf 9.</p>
<div id="nav">
<a href="">lege link</a>
<a href="http://www.google.be">google</a>
<a href="index.html" title="homepagina">homepagina</a>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/maitehuylebroeck/wdad5_oef1-VpxXKd */
body {
  padding: 25px;
}
.a {color: #EF5B5B;}
.b {color: #5BC0EB;}
/*
p.b, li.b{
  background-color: #000;
}
*/

#list2 li {
  background-color: #00FFFF;
}

/*Downloaded from https://www.codeseek.co/maitehuylebroeck/wdad5_oef1-VpxXKd */

// oefening 1

//1.1 
//p elementen ophalen op basis van hun tagname
var elements = document.querySelectorAll('p');
var elements = document.getElementsByTagName('p');

// loopen door de verschillende elementnen 
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = "#00FF00";
}

//1.7 de 6e pragraaf
//6de paragraaf = index 5 
var paragraph6 = elements[5];paragraph6.style.color = '#0000FF';


//1.2
/*var elements2 = document.querySelectorAll('.a');
//var elements2 = document.getElementsByClassName('a');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = "#00FF00";
}*/


//1.3
var elements3 = document.querySelectorAll('#list1');
var element3 = elements3[0];
var element3 = document.querySelector('#list1');
var element3 = document.getElementById('list1');
element3.style.backgroundColor = "#FFFF00";


/*
var elements4 = document.querySelectorAll('p.b');
for (var i = 0; i < elements4.length; i++) {
  elements4[i].style.backgroundColor = "#000";
}
*/
 //1.4 alle p elementen MET klasse b
/*var elements5 = document.querySelectorAll('p.b, li.b');
for (var i = 0; i < elements5.length; i++) {
  elements5[i].style.backgroundColor = "#000";
}*/

//1.5

//1.6

//1.10
//alle even LIST-ITEM-ELEMENTEN slecteren 
var elements10 = document.querySelectorAll("li:nth-of-type(even)")
//terug een for loop om alle elementen een bepaalde achtergrondkleur te geven 

//1.11
for(var i = 3; i<7; i++){
  elements[i].style.backgroundColor = "brown";
}

//1.13 
var elements13 = document.querySelectorAll("[href='index.html']");
for (var i = 0; i < elements13.length; i++) {
  elements13[i].style.backgroundColor = "#000";
}

//1.14
var elements14 = document.querySelectorAll("[href^= 'http']");
for (var i = 0; i < elements14.length; i++) {
  elements14[i].style.backgroundColor = "#000";
}

//-------------------------------------------------------------\\
// oefening 2
//---------------------------------------------------------------\\

var nameElement = prompt('geef het type element in');
var textContent = prompt('geef de tekst in');

//maak een nieuw element aan van het type listitem
var newElement = document.createElement(nameElement);
//maak een text node aan
var newText = document.createTextNod(textContent);
//text node in het element steken
newElement.appenChild(nexText);

var divReslut = document.getElementById('divResult');
divResult.appendChild(newElement);

Comments