JavaScript Challenge: Make Me Blue!

Share the joy

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

You think you know JavaScript and jQuery? Prove it by taking our challenge! You will face enemies, bosses and more than enough divs to make a grown web developer cry. You will need mad JavaScript and jQuery skills, and a lunch break to finish them all. And the best part? It will look as if you’re working!  

The rules

The challenge consists of 10 missions that run in our awesome code editor. Each editor has a number of tabs with code, but all except one are locked. You will need to use your JavaScript skills and ingenuity to pass them.

• You  can use any jQuery function that you’d like.


• Use our .blue() jQuery method to make elements blue.

And that’s for the rules. Let’s start with the first mission!

1. IDs are easy

Your challenge is to make the #me div blue. Since it’s your first one, we went ahead and did it for you. Just uncomment the line in the JS tab and hit Run. Only if real programming was that easy!

(Play with our code editor on Tutorialzine.com)

And after that easy win, let’s move to something more challenging.

2. So are classes..

So you’ve heard about these things called classes? Awesome! Make the element with the .wants-to-be-blue class name blue, like you did on the div in the first challenge.

(Play with our code editor on Tutorialzine.com)

3. The unordered list

There is no stopping you! How about this one? Make the LI element with the comment (but only that LI) blue!

(Play with our code editor on Tutorialzine.com)

4. Treacherous HTML ahead!

Your jQuery-fu is strong. Maybe you need something a bit more difficult? The rules are the same as before – make the elements with comments blue.

(Play with our code editor on Tutorialzine.com)

5. Mind the order!

This one is tricky. Turn the divs blue, but in the order of the numbers they contain.

(Play with our code editor on Tutorialzine.com)

6. Beware of the bombs!

Let’s make things more interesting. Some divs are “bombs”. Attempting to make them blue will result in them going off. So you have to think of a way to turn all :not bomb divs blue (got the hint? ;).

(Play with our code editor on Tutorialzine.com)

7. You’ve got enemies!

But what is life without enemies? See the ENEMY tab in the editor? It holds JS code that you cannot edit. Read it carefully in order to pass this challenge. Tip: setTimeout is your friend!

(Play with our code editor on Tutorialzine.com)

8. Speed is everything

Enemies have access to a special object – evil. It contains all sorts of nefarious methods that are designed to make your life miserable. But every enemy has their weakness!

(Play with our code editor on Tutorialzine.com)

9. Randomization

This time the enemy will choose 5 random ids and place them in the p element. Your job is to parse its contents, and turn those 5 elements blue.

(Play with our code editor on Tutorialzine.com)

10. Boss fight

Great job, soldier! We’re impressed. You’ve reached the level that turns men into heroes. Your mission is to make all divs on the page blue, but beware – there are two bosses that move bombs around. Can you defeat them?

(Play with our code editor on Tutorialzine.com)

Share the joy

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

JavaScript Challenge: Make Me Blue!