JS Test

by james gotsell

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 


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(els) {
    
    //TODO - make this a param passed in?
    var newColour = "#efefef";

    for (var i = 0; i < els.length; i++) {
        els[i].style.backgroundColor = newColour;
    }    
    
}    




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

$(".findMe").addClass("found").click(function() {
    console.log("found");
});



/**
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' with the value 'I am public'
3. A private function called 'privateFnc' that when called outputs 'I am a private fnc'
4. A public function called 'publicFnc' that when called outputs 'I am a public fnc'
----------------------------------------------------------------
*/

/*

Basic approach to this problem is...