From 8c7d1e734a2b99fae9f421244da0ad73043d25e1 Mon Sep 17 00:00:00 2001 From: Sophea Dave <95117988+sopheadave@users.noreply.github.com> Date: Wed, 2 Feb 2022 23:20:40 +0500 Subject: [PATCH] Add files via upload --- README.md | 5 +- click-speed-test.css | 198 ++++++++++++++++++++++++++++++++++++++++++ click-speed-test.html | 61 +++++++++++++ click-speed-test.js | 165 +++++++++++++++++++++++++++++++++++ 4 files changed, 428 insertions(+), 1 deletion(-) create mode 100644 click-speed-test.css create mode 100644 click-speed-test.html create mode 100644 click-speed-test.js diff --git a/README.md b/README.md index ffad405..b0ffdbd 100644 --- a/README.md +++ b/README.md @@ -1 +1,4 @@ -# click-speed-test \ No newline at end of file +# Click Speed Test +Click Speed Test also known as CPS Test (click per second test) is a challenging game for anyone who wants to check his/her mouse clicking speed. The game does not require any registration, so you will be able to play instantly after you reach the [click speed test](https://joltfly.com/click-speed-test/). + +![Click Speed Test Features](https://joltfly.com/wp-content/uploads/2021/04/Joltfly-Click-Speed-Test-CPS-Advanced-Features.png) diff --git a/click-speed-test.css b/click-speed-test.css new file mode 100644 index 0000000..f7dcdad --- /dev/null +++ b/click-speed-test.css @@ -0,0 +1,198 @@ +.cpstest-main { + background: none; + display: block; + padding: 0px 0px 0px 0px; + font: bold 17px/30px Arial, Helvetica, sans-serif; + min-width: 260px; + margin: auto; + border: none; +} +.cpstest-main:after { + content: ""; + clear: both; +} +.noselect { + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.cpstest-card { + padding: 1rem 2rem 1rem 2rem; + height: 70px; +} +.cpstest-cards { + max-width: 1600px; + margin: 0 auto; + display: grid; + grid-gap: 0 1rem; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} +.cpstest-blocks { + background: #113b54; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); + border-radius: 10px; + display: block; + padding: 10px 10px 10px 10px; + margin: 10px 0px; + border: none; + text-align: center; + min-height: 50px; +} +.cpstest-click-blocks { + background: none; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); + border-radius: 10px; + display: block; + padding: 10px 10px 10px 10px; + margin: 10px 0px; + border-width: 5px; + border-style: solid; + border-color: #113b54; + text-align: center; + height: 250px; + overflow: hidden !important; +} +.cpstest-reset-button { + position: relative; + height: 40px; + width: 40px; + transition: background-color 0.15s ease-in; + font-size: 25px; + text-align: center; + padding: 0px 7px 8px 4px; + line-height: 40px; + text-decoration: none; + color: white; + cursor: pointer; + background-color: #009efd; + border-radius: 50%; +} +.cpstest-reset-button:hover { + background-color: #113b54; + transition: background-color 0.3s ease-in; + transition: background-color 0.3s ease-out; +} +.cpstest-click-me { + background: #113b54; + background: -webkit-linear-gradient(to right, #113b54, #009efd); + background: linear-gradient(to right, #113b54, #009efd); + text-align: center; + overflow: hidden !important; + line-height: 220px; + height: 250px; + color: white; + position: relative !important; + -webkit-transition: all 0.6s ease; + -moz-transition: all 0.6s ease; + -ms-transition: all 0.6s ease; + -o-transition: all 0.6s ease; + transition: all 0.6s ease; +} +.cpstest-click-me:hover { + text-shadow: 0px 0px 8px rgb(255, 230, 186), 0px 0px 22px rgb(255, 255, 255), + 0px -1px 0px rgba(0, 0, 0, 0.5); +} +.clickMeTextShow { + opacity: 1; +} +.clickMeTextHide { + opacity: 0; +} +.ripple { + position: absolute; + background: #fff; + border-radius: 50%; + width: 5px; + height: 5px; + animation: rippleEffect 0.88s 1; + opacity: 0; +} +@keyframes rippleEffect { + 0% { + transform: scale(1); + opacity: 0.4; + } + 100% { + transform: scale(100); + opacity: 0; + } +} +.modalclosebtn { + color: white; + cursor: pointer; +} +.modalclosebtn:hover { + color: red; + cursor: pointer; +} +.cpsmsgmodal { + display: none; + position: fixed; + z-index: 100; + padding: 100px 10px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); +} +.cpstest-main-msg { + background: #113b54; + background: -webkit-linear-gradient(to right, #113b54, #009efd); + background: linear-gradient(to right, #113b54, #009efd); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); + display: block; + padding: 10px 20px 10px 20px; + font: 17px/30px Arial, Helvetica, sans-serif; + margin: auto; + max-width: 750px; + min-width: 260px; + border: none; + border-radius: 10px; +} +.cpstest-main-msg-content { + background: none; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); + border-radius: 10px; + display: block; + padding: 10px 10px 10px 10px; + margin: 10px 0; + border-width: 5px; + border-style: solid; + border-color: #009efd; + text-align: center; + overflow: hidden !important; +} +.cpstest-main-msg-image { + border-right: 2px solid #009efd; + margin: 10px; + min-height: 180px; + width: 180px; + float: left; +} +.social-share-button { + padding: 2px 2px 2px 4px; + border-width: 2px; + border-style: solid; + border-color: white; + border-radius: 50px; + width: 30px; + height: 30px; + margin: 15px 10px 15px 0px; + float: left; + cursor: pointer; + transition: background-color 0.3s ease-out; + transition: border-color 0.3s ease-out; +} +.social-share-button:hover { + border-color: #009efd; + background-color: #009efd; + transition: background-color 0.3s ease-in; + transition: border-color 0.3s ease-in; +} diff --git a/click-speed-test.html b/click-speed-test.html new file mode 100644 index 0000000..2eb50f8 --- /dev/null +++ b/click-speed-test.html @@ -0,0 +1,61 @@ + + + + +Click Speed Test + + +
+
+
+
+
0.000
+
Timer
+
+
+
0.00
+
CPS
+
+
+
0
+
Score
+
+
+
+
+
CLICK ME TO START PLAYING
+
+
+
+
+
+
Check Your Score
+
✕
+

