JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<head>
<title>Border Radius Fun — Shiny Demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maiden+Orange">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Gudea:400,700">
<link rel="stylesheet" href="styles/s.css" media="screen">
<link rel="stylesheet" href="styles/middlescreen.css" media="screen and (min-width: 20em)">
<link rel="stylesheet" href="styles/bigscreen.css" media="screen and (min-width: 30em)">
<link rel="stylesheet" href="/styles/panel.css">
</head>
<body id="cssbr">

<header><h1 id="demoname">Border Radius Fun</h1></header>
<section id="main">
    <p>
        <b id="tl" class="crnrsz">0px</b>
</p>

<p>
<b id="tr" class="crnrsz">0px</b>
</p>

<p>
<b id="bl" class="crnrsz">0px</b>
</p>

<p>
<b id="br" class="crnrsz">0px</b>
</p>

    <div id="changeobj"></div>
</section>
<section id="wrap">
<form id="borderoptions">
<fieldset id="basic" class="active">

<legend>Basic options <img src="images/triangle.png" alt="Click this label open or close these controls" width="10" height="10"></legend>

<div>
<fieldset id="foreground" class="hidefromsmall">
<legend>Add a border to a(n):</legend>

<p><input type="radio" id="div" value="div" name="fgimg"> <label for="div"><code>div</code> element</label></p>
<p><input type="radio" id="img" value="img" name="fgimg"> <label for="img"><code>img</code> element</label></p>
                <p><input type="radio" id="video" value="video" name="fgimg"> <label for="video"><code>video</code> element</label></p>
</fieldset>

<!-- top left controls -->

<fieldset id="topleft" class="crnr">
<legend>border-top-left-radius</legend>

<p>
<label for="topleftA" class="radius">top-top left</label>
<input type="range" id="topleftA" name="topleftA" min="0" max="300" value="0">
</p>

<p>
<label for="topleftB" class="radius">left-top left</label>
<input type="range" id="topleftB" name="topleftB"...

CSS

.hidefromsmall{
    display:block;
}

#getcode{display:inline;}

form #advanced p{
    float:left;
    width: 24%;
}

#setborderstyle p:nth-child(4){
    width: 25%;
    white-space:nowrap;
    border-right: 15px solid rgba(0,0,0,0);
}

form #basic p{
    float:left;
    width: 32%;
}

form #advanced p{
    width: 24%;
}

form #advanced #setbgimg p.credit{
    width:100%;
}

form #advanced #setbgimg p{
    width: 32%;
}

form #basic p:nth-child(2),
form #basic p:nth-child(3){
    border-left: 1% solid rgba(0,0,0,.7);
}

fieldset fieldset{
    width: auto;
}

#main{
    width: 17em;
}

#main > video, #main > img, #main > div{
    width: 15em;
    height: 15em;
}

#overlay{
    position:fixed;
    z-index:9999;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    top:0;
    left:0;
    margin:0;
}

#overlay section{
    display:none;
    background: #fff;
    margin: 100px auto;
    padding: 20px 20px 30px;
    position: relative;
    width: 80%;
    border-radius:5px;
    box-shadow: 0 0 100px rgba(0,0,0,.5);
}

#overlay pre{
    background-color: #fff;
    padding: 5px;
    margin:0
}

#overlay h2{
    font: normal 1.5em / 1 'Maiden Orange', serif;
    font-size:36px;
    margin:0 1em .2em 0;
    margin:0 1rem .5rem 0;
}

#overlay.show, #overlay section.show{
    display: block;
}

pre{
    border:1px inset #333;
    margin:1em;
    padding:1em;
    margin:1rem;
    padding:1rem;
}

JavaScript

(function(){

/*-------------
using getElementById instead of querySelector in some cases
so that don't have to retrieve the object once for old
browsers, and once for new.
-------------*/

var	unsupported = document.getElementById('unsupported'),
overlay = document.getElementById('overlay'),
showcss = document.getElementById('showcss'),
main = document.getElementById('main'),
borderobj = main.lastElementChild,
panels = document.querySelectorAll('form > fieldset > legend'),
close = document.querySelectorAll('.close'),
oncloseclick;

        oncloseclick = function(e){
            e.preventDefault();

            // hides either the unsupported or get the css panel.
            e.currentTarget.parentNode.className = 'hide';

            // hides the overlay.
            e.currentTarget.parentNode.parentNode.className = 'hide';

            document.body.className = '';
        };

Lib.addHandlers({nodelist:close, event:'click', func:oncloseclick});


if( Lib.hasBorderRadius === false ){
overlay.className = 'show';
unsupported.className = 'show';

} else {

        var hasRange,
            form,
            getcode,
            range,
            fixranges,
            n,
            bgimg,
            fgimg,
            fimg,
            div,
            unit = 'px';

var onsubmithandler,
onresethandler,
onrangechange,
onborderchange,
onborderwidthchange,
onpanelclick;

form = document.querySelector('form');
getcode = form.querySelector('button#getcode');
brdrstyle = document.querySelectorAll('#setborderstyle select');
range = document.querySelectorAll('#basic input[type=range]');
brdrwidth = document.querySelectorAll('#setborderwidth input[type=range]');
div = document.querySelector('#main div');
bgimg = form['bgimg'];
fgimg = form['fgimg'];
img = Lib.makeImage('images/kananaskis.jpg');
vid = Lib.makeVideo('raindropsinapool');

onrangechange = function(e){
var prop, u = unit, thisedge, otheredge, labels;
var linktl, linktr, linkbl, linkbr;

thisedge =...