I've created an interactive "click master" that provides feedback on your button clicking skills. Each time you click the button, a random response fades in to judge your click.
"Nice try... but not quite.",
"Weak effort.",
"That was a terrible click.",
"Not up to par.",
"Try clicking lighter next time!",
"Click harder this time!",
"I didn't even feel that.",
"You're getting closer, but still not there.",
"Nope.",
"Improve your clicking technique.",
"Do I need to teach you how to click!?",
"Making progress... almost.",
"This is a definite no.",
"Worst click of the year - 1/10.",
"Why are you deliberately clicking poorly?",
"My grandma clicks better than you, and she's over a hundred years old!",
"Even an AI knows you can't click properly.",
"Maybe your fingers aren't working...",
"Is your mouse stuck or something?",
"Some people have good clicking skills... but not you."
];
$(document).ready(function(){
$('body').click(function(){
$(span).addClass('gone');
});
});
// DO NOT CHANGE ANYTHING BELOW THIS LINE! //
function newTip() {
var randomNumber = Math.floor(Math.random() * (ratings.length));
document.getElementById('quoteDisplay').innerHTML = ratings[randomNumber];
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans+Condensed:300|Share+Tech+Mono" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<title>THE CLICK MASTER</title>
</head>
<body>
<h2 class="fadename">THE CLICK MASTER</h2>
<h6><span>created in about 20 hours by CrashRocks1419 − <a href="../website/main/home.html">Back to my own website</a></span></h6>
<h1 class="fadeinfo">How well can you click? Get an <span style="border-bottom:6px double black">honest</span> response today!</h1>
<button onclick="newTip()" id="button">Click me to get a new, <em>helpful</em> tip</button>
<br>
<br>
<div id="quoteDisplay" style="border: 1px solid black;height: 170px;padding:20px;text-align: center;padding-top:110px;">
<span style="font-family:arial" class="gone">Response appears here...</span>
</div>
<script src="javascript.js"></script>
</body>
</html>
Do you think this idea will work as intended?
UPDATE: Typically, the responses just replace the previous text. I would like them to fade out the previous text and fade in the new one if possible.
CSS Styles
.fadename {
font-family: Courier New;
animation: fade1 1s ease;
font-size: 100px;
font-weight:normal;
margin-bottom:-30px;
margin-top:-10px;
}
.fadeinfo {
font-family: Lato;
animation: fade1 3s ease;
}
div {
font-family: Open Sans Condenses;
font-size: 50px;
animation: fade 5s ease;
background: linear-gradient(#716ab2, #94ba92, #f912db);
background-repeat: repeat-x;
height: 100%;
padding: 0;
}
@keyframes fade1 {
from {opacity: 0;}
to {opacity: 1;}
}
button {
font-family: Share Tech Mono;
color: blue;
background-color: white;
animation: fade 1s ease;
border: 5px solid blue;
font-weight: bold;
font-size: 30px;
transition: box-shadow 0.5s ease, color 0.4s ease, background-color 0.4s ease, border 0.4s ease;
}
button:hover {
box-shadow: 6px 6px 3px 2px rgba(0,0,0,0.8);
}
button:active {
color: white;
background-color: blue;
border: 5px solid white;
box-shadow: 1px 1px 2px 1px black inset, 4px 4px 2px 1px black;
}
a {
color: #111;
text-decoration: none;
font-weight: bold;
}
html {
background: linear-gradient(#8abc3d, #ba72dd);
background-repeat: repeat-x;
height: 100%;
padding: 0;
background-color: #ba72dd;
}
b, a {
color: #f22;
}
.twoline {
font-size: 37px;
top: -200px;
}
.gone {
opacity: 0;
animation: gone 3s ease forwards;
}
@keyframes gone {
10% {opacity:0;}
20% {opacity:0;}
30% {opacity:1;}
40% {opacity:1;}
50% {opacity:1;}
60% {opacity:1;}
70% {opacity:1;}
80% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}
h2 {
width: 980px;
}