JSFiddle - React, Tailwind, and code Playground

by VesQ

HTML

<div id="tama-sisaltaa-kaiken" class="joku1 joku2">
</div>
<div class="joku1">
</div>
<div class="joku2">
</div>

CSS

/* Laitetaan kaikille joku koko ja reunus ja vähän marginia */
div {
    width: 100px;
    height: 100px;
    border: 1px dotted black;
    margin: 10px;
}

#tama-sisaltaa-kaiken {
    background-color: hsl(80, 50%, 30%);
}

/* Luokan joku1 sisältämät elementit saakoon tiputusvarjon */
.joku1 {
    box-shadow: 0 0 5px black;
}

/* Luokan joku2 sisältämät elementit olkoon osittain läpinäkyviä */
.joku2 {
    opacity: 0.5;
}
/* ...paitsi silloin kun hiiri on niiden päällä. */
.joku2:hover {
    opacity: 1;
}

JavaScript

// Suoritetaan jQueryn käynnistys vasta kun HTML-dokumentti on
// täysin latautunut selaimessa. Kun ready() funktio on valmis,
// kutsuu se parametrina annettua funktiota, jolloin se ajetaan.
$(document).ready(function () {
    // Nyt voidaan asettaa jotain tapahtuvaksi, kun "joku1"
    // sisältämää elementtiä klikataan. $-funktio (joka on vain
    // lyhenne jQuery-nimiselle funktiolle) ottaa parametrikseen
    // CSS:stä tuttuja valitsimia, jolloin se palauttaa JavaScript-
    // olion, objektin, joka sisältää kaikenlaista jännää tavaraa,
    // mm. eräänlaisia "metodeita". Yksi näistä on "click".
    $(".joku1").click(function () {
        // Tämä taas suoritetaan, kun klikkaus tapahtuu, ja jQuery
        // iskee maagiseen "this"-muuttujaan viittauksen siihen
        // elementtiin, jota juuri klikattiin. Jotta sitä saa
        // käskettyä kivasti jQueryllä, täytyy siitä tehdä kuitenkin
        // jQuery-olio, mikä tapahtuu tutusti $-funktiolla. Osaatte
        // ehkä arvata, mitä tämä tekee ;)
        $(this).fadeOut();
    });
});

// Mitä kaikkia juttuja oikeen voikaan jQueryllä tehdä heti?
// => http://api.jquery.com/