JS Test Part 1

by lucasprus

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

/**
There is no time limit (within reason) and just answer as many questions as you can.

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 (elementsArray) {
    var i, l;
    for (i = 0, l = elementsArray.length; i < l; i += 1) {
        elementsArray[i].style.backgroundColor = 'yellow';
    }
};

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

jQuery(function ($) {
    $("#parentDiv").find(".findMe").addClass('found').click(function (e) {
        e.preventDefault();
        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...