calvinmorett/index.html

## index.html
<head>

  <title>random position on click</title>
  <style>:root{
  --qualitex:#bbad44; /*green gold */
}
html{background:#0ba044;
}
body{color:white;
font-family:Arial, sans-serif;
  overflow:hidden;
  width:100vw;
  height:100vh;
margin:0;
  background:url('https://i.imgur.com/hrbHXEv.jpg') no-repeat;
  background-size:cover;
}
.post{
border:8px solid;
  width:340px;
  height:340px;
    position:absolute;
animation:zone-in 1s ease infinite;
  z-index:9999999;
}
h1 {
  font-size:20px;
  position: absolute;
  top: 0;
  display: inline;
  text-align: right;
  opacity: 1;
  transition: opacity 1s;
  width: auto;
  margin: 0 auto;
  background: rgba(0,0,0,.5);
  padding: 2vh 2vw 2vh;
  right: 0;
  max-width:65vw;
  font-family:monospace;
}
    h1 span{
      color:orange;
    }

h1.fade {
  opacity: 0;
  transition: opacity 1s;
}

@keyframes zone-in{
  from{
  width:300px;
    height:300px;
  }
  to{
  width:10px;
    height:10px;
  }
}</style>

</head>

<body>
<div class="post"></div>

  <h1>That box indicates where a bomb will land if it's left on an area for too long. We need time to disable it with our cyber team. <span>Think you can keep it busy for us, by manually clicking on it to change its targeting sequence?</span></h1>
</body>

## random-pos-on-click.markdown

      
    Raw
  

              random-pos-on-click.markdown
            
          
    random pos on click

A Pen by Calvin on CodePen.
License.

  
## script.js
var score = 0;
console.log('Score: ' + score);

const quoteTag = document.querySelector('h1')
var fadetext = document.querySelector('h1')


const getQuote = function() {
      quoteTag.innerHTML =  'Nice job! You just saved ' + score + ' civilians!'
     fadetext.classList.toggle('fade');
}

$('.post').click(function() {
    var docHeight = $(document).height(),
        docWidth = $(document).width(),
        $div = $('.post'),
        divWidth = $div.width(),
        divHeight = $div.height(),
        heightMax = docHeight - divHeight,
        widthMax = docWidth - divWidth;


      score = score + 1;
      console.log('Score: ' + score);


  if (score % 5 == 0)
    {
      getQuote()
      console.log('Nice job!');
    }
  else if (score % 5 !== 0)
    {
      fadetext.classList.toggle('fade');
      quoteTag.innerHTML =  ' '
    }


  $div.css({
        left: Math.floor( Math.random() * widthMax ),
        top: Math.floor( Math.random() * heightMax )
    });
});


## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<head>

	<title>random position on click</title>
	<style>:root{
	--qualitex:#bbad44; /green gold /
	}
	html{background:#0ba044;
	}
	body{color:white;
	font-family:Arial, sans-serif;
	overflow:hidden;
	width:100vw;
	height:100vh;
	margin:0;
	background:url('https://i.imgur.com/hrbHXEv.jpg') no-repeat;
	background-size:cover;
	}
	.post{
	border:8px solid;
	width:340px;
	height:340px;
	position:absolute;
	animation:zone-in 1s ease infinite;
	z-index:9999999;
	}
	h1 {
	font-size:20px;
	position: absolute;
	top: 0;
	display: inline;
	text-align: right;
	opacity: 1;
	transition: opacity 1s;
	width: auto;
	margin: 0 auto;
	background: rgba(0,0,0,.5);
	padding: 2vh 2vw 2vh;
	right: 0;
	max-width:65vw;
	font-family:monospace;
	}
	h1 span{
	color:orange;
	}

	h1.fade {
	opacity: 0;
	transition: opacity 1s;
	}

	@keyframes zone-in{
	from{
	width:300px;
	height:300px;
	}
	to{
	width:10px;
	height:10px;
	}
	}</style>

	</head>

	<body>
	<div class="post"></div>

	<h1>That box indicates where a bomb will land if it's left on an area for too long. We need time to disable it with our cyber team. <span>Think you can keep it busy for us, by manually clicking on it to change its targeting sequence?</span></h1>
	</body>
	var score = 0;
	console.log('Score: ' + score);

	const quoteTag = document.querySelector('h1')
	var fadetext = document.querySelector('h1')


	const getQuote = function() {
	quoteTag.innerHTML = 'Nice job! You just saved ' + score + ' civilians!'
	fadetext.classList.toggle('fade');
	}

	$('.post').click(function() {
	var docHeight = $(document).height(),
	docWidth = $(document).width(),
	$div = $('.post'),
	divWidth = $div.width(),
	divHeight = $div.height(),
	heightMax = docHeight - divHeight,
	widthMax = docWidth - divWidth;


	score = score + 1;
	console.log('Score: ' + score);


	if (score % 5 == 0)
	{
	getQuote()
	console.log('Nice job!');
	}
	else if (score % 5 !== 0)
	{
	fadetext.classList.toggle('fade');
	quoteTag.innerHTML = ' '
	}




	$div.css({
	left: Math.floor( Math.random() * widthMax ),
	top: Math.floor( Math.random() * heightMax )
	});
	});
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>