JS Test

by Blink

HTML

<div id="question1">
    <h3>Question 1</h3>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
</div>

<div id="question2">
    <h3>Question 2</h3>
    
    <a href="" class="findMe">Find me</a>
    
    <div id="parentDiv">	
        <a href="" class="findMe">Find me</a>
        <a href="" class="findMe">Find me</a>	
    </div>
</div>

CSS

#question1 div {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-bottom: 1px;
    background-color: black;
}

#question2 {
    clear: left;
}

#parentDiv a {
    background-color: #ccc;   
}

Babel + JSX

/**
Please fork this fiddle, complete the exercises and email your URL back to 
[email protected]

In addition to a working solution, we will be looking for:

- Good coding style
- Use of comments - especially if you get stuck on a question




Question 1 (html provided)
----------------------------------------------------------------
Without using 3rd party libraries write a function called 
changeColor that takes an array of elements and iterates through 
them changing the background colour
----------------------------------------------------------------
*/
changeColor(document.getElementById('question1').getElementsByTagName('div'));

function changeColor(elements) {
  // Convert NodeList to an Array to allow use of array methods
  // Newer browsers allow iterator methods on NodeList but 
  // spread works well with Babel
  elements = [...elements];
  return elements.map(elem => elem.style.backgroundColor = 'red');
}

/**
Question 2 (html provided)
----------------------------------------------------------------
Using jQuery or another lib (or if you are feeling brave dont 
use anything) can you get the elements with the class 'findMe' 
that are within the element 'parentDiv' and do the following: 

1. Give each element the class 'found'
2. Add a click event to each element that when clicked just 
logs the message 'found' to the console
----------------------------------------------------------------
*/    
!function () {
  const elements = [...document.querySelectorAll('#parentDiv .findMe')];
  const logMessage = (evt) => {
    evt.preventDefault();
    console.log('found');
  };
  
  elements.forEach(elem => {
    elem.classList.add('found');
    elem.addEventListener('click', logMessage, false);
  });
}();


/**
Question 3
----------------------------------------------------------------
Complete the below object so that it has the following:

1. A private variable called 'privateVar' with the value 'I am private'
2. A public variable called 'publicVar'...