JSFiddle - React, Tailwind, and code Playground

by turiyag

HTML

<html>
    <head>
    </head>
    
    <body>
        <div id="console">
            <h2>Console</h2>
        </div>
        <div id="content">
            <a class="searchengine" href="http://www.google.com">Google</a>
            <a class="store" href="http://www.amazon.com">Amazon</a>
            <a class="social" href="http://www.facebook.com">Facebook</a>
            <a class="social" href="http://www.twitter.com">Twitter</a>
        </div>
    </body>
</html

CSS

div {
    border: 1px solid black;
}

#console {
    background: #DDF;
}

#console h2 {
    font-size: 1.5em;
}

JavaScript

$(function() {
    //Maps this function to all <a> elements that are children of the element with the id "content"
    //That have the "searchengine" class
    $("#content a.searchengine").click(function(event) {
        log($(this).text() + " is a search engine");
        event.preventDefault();
    });
    //Maps this function to all <a> elements that are children of the element with the id "content"
    //That DO NOT have the "searchengine" class
    $("#content a:not(.searchengine)").click(function(event){
        log($(this).text() + " is NOT a search engine");
        event.preventDefault();
    });
    //Maps this function to all <a> elements that are children of the element with the id "content"
    $("#content a").click(function(event) {
        log("You clicked a link!");
        event.preventDefault();
    });
});

function log(msg) {
    $("#console").append("<pre>" + msg + "</pre");
}