Desafío de JavaScript:¡Hazme azul!

¿Crees que sabes JavaScript y jQuery? ¡Demuéstralo aceptando nuestro desafío! Te enfrentarás a enemigos, jefes y divs más que suficientes para hacer llorar a un desarrollador web adulto. Necesitará habilidades locas de JavaScript y jQuery, y un descanso para almorzar para terminarlos todos. ¿Y la mejor parte? ¡Parecerá que estás trabajando!

$.fn.blue = function(){ 

    if(this.filter('.bomb').length) return _FAIL('You triggered a bomb!');

    for(var i=0; i < this.length; i++){
        if( this.eq(i).data('_BOMB') ) return _FAIL('You triggered a bomb!');
    }

    this.addClass('blue');
    _VALIDATE(this);
    return this;
}
var evil = {
    armBomb: function(el){ el.addClass('bomb'); el.data('_BOMB', true); },
    disarmBomb: function(el){ el.removeClass('bomb'); el.data('_BOMB', false); },
    unBlue: function(el){ el.removeClass('blue'); }
};

$('.bomb').each(function(){
    $(this).data('_BOMB', true);
});

body{background-color:#fcfcfc;padding:40px;text-align:center;}
ul {list-style:none;}
ul li, div{width:50px;height:50px;background-color:#ccc;display:inline-block;color:#fff; font-family:sans-serif; line-height:50px; text-align:center;}
.blue{background-color:#5babcd;}
.bomb{background-color:#df463f;}
span, i{display:inline-block;min-width:20px;min-height:10px;}
tutorialzine reto 0% Comparte tu puntuación Twitter Facebook G+

Las reglas

El desafío consta de 10 misiones que se ejecutan en nuestro increíble editor de código. Cada editor tiene varias pestañas con código, pero todas excepto una están bloqueadas. Deberá usar sus habilidades e ingenio de JavaScript para aprobarlos.

  • Puede usar cualquier función de jQuery que desee.
  • Utilice nuestro .blue() Método jQuery para hacer que los elementos sean azules.

Y eso es por las reglas. ¡Comencemos con la primera misión!

1. Las identificaciones son fáciles

Tu desafío es hacer que el #yo div azul. Dado que es el primero, seguimos adelante y lo hicimos por usted. Simplemente elimine el comentario de la línea en la pestaña JS y presiona Ejecutar . ¡Solo si la programación real fuera tan fácil!

<div id="me"></div>
// Write your JS code in this pane. The first one is on us:
// $('#me').blue();
_VALIDATE = function(){
    if($('#me').hasClass('blue')){
        _SUCCESS();
    }
    else _FAIL();
}
// Timeout failure:
setTimeout(_FAIL, 100);

Y después de esa victoria fácil, pasemos a algo más desafiante.

2. Así son las clases..

¿Has oído hablar de estas cosas llamadas clases? ¡Impresionante! Haz el elemento con el .wants-to-be-blue nombre de clase azul, como hiciste en el div en el primer desafío.

<div></div>
<div></div>
<div class="wants-to-be-blue"></div>
<div></div>
// Write your JS here
_VALIDATE = function(){

    var blue = $('.blue');
    var shouldBe = $('div:eq(2)');

    if(blue.length == 1 && shouldBe.length == 1 && shouldBe.is('.blue')){
        _SUCCESS();
    }
    else _FAIL();
}
// Timeout failure:
setTimeout(_FAIL, 100);

3. La lista desordenada

¡No hay nada que te detenga! ¿Que tal este? ¡Haz que el elemento LI con el comentario (pero solo ese LI) sea azul!

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li><!-- Make me blue! --></li>
    <li></li>
    <li></li>
</ul>
// Write your JS here
_VALIDATE = function(){

    var blue = $('.blue');
    var shouldBe = $('li:eq(3)');

    if(blue.length == 1 && shouldBe.length == 1 && shouldBe.is('.blue')){
        _SUCCESS();
    }
    else _FAIL();
}
// Timeout failure:
setTimeout(_FAIL, 100);

4. ¡HTML traicionero por delante!

Tu jQuery-fu es fuerte. ¿Quizás necesitas algo un poco más difícil? Las reglas son las mismas que antes:haga que los elementos con comentarios sean azules.

<section>
    <p>Treacherous HTML ahead!</p>

    <div id="make-me-blue">
        <!-- Make me blue! -->
    </div>

    <div></div>

    <div><!-- Make me blue! --></div>
</section>

<section>

    <p>Can you make this span blue too? <span><!-- Make me blue! --></span></p>
    <p>But not <span>this one!</span></p>

    <div></div>

    <p>Yes, I know, HTML can be mean sometimes. But it is not on purpose! 
        <span>Or is <i>it?</i> <i><!-- Make me blue! --></i></span></p>

    <div><div><!-- Make me blue! --></div></div>
</section>
// Write your JS here
_VALIDATE = function(){

    if( $('.blue').length == 5 && $('section:first div:eq(0)').is('.blue') && $('section:first div:eq(2)').is('.blue') 
        && $('section:last p:eq(0) span').is('.blue') && $('section:last p:last span i:last').is('.blue') 
        && $('section:last div div').is('.blue') ){

        _SUCCESS();

    }
};
setTimeout(_FAIL, 100);

5. ¡Cuidado con el orden!

Este es complicado. Convierta los divs en azules, pero en el orden de los números que contienen.

<!-- Make all these divs blue in the correct order -->

<div>6</div>
<div>2</div>
<div>7</div>
<div>5</div>
<div>9</div>
<div>4</div>
<div>8</div>
<div>1</div>
<div>3</div>
// Write your JS here
_VALIDATE = function(elem){

    var num = parseInt(elem.text(), 10);

    if(isNaN(num)){
        return _FAIL();
    }

    for(var i = 0; i < num; i++){
        if( !$('div:contains(' + (i+1) + ')').is('.blue') ) return _FAIL('Wrong order!');
    }

    if( $('div.blue').length == 9 ){
        _SUCCESS();
    }
};
setTimeout(_FAIL, 1000);

6. ¡Cuidado con las bombas!

Hagamos las cosas más interesantes. Algunos divs son "bombas". Intentar hacerlos azules resultará en que se apaguen. Así que tienes que pensar en una forma de convertir todos los :not bomb divs en azules (¿entendido?;).

<!-- Make all divs blue *except* the bombs. -->

<div></div>
<div class="bomb"></div>
<div></div>
<div class="bomb"></div>
<div></div>
<div></div>
<div class="bomb"></div>
<div></div>
<div></div>
<div class="bomb"></div>
// Write your JS here
_VALIDATE = function(){

    if( $('.blue').length == 6 && $('div.blue').length == 6 ){

        _SUCCESS();

    }
};
setTimeout(_FAIL, 100);

7. ¡Tienes enemigos!

Pero, ¿qué es la vida sin enemigos? Ver al ENEMIGO pestaña en el editor? Contiene código JS que no puede editar. Léelo detenidamente para superar este desafío. Consejo:setTimeout es tu amigo!

// Your enemy's JS

var div = $('<div>'),
    container = $('section');

setTimeout(function(){
    container.append(div);
}, 1000);
<section>
    <!-- Your enemy will append a div here. Make it blue! -->
</section>
// Write your JS here
_VALIDATE = function(){

    if( $('.blue').length == 1 && $('section div').is('.blue') ){

        _SUCCESS();

    }
};
setTimeout(_FAIL, 2500);

8. La velocidad lo es todo

Los enemigos tienen acceso a un objeto especial - maldad . Contiene todo tipo de métodos nefastos que están diseñados para hacerte la vida miserable. ¡Pero cada enemigo tiene su debilidad!

// Your enemy's JS

var div = $('div'),
    button = $('button');

// Only enemies have access to evil.* functions.
evil.armBomb(div);

button.on('click', function(){
    evil.disarmBomb(div);
});

setTimeout(function(){
    button.off('click');
}, 100);
<button>Click me, fast!</button>
<div><!-- Make me blue --></div>
// Write your JS here
_VALIDATE = function(){

    if( $('.blue').length == 1 && $('div').is('.blue') ){

        _SUCCESS();

    }
};
setTimeout(_FAIL, 1000);

9. Aleatorización

Esta vez, el enemigo elegirá 5 identificadores aleatorios y los colocará en el elemento p. Tu trabajo es analizar su contenido y convertir esos 5 elementos en azules.

// Your enemy's JS

var ids = 'edno dve tri chetiri pet shest sedem osem devet deset'.split(' ');

// Randomize the array (somewhat)
ids.sort(function() {
    return .5 - Math.random();
});

$('#map').text(ids.slice(0, 5).join(' '));
<p id="map">
    <!-- This paragraph will be populated with randomly generated IDs -->
</p>

<div id="edno"></div>
<div id="dve"></div>
<div id="tri"></div>
<div id="chetiri"></div>
<div id="pet"></div>
<div id="shest"></div>
<div id="sedem"></div>
<div id="osem"></div>
<div id="devet"></div>
<div id="deset"></div>
// Write your JS here
_VALIDATE = function(){

    var ids = $('#map').text().split(' ');

    if(ids.length !== 5) return _FAIL();

    var selected = $('div.blue').filter( function(id){ return ids.indexOf(this.id) != -1 });

    if( $('.blue').length == 5 && selected.length == 5 ){
        _SUCCESS();
    }
};
setTimeout(_FAIL, 1000);

10. Pelea de jefes

¡Buen trabajo, soldado! Estamos impresionados. Has alcanzado el nivel que convierte a los hombres en héroes. Tu misión es hacer que todos los divs en la página sean azules, pero ten cuidado:hay dos jefes que mueven bombas. ¿Podrás derrotarlos?

// Boss 1

var delay = 0,
    position = 0,
    divs = $('div');

setTimeout(moveBomb, delay);

function moveBomb(){

    evil.disarmBomb(divs.eq(position));

    setTimeout(function(){

        position++;

        if(position >= divs.length){
            position = 0;
        }

        evil.unBlue(divs.eq(position));
        evil.armBomb(divs.eq(position));

        setTimeout(moveBomb, 500);

    }, 100);

};
// Boss 2

var delay = 50,
    position = 5,
    divs = $('div');

setTimeout(moveBomb, delay);

function moveBomb(){

    evil.disarmBomb(divs.eq(position));

    setTimeout(function(){

        position++;

        if(position >= divs.length){
            position = 0;
        }

        evil.unBlue(divs.eq(position));
        evil.armBomb(divs.eq(position));

        setTimeout(moveBomb, 500);

    }, 100);

};
<!-- Make all divs blue! -->

<div class="bomb"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="bomb"></div>
<div></div>
<div></div>
<div></div>
<div></div>
// Write your JS here
_VALIDATE = function(){

    if( $('.blue').length == 10 && $('div.blue').length == 10 ){

        // hackerishly clear all timeouts
        var t = setTimeout(function(){}, 10);
        for(var i = 0; i < t; i++) clearTimeout(i);

        _SUCCESS();
    }
};
setTimeout(_FAIL, 10000);