JS Test

by Charlie Vaughan

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

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

// Iterate through div elements applying colour to each
function changeColor(elements) {
 	
    // Array of background colours 
	var colours = ['red', 'green', 'blue', 'yellow' ];
    
    // Loop through elements
    for (i = 0; i < elements.length; i++) {
        // Apply background colour to matching element
        elements[i].style.backgroundColor = colours[i];
    }
}

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

// Iterate through matching elements applying class
// Bind event to elements
function bindEvents() {
    
    // Array or matching elements
    var buttons = document.getElementById('parentDiv').getElementsByTagName('a');
    
    // Loop through elements
    for (i = 0; i < buttons.length; i++) {
        
        var button = buttons[i];
        
        // Apply background colour to matching element
        button.className = button.className + " found";
    ...