JSFiddle - React, Tailwind, and code Playground

by Victor

CSS

@import url(http://fonts.googleapis.com/css?family=Nixie+One);
.deago *, .deago *:before, .deago *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }


.deago div span {
    font-weight:bold;
    margin-left: 3px;
}
.deago .deago-title{
    font-size:130%;
    letter-spacing:2px;
}
.deago .loadedScripts span {
    width:100%;
    background: #444;
    padding:1px 10px;
    display:block
}
body {
    height:800px;
}

JavaScript

/*
Deago - Drop-in Plugin for page stats
*/
$.fn.deago = function() {
var insertBox = '<div class="deago"><div class="deago-title">Deago</div> <div class="winHeight">Window Height:<span></span></div> <div class="winWidth">Window Width: <span></span></div><div class="loadedScripts">Loaded Scripts: <span></span></div> <div class="scrollAmount">Scroll Amount: <span></span></div>    <div class="itemScrollAmount">Selected Scroll: <span></span></div> <div class="bodyHeight">Body Height: <span></span></div> <div class="bodyWidth">Body Width: <span></span></div><div class="bodyClass">Body Classes: <span></span></div><div class="bodyId">Body IDs: <span></span></div><div class="timeLoaded">Loaded for: <span></span></div></div>';
    
    var deagoStyle = 'background: #555;padding:10px;position:fixed;top:5px;left:5px;color:#fff;font-weight:normal;width:200px;border-radius:10px;font-size:12px;font-family:"Nixie One";line-height: 1.4;'

    $('body').append(insertBox);
  $('.deago').attr('style', deagoStyle);

   $('.winHeight span').html($(window).height());
   $('.winWidth span').html($(window).width());
   $('.bodyHeight span').html($('body').height());
   $('.bodyWidth span').html($('body').width());

$(window).resize(function(){
    $('.winHeight span').html($(this).height());
   $('.winWidth span').html($(this).width());
});
$(window).scroll(function(){
$('.scrollAmount span').html($(this).scrollTop());
});

$('head').children('script').each(function(){
var scriptSrc = $(this).attr('src');
    if(scriptSrc != null){
        $('.loadedScripts span').text((scriptSrc));
    };
});

if ($('body').hasClass()){
    $('.bodyClass span').html($(body).attr('class'));
} else {
   $('.bodyClass span').text('None'); 
};

    
};
$('body').deago();