+
+
Your Rank
+
+
You Got Rank
+
You Clicked with the speed of CPS
+
Clicks in Second(s)
+
+
+
+
+
+
+
⟲
+
+
+ + + + diff --git a/click-speed-test.js b/click-speed-test.js new file mode 100644 index 0000000..42d7077 --- /dev/null +++ b/click-speed-test.js @@ -0,0 +1,165 @@ + let timer = document.getElementById("timer"); + let cps = document.getElementById("cps"); + let scor = document.getElementById("scor"); + let clickmebutton = document.getElementById("clickmebutton"); + let startbutton = document.getElementById("startbutton"); + var cpsmodal = document.getElementById("cpsmodal"); + var closecpsmodal = document.getElementById("closecpsmodal"); + let cpsrank = document.getElementById("cpsrank"); + let cpsCps = document.getElementById("cpsCps"); + let noClicks = document.getElementById("noClicks"); + let inSeconds = document.getElementById("inSeconds"); + let cpsMainmsg = document.getElementById("cpsMainmsg"); + let cpsSubmsg = document.getElementById("cpsSubmsg"); + let cpsmainimg = document.getElementById("cpsmainimg"); + let cpsmsgreset = document.getElementById("cpsmsgreset"); + let fbbutton = document.getElementById("fbbutton"); + let twbutton = document.getElementById("twbutton"); + let wabutton = document.getElementById("wabutton"); + var therank, thecps, theclicks, theseconds, themainmsg, thesubmsg, theimgurl; + var score; + var duration = 10; + var startTime; + var ended = true; + + function show(e) { + e.style.display = 'block'; + } + + function hide(e) { + e.style.display = 'none'; + } + + function startGame() { + hide(startbutton); + score = 0; + ended = false; + startTime = new Date().getTime(); + var timerId = setInterval(function() { + var total = (new Date().getTime() - startTime) / 1000; + if (total < duration) { + timer.innerHTML = total.toFixed(3); + cps.innerHTML = (score / total).toFixed(2); + } else { + ended = true; + clearInterval(timerId); + endGame(); + } + }, 1); + } + + function endGame() { + var clicsBySeconds = (score / duration).toFixed(2); + timer.innerHTML = duration.toFixed(3); + cps.innerHTML = clicsBySeconds; + show(startbutton); + cpsReset(); + inSeconds.innerHTML = duration; + if (clicsBySeconds > 0 && clicsBySeconds <= 5) { + therank = "Cooter!"; + thecps = clicsBySeconds; + theclicks = score; + theseconds = duration; + themainmsg = "“Dont Shy away from working hard, Keep Practicing for Better Results”"; + thesubmsg = "Try Harder to Prove Yourself"; + theimgurl = "https://joltfly.com/wp-content/uploads/2021/03/Cooter.svg"; + } else if (clicsBySeconds > 5 && clicsBySeconds <= 8) { + therank = "Rodent!"; + thecps = clicsBySeconds; + theclicks = score; + theseconds = duration; + themainmsg = "“Smart but not fast, flicker your finger even faster.”"; + thesubmsg = "Try Harder to Improve Your Rank"; + theimgurl = "https://joltfly.com/wp-content/uploads/2021/03/Rodent.svg"; + } else if (clicsBySeconds > 8 && clicsBySeconds <= 10) { + therank = "Coney!"; + thecps = clicsBySeconds; + theclicks = score; + theseconds = duration; + themainmsg = "“Time to go full throttle, you are not far from being the best.”"; + thesubmsg = "Try Again to be the Best in Business"; + theimgurl = "https://joltfly.com/wp-content/uploads/2021/03/Coney.svg"; + } else if (clicsBySeconds > 10) { + therank = "Buffalo!"; + thecps = clicsBySeconds; + theclicks = score; + theseconds = duration; + themainmsg = "“Your fingers snap at blistering speed just like the speedie cat runs. Hail to the king of clicking.”"; + thesubmsg = "Try Again to Beat Your Own Record King"; + theimgurl = "https://joltfly.com/wp-content/uploads/2021/03/Bufallo.svg"; + } + setTimeout(function() { + if (clicsBySeconds > 0) { + hidecpsmsg(); + setTimeout(function() { + fbbutton.href = "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fjoltfly.com/click-speed-test/"; + twbutton.href = "https://twitter.com/intent/tweet/?text=OMG! I Got a " + thecps + " Score in this amazing clicking game, i.e., I can click " + theclicks + " times in " + theseconds + " Second(s). Do you think you can beat my score? Try your luck! https%3A%2F%2Fjoltfly.com/click-speed-test/"; + wabutton.href = "https://wa.me/?text=OMG! I Got a " + thecps + " Score in this amazing clicking game, i.e., I can click " + theclicks + " times in " + theseconds + " Second(s). Do you think you can beat my score? Try your luck at https://joltfly.com/click-speed-test/"; + displaycpsmsg(therank, thecps, theclicks, theseconds, themainmsg, thesubmsg, theimgurl); + }); + } + }, 10); + } + + function cpsClick() { + startbutton.className += " clickMeTextHide"; + startGame(); + } + startbutton.onclick = cpsClick; + + function cpsReset() { + startbutton.className += " clickMeTextShow"; + startbutton.className = startbutton.className.replace(/(?:^|\s)clickMeTextHide(?!\S)/g, ""); + timer.innerHTML = "0.000"; + } + + function displaycpsmsg(rank, cps, clicks, seconds, mainmsg, submsg, imgurl) { + cpsrank.innerHTML = rank; + cpsCps.innerHTML = cps; + noClicks.innerHTML = clicks; + inSeconds.innerHTML = seconds; + cpsMainmsg.innerHTML = mainmsg; + cpsSubmsg.innerHTML = submsg; + cpsmainimg.src = imgurl; + cpsmodal.style.display = "block"; + } + + function hidecpsmsg() { + cpsmodal.style.display = "none"; + } + closecpsmodal.onclick = hidecpsmsg; + window.onclick = function(event) { + if (event.target == cpsmodal) { + hidecpsmsg(); + } + }; + + function cpsmsgresetbutton() { + hidecpsmsg(); + cpsReset(); + } + cpsmsgreset.onclick = cpsmsgresetbutton; + clickmebutton.addEventListener("click", function(e) { + if (!ended) { + score++; + scor.textContent = score; + } + }); + window.onload = function() { + let rippleElements = document.getElementsByClassName("myRipple"); + for (var i = 0; i < rippleElements.length; i++) { + rippleElements[i].onclick = function(e) { + let X = e.pageX - this.offsetLeft; + let Y = e.pageY - this.offsetTop; + let rippleDiv = document.createElement("div"); + rippleDiv.classList.add("ripple"); + rippleDiv.setAttribute("style", "top:" + (Y - 10) + "px; left:" + (X - 5) + "px;"); + let customColor = this.getAttribute("ripple-color"); + if (customColor) rippleDiv.style.background = customColor; + this.appendChild(rippleDiv); + setTimeout(function() { + rippleDiv.parentElement.removeChild(rippleDiv); + }, 900); + }; + } + };