JavaScriptová výzva:Make Me Blue!

Myslíte si, že znáte JavaScript a jQuery? Dokažte to tím, že přijmete naši výzvu! Budete čelit nepřátelům, šéfům a více než dost divům, aby se dospělý webový vývojář rozplakal. Budete potřebovat šílené dovednosti JavaScriptu a jQuery a přestávku na oběd, abyste je všechny dokončili. A nejlepší část? Bude to vypadat, jako byste pracovali!

$.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 výzva 0 % Sdílejte své skóre Twitter Facebook G+

Pravidla

Výzva se skládá z 10 misí, které běží v našem úžasném editoru kódu. Každý editor má několik karet s kódem, ale všechny kromě jedné jsou zamčené. Budete muset použít své dovednosti a vynalézavost JavaScriptu, abyste je zvládli.

  • Můžete použít jakoukoli funkci jQuery, kterou chcete.
  • Použijte naše .blue() Metoda jQuery, aby byly prvky modré.

A to kvůli pravidlům. Začněme první misí!

1. ID jsou snadné

Vaším úkolem je vytvořit #me div modrá. Protože je to vaše první, šli jsme do toho a udělali jsme to za vás. Stačí odkomentovat řádek na kartě JS a stiskněte Spustit . Jen kdyby skutečné programování bylo tak snadné!

<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);

A po této snadné výhře přejděme k něčemu náročnějšímu.

2. Stejně tak třídy..

Takže jste slyšeli o těchto věcech, které se nazývají třídy? Úžasný! Vytvořte prvek pomocí .wants-to-be-blue jméno třídy modré, jako jste to udělali na div v první výzvě.

<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. Neuspořádaný seznam

Nic vás nezastaví! A co tenhle? Udělejte prvek LI s komentářem (ale pouze to LI) modrým!

<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. Zrádné HTML vpřed!

Váš jQuery-fu je silný. Možná potřebujete něco trochu obtížnějšího? Pravidla jsou stejná jako dříve – prvky s komentáři označte modře.

<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. Pozor na pořadí!

Tenhle je záludný. Otočte divy modře, ale v pořadí čísel, která obsahují.

<!-- 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. Pozor na bomby!

Udělejme věci zajímavějšími. Některé divy jsou "bomby". Pokus o jejich zmodrání způsobí, že zhasnou. Takže musíte vymyslet způsob, jak změnit všechny :ne bombové divy na modro (máte nápovědu?;).

<!-- 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. Máte nepřátele!

Ale co je život bez nepřátel? Podívejte se na ENEMY kartu v editoru? Obsahuje kód JS, který nemůžete upravovat. Přečtěte si jej pozorně, abyste tuto výzvu zvládli. Tip:setTimeout je tvůj přítel!

// 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. Rychlost je všechno

Nepřátelé mají přístup ke speciálnímu předmětu – zlu . Obsahuje všemožné nekalé metody, které jsou navrženy tak, aby vám ztrpčovaly život. Ale každý nepřítel má svou slabost!

// 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. Randomizace

Tentokrát si nepřítel vybere 5 náhodných id a umístí je do prvku p. Vaším úkolem je analyzovat jeho obsah a obarvit těchto 5 prvků na modro.

// 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. Boj s bossem

Skvělá práce, vojáku! Jsme ohromeni. Dosáhli jste úrovně, která mění muže v hrdiny. Vaším úkolem je zmodrat všechny divy na stránce, ale pozor – jsou zde dva bossové, kteří posouvají bomby. Dokážete je porazit?

// 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);