How to Create a Dropdown Menu With CSS and Unordered List – Dropbox Challenge for Web Engineer Wannabies

| Comments

I’ve been using Dropbox since its debut in September 2008. I’ve tried many different synchronization tools (not to mention sad years when using USB drive has been an only option to keep data in sync between computers), none of them turned out to be as efficient, easy to use, cross-system as Dropbox which I can honestly recommend you. In its free version you have 2GB of online storage which can be extended to 5GB and still remain free, by its referral system, where you receive +250MB of quota for each person who signs up with Dropbox, after receiving invitation from you. For my needs it is more then enough and I suppose it will be just fine for the most of the usages. For those worried about security of keeping your private files online info on Dropbox security measures page should allow you sleeping as a baby (really, not like in the joke where person sleeping like a baby wakes every hour and cries for at least 15 minutes).

Just recently, I’ve run into their job offering posted online, Web Engineer position at Dropbox. Besides usual information like roles, responsibilities, requirements, etc… they have posted two challenges solutions to which you should submit along with your resume. Not a rocket surgery exactly, but I wanted to share with you my solutions the these problems. And so it goes:

  1. Problem: Given the following JavaScript code, explain why it only alerts –1 and provide the fix so it would work as expected (display the countdown from 5 to 0).
The code to be analyzed
1
2
3
4
5
6
7
8
 function countdown (num) {
        for (var i = 0; i <= num; i += 1) {
            setTimeout(function () {
                alert(num - i);
            }, i * 1000);
        }
    }
    countdown(5);

Solution: Such behavior is a result of nesting setTimeout function inside of the countdown function and how Javascript is interpreting this code. There’s a lot to be explain regarding closures, so not getting too much into the details – with such function nesting when countdown is run with parameter 5 (countdown(5);) ‘for’ loop executes and since i is declared outside of the setTimeout function, all of the alert(num - i) calls are referencing the same variable in the memory - i - which by the time when alert function is executed has value of 4. Hence the results. In order to have it fixed we need to change this code into:

The answer
1
2
3
4
5
6
7
 function countdown (num) {
        for (var i = 0; i <= num; i += 1) {
            setTimeout(function () {
                alert(num - i);
            }**(i)**, i * 1000);
        }
    }

This change causes alert functions to be called on each of the iterations of the for loop, effectively running the code with i values from 0 to 4. I’m not sure how detailed explanation Dropbox’s recruiter would require from you, but I assume knowing what’s going on there and most importantly being able to fix the behavior counts the most. This leaves us with no other option than to move to challenge number 2.

  1. Problem:Given the HTML for a unordered list of unordered lists, create the .css which would turn it in a dropdown menu.
    Solution:

Comments