JSFiddle - React, Tailwind, and code Playground

Change Background Color

by dledle2

HTML

<div id="myBeginningDiv">instructions, how to use countdown </div>
<div id="myDiv">this is my blinking div! I blink 4 times in half second intervals</div>
<ol>
    <li>This is my infinite blinking list item</li>
    <li>I don't blink</li>
    <li>Me either</li>
    <li>Nope, not me</li>
    <ol>
    
    
    <div class="block">
    <label>First Countdown Time</label>
    <input type="text" size=2 id="strFirstMinutesCountdown">
</div>
<div class="block">
    <label>Second</label>
    <input type="text" size=2 id="strSecondMinutesCountdown">
</div>
<div class="block">
    <label>Third</label>
    <input type="text" size=2 id="strThirdMinutesCountdown">
</div>
<div class="block">
    <label>Fourth</label>
    <input type="text" size=2 id="strFourthMinutesCountdown">
</div>


<div id="square" class="myClass">
<!-- I am a square. <br>And proud of it! // -->
</div> 
<button id="btnStartCountdown">Start</button>
<button id="button">ActivateBlink</button>

CSS

body{
	paddingZZZ: 50px;
  padding: 0px;
	}
  
   ol > li{
/* #square{ */
	ZZZbackground-color: white;
	ZZZcolor: white;
	height: 100%;
	width: 100%;	
  
  }
  
  
#square{
	background-color: white;
	color: white;
	heightZZZ: 100px;
	widthZZZ: 100px;	
	height: 100%;
	width: 100%;	
	padding-topZZZ: 15px;
	padding-top: 0px;
	text-align:center;
	font-family: "Arial Black", sans-serif;
	margin-right:auto;
	margin-left: auto;
  
  
  position:absolute;
	left:-300px;
	right:-300px;
	top:0px;
  z-index: -5;


	}
button{
	width: 100px;
	padding: 10px;
	display: block;
	margin-right:auto;
	margin-left: auto;
	margin-top: 10px;
	}
  
label {
  display: inline-block;
  width: 200px;
  text-align: right;
}

.blink {
    color: black !important;
    background: yellow !important;
    !important;
}

JavaScript

if (location.protocol != 'http:') {
  
try{location.href = 'http:' + window.location.href.substring(window.location.protocol.length);    }catch(e){}}




/* myStrURL= */
/* try{window.open(myStrURL , '' , '');    }catch(e){} */
window.boolWindowOpenedSuccessfullyAlready = false;

function inIframe () {
    try {
        /* below command will cause a permissions error when using iframes */ 
        /* and will break into the catch part for error handling           */
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

function isURLjsfiddleshowlight () {
   if (       document.location.href.toLowerCase().contains('/show/light/')       )
      {return true;}
   else
      {return false;}
   /* below end bracket: end of function: isURLjsfiddleshowlight*/
}


try{
if (inIframe() === true){
   if (window.open(window.location.href)){window.boolWindowOpenedSuccessfullyAlready=true;}  
}
/* if (isURLjsfiddleshowlight() != true){window.open(window.location.href);    }  */
}catch(e){}
/* alert(window.boolWindowOpenedSuccessfullyAlready);    */




function myFuncinIframeAndAlsoWindowOpenSameFunction() {

if (typeof window.boolWindowOpenedSuccessfullyAlready == 'undefined')
{ window.boolWindowOpenedSuccessfullyAlready=false; }

console.log(window.boolWindowOpenedSuccessfullyAlready);
if (window.boolWindowOpenedSuccessfullyAlready ===false) {
   try {
      if(window.self !== window.top){
         if (window.open(window.location.href)){window.boolWindowOpenedSuccessfullyAlready=true;}
         /*   */ 
      }
   }catch(e){}
}
console.log(window.boolWindowOpenedSuccessfullyAlready);
   /* below end bracket: end of function: myFuncinIframeAndAlsoWindowOpenSameFunction */
}


myFuncinIframeAndAlsoWindowOpenSameFunction();

/* myStrURL=window.location.href;  */
/* try{window.open(myStrURL , '' , '');    }catch(e){}  */










//declare what's there 

var theBox = document.getElementById("square");
var myButton =...