JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div id="content">
    <div id="sidebar">
        <ul>
            <li> <a href="" class="js-in-link" data-tracking-type="1">Tracked Link 1</a>

            </li>
            <li> <a href="" class="js-in-link" data-tracking-type="2">Tracked Link 2</a>

            </li>
            <li> <a href="" class="js-in-link" data-tracking-type="3">Tracked Link 3</a>

            </li>
        </ul>
    </div>
    <div id="main-content">
        <p>Dolor consuetudium putamus nunc illum at. Qui vel accumsan zzril odio
            feugait. Iriure nobis aliquam est qui nam. Est ii ad et quod consuetudium.
            Eu vero tation placerat illum dolore. Suscipit saepius aliquip commodo
            erat me. Consequat littera autem anteposuerit ullamcorper dolor. Legunt
            doming dignissim facer futurum quinta. Consuetudium ad magna tempor ut
            suscipit. Typi aliquam ex esse quarta qui.</p>
    </div>
</div>

SCSS

// Quick and simple layout
* {
    margin: 0;
    padding: 0;
}
body {
    background: #eee;
    font-family:"ITC Garamond", Garamond, sans-serif;
}
#header {
    background: #e3da9d;
    padding: 15px 0 15px 15px;
}
#content {
    padding: 15px 30px 0 0;
}
#main-content {
    margin-left: 175px;
    max-width: 600px;
}
#sidebar {
    width: 145px;
    float: left;
    padding: 0 0 0 15px;
}
#sidebar ul {
    list-style: inside;
}

JavaScript

// Rough example of my implementation of an analytic tracker
// Using a promise to make sure the link is completely generated
// before being handed off to the backend service to store it

$(function () {

    var InTracker = {
        init: function () {
            this.bindAllTrackedLinks();
        },

        bindAllTrackedLinks: function () {
            var self = this,
                $body = $('body'),
                $link = $('.js-in-link');

            $link.on('click', $body, function () {
                var $link = $(this);
                self.constructUrl($link);
                return false;
            });
        },

        // Constructs the url
        constructUrl: function ($link) {
            var trackingType = Number($link.data('tracking-type'));
            var paramsToSend = '?foo=1&bar=2&baz=3'

            $.when(paramsToSend).then(

            function (value) {
                $('body').append('yay got our value time to post to server' + value);
            });
        },

        // This is meant to be a basic router which will determine
        // which type of request based on a numeric value that's attached
        // to every tracking event in the form of a `data-tracking-type` attribute
        // these could be very basic or very specific
        handleTrackingType: function (trackingType) {
            switch (trackingType) {
                case 1:
                    // handle case 1
                    // e.g. this.clickedOn(DATA);
                    // the `DATA` as the param could be
                    // additional data stuck into a `data-` attribute
                    // on the link that was clicked (in addition to the tracking
                    // type of course)...
                    this.clickedOnLink();
                case 2:
                    // handle case 2
                    // e.g. this.clickedOff();
                case 3:
                    // handle case 3
                    // (e.g. closed...