JSFiddle - React, Tailwind, and code Playground

by alemarch

HTML

<div id="content">
    <p id="something">Good luck!</p>
    <input type="button" onclick="go()" value="click me!" >
    <div id="q1" class="obscure">&nbsp;</div>
    <div id="q2" class="obscure">&nbsp;</div>
    <div id="q3" class="obscure">&nbsp;</div>
    <div id="q4" class="obscure">&nbsp;</div>
    <div id="q5" class="obscure">&nbsp;</div>
        <div id="q6" class="obscure" onclick="/*returnToNormalView()*/">&nbsp;</div>
</div>

CSS

#content {width: 800px; height:600px; position: absolute; background:white; top:20px;}
#something {font-size: 110px;position:absolute; top: 20px; left: 20px;color:red;}
input[type=button] {position:fixed; z-index: 10;}

.obscure {
    position: absolute;
    background-color: rgba(0,0,0,.9);
    margin: 0px; padding: 0px;
    display:none;
    opacity: 0;
    transition: all 1s ease;
    //outline: solid 1px #999 /*debug only*/
}

//.obscure:before {content: attr(id); color: #ccc;} /*debug only*/

#q6 {
    left:0px; top:20px;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color:rgba(0,200,0,.2);
}

JavaScript

function obscureWith2Square(sideInternal, sideExternal, leftInternal, topInternal) {
    
    var spaceBetween = (sideExternal - sideInternal) / 2;
    
    setObjStyleProp("q1","display","block")
    setObjStyleProp("q2","display","block")
    setObjStyleProp("q3","display","block")
    setObjStyleProp("q4","display","block")
    setObjStyleProp("q5","display","block")
    setObjStyleProp("q6","display","block")
    
    setTimeout( function(){    
        setObjStyleProp("q1","opacity","1")
        setObjStyleProp("q2","opacity","1")
        setObjStyleProp("q3","opacity","1")
        setObjStyleProp("q4","opacity","1")
        setObjStyleProp("q5","opacity","1")
        setObjStyleProp("q6","opacity","1")
    }, 10)
    
    setObjStyleProp('q5','width', sideInternal + "px")
    setObjStyleProp('q5','height', sideInternal + "px")
    setObjStyleProp('q5','left', leftInternal + "px")
    setObjStyleProp('q5','top', topInternal + "px")
    
    setObjStyleProp('q4','left',    "0px")
    setObjStyleProp('q4','width',   (leftInternal-spaceBetween)  + "px")
    setObjStyleProp('q4','bottom',  "0px")
    setObjStyleProp('q4','top',     "0px")
    
    setObjStyleProp('q2','right',    "0px")
    setObjStyleProp('q2','left',   (sideInternal+leftInternal+spaceBetween)  + "px")
    setObjStyleProp('q2','bottom',  "0px")
    setObjStyleProp('q2','top',     "0px")
    
    setObjStyleProp('q1','left',  (leftInternal-spaceBetween)  + "px")
    setObjStyleProp('q1','top',     "0px")
    setObjStyleProp('q1','height',    (topInternal - spaceBetween) + "px")
    setObjStyleProp('q1','width',  (sideInternal+2*spaceBetween)  + "px")
    
    setObjStyleProp('q3','left',  (leftInternal-spaceBetween)  + "px")
    setObjStyleProp('q3','bottom',     "0px")
    setObjStyleProp('q3','top',    (sideInternal+topInternal + spaceBetween) + "px")
    setObjStyleProp('q3','width',  (sideInternal+2*spaceBetween)  + "px")
    
}

function setObjStyleProp(idObj, prop, value) {
   ...