JS Test

by hutber

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;   
}

.found {
    color: pink;
}

JavaScript

/**
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
----------------------------------------------------------------
*/
var changeColor = function(elements){   
    //old compatiable verison
    for(var i = 0; elements.length > i; i++){
        var el = elements[i];
        el.style.backgroundColor = '#fff';
    };
    //if we don't have support ie8 =< Seems easier to read imo
    Object.keys(elements).forEach(function(el, index){
        var el = elements[index];
        el.style.backgroundColor = 'red';
    });
};
changeColor(document.getElementById('question1').getElementsByTagName('div'));



/**
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
----------------------------------------------------------------
*/    

var findMe = document.getElementById('parentDiv').getElementsByClassName('findMe')

    Object.keys(findMe).forEach(function(el, index){
        var el = findMe[index],
            className = el.className; //get class name so we don't remove findMe
        
        el.className += ' found'; //Add found
    });

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