Pinger

Developer
Lukejacksonn
Size
4,434 Kb
Views
14,168
  1. Pinger Previews
  2. Pinger HTML Codes
  3. Pinger CSS Codes
  4. Pinger JS Codes

How do I make an pinger?

A clientside script that measure the instant and average round trip time of a request from the client to the internet.. What is a pinger? How do you make a pinger? This script and codes were developed by Lukejacksonn on 30 November 2022, Wednesday.

Pinger Previews
IQ Test

Pinger - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pinger</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section>
<heart></heart>
<button class="dead">GO</button>
<div> <h1>HOW HEALTHY IS YOUR INTERNET</h1> <h3>** Click the heart to get started **</h3>
</div>
<section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/lukejacksonn/Actuate/master/actuate-animate.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pinger - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
html,
body { position: relative; -webkit-transition: background 200ms ease-in-out; transition: background 200ms ease-in-out; width: 100%; min-width: 320px; height: 100%; min-height: 320px; display: table;
}
section { position: relative; display: table-cell; vertical-align: middle; text-align: center;
}
div { color: #242424; font-family: "Inconsolata"; text-align: center; margin-top: 60px; font-weight: 700;
}
div h1 { font-size: 18px; margin-bottom: 10px;
}
div h3 { font-size: 12px; font-weight: 400;
}
button { position: relative; width: 200px; height: 140px; z-index: 999; background: transparent; border: none; color: #fff; outline: none; font-family: 'Open Sans', sans-serif; font-size: 48px; line-height: 0; cursor: pointer;
}
heart { position: absolute; width: 200px; height: 140px; -webkit-animation-duration: 0.5s !important; animation-duration: 0.5s !important;
}
heart:before,
heart:after { position: absolute; content: ""; left: 100px; top: 0; width: 100px; height: 160px; background: #e00032; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%;
}
heart:after { left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%;
}

Pinger - Script Codes JS Codes

var Waver = function() { var context = typeof AudioContext !== "undefined" ? new AudioContext() : null; var vco = context ? context.createOscillator() : null; var vca = context ? context.createGain() : null; var setNote = function(f) { if(vco) { vco.type = vco.SINE; vco.frequency.value = f; } return vco; } var setGain = function(g) { if(vca) { vca.gain.value = g; } return vca } var play = function() { if(context) { vco.start(); vco.connect(vca); vca.connect(context.destination); } return context; } return { note: setNote, gain: setGain, play: play }
};
var Wave = Waver();
Wave.note(1000);
Wave.gain(0.0);
Wave.play();
var redline;
var deltas = [];
var pinging = false;
var Ping = function () { // Provided a ping is not in progress // and the user hasn't killed the heart if(!pinging && !$('button').hasClass('dead')) { // Create an image var img = new Image(); var start = new Date().getTime(); // Define image onload callbacks img.onload = function() { Pong(start); }; img.onerror = function() { Error(); }; // Set image source to trigger request img.src = "https://www.google.co.uk/images/srpr/logo11w.png" +'?callback=' + Math.floor((1 + Math.random()) * 0x10000).toString(16); // Fade body to red and turn up sound $('body').css('background', '#e00032'); Wave.gain(1.0); // Set a timeout for no response redline = setTimeout(Error, 5000); pinging = true; }
}
var Pong = function (start) { // Work out time difference from ping start var delta = ((new Date()).getTime() - start); deltas.push(delta); var avg = _.reduce(deltas, function(memo, num){ return memo + num; }, 0)/deltas.length; var diagnose = function (x) { if(deltas.length > 5) { var greeting = "YOUR INTERNET SEEMS"; var status = x < 50 ? "EXCELLENT" :x < 100 ? "GOOD" :x < 150 ? "OK" :x < 200 ? "BAD" :"VERY BAD"; return [greeting, status].join(' '); } else return "-" + $('h1').text() + "-"; } // Update the view and turn down sound $('button').text(Math.floor(delta)); $('h1').text(diagnose(avg)); if(deltas.length < 6) $('h3').text("PLEASE BE PATIENT") else $('h3').text("AVERAGE " + Math.floor(avg) + "MS RESPONSE"); $('body').css('background', 'white'); $('heart').actuate('pulse'); Wave.gain(0.0); // Cancel timeout and ping again clearTimeout(redline); setTimeout(function() { pinging = false; Ping(); }, 1000+delta);
}
var Error = function () { clearTimeout(redline); Wave.gain(0.5); pinging = false; $('button').actuate('fadeOut', function(x) { $(x).text(':('); setTimeout(function() { // Reset view to start Wave.gain(0.0); $('body').css('background', 'white'); $('button').addClass('dead').text('GO'); }, 4000); });
}
$('button').on('click', function() { $(this).toggleClass('dead'); if(!$(this).hasClass('dead')) $('h1').text(' ANALYSING '); deltas = []; Ping();
});
Pinger - Script Codes
Pinger - Script Codes
Home Page Home
Developer Lukejacksonn
Username lukejacksonn
Uploaded November 30, 2022
Rating 3
Size 4,434 Kb
Views 14,168
Do you need developer help for Pinger?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lukejacksonn (lukejacksonn) Script Codes
Name
Nice Random Colors
Flex Fix
Flexbox Email Template
Flex Gallery
Flexbox Masonry
Peeky Password
Favorite Heart
GreedyNav Update
Complex Flexbox Layouts
A Pen by lukejacksonn
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!