Oefening variabelen 2018 uitwerking

In this example below you will see how to do a Oefening variabelen 2018 uitwerking with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rouws, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rouws ©
  • HTML
  • CSS
  • JavaScript
    <h1>Oefeningen met variabelen en datatypes</h1>

<p id='tja'></p>

<p class="anders"></p>

<img class="anders" src="" alt="" />

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>


/*Downloaded from https://www.codeseek.co/rouws/oefening-variabelen-2018-uitwerking-xYvmeE */
    body {
  font-family: sans-serif;
  color: lightgreen;
  font-weight: 100;
  background-color: black;
}
.red{
  color: red;
}


/*Downloaded from https://www.codeseek.co/rouws/oefening-variabelen-2018-uitwerking-xYvmeE */
    // deze code laten staan
var paragraaf1 = document.querySelector('p');
// declareer een variabele met als naam 'voornaam'
var voornaam;
// geef voornaam de waarde 'Sint Nicolaas'
voornaam = 'Sint Nicolaas';
// haal de hier direct onderstaande regel uit commentaar
paragraaf1.textContent = 'Gefeliciteerd'+ " " + voornaam + '! ';

//  declareer een variabele 'leeftijd' en geef hem direct in dezelfde regel de waarde 486
var leeftijd = 486;
// verander de waarde van leeftijd door er 1 bij op te tellen
leeftijd++;
// haal de hier direct onderstaande regel uit commentaar
paragraaf1.textContent += 'U bent ' + leeftijd + ' jaar oud geworden.';

// declareer een variabele 'paragraaf2' en gebruik querySelector om de tweede paragraaf 
// die al klaarstaat in de html te selecteren. Hint: gebruik een class-selector
var paragraaf2 = document.querySelector('.anders');
// verander de 'textContent' van 'paragraaf2' (ongeveer zoals in regel 8) om tekst
// in die paragraaf te zetten, namelijk 'Sint Nicolaas is een coole-suffe dude!' 
// paragraaf2.textContent = 'Sint Nicolaas is een coole-suffe dude!';
// kun je de vorige regel herschrijven en daarbij de variabele 'voornaam' gebruiken?
paragraaf2.textContent = "Sint Nicolaas is een suffe dude!";
// gebruik de '+=' operator (ongeveer als in regel 15) om nog wat meer tekst toe te 
// voegen aan de tweede paragraaf, verzin zelf de tekst
paragraaf2.textContent += " En nog wat tekst erbij";

// deze code laten staan
// een array met 3 waardes erin
var imgArray = ['https://s.s-bol.com/imgbase0/imagebase/large/FC/6/9/5/7/1004004013227596.jpg', 'https://pbs.twimg.com/profile_images/668521538174357504/oym8eCQY.jpg', 'https://pbs.twimg.com/profile_images/378800000609046283/5d9e8b68761d3ed37828b6a5d639cdb7_400x400.jpeg'];
// deze code selecteert de afbeelding die al in de HTML staat, dat hebben we nodig bij het volgende opdrachtje
var afbeelding = document.querySelector('img');

// pas onderstaande javascript regel zodat hij de eerste waarde van variabele imgArray uit regel 31 gebruikt
afbeelding.src = imgArray[0];
// BONUS opdracht
// gebruik querySelectorAll om alle 'li' uit de html te selecteren
// verander iets aan het eerste, derde en laatste li-tje
var lijst = document.querySelectorAll('li');
lijst[0].textContent = "Voetbal";
lijst[2].textContent = "Lego van Star Wars";
lijst[4].textContent = "loom spulletjes"

Comments