html css js calculator
Got it 👍 Here’s a single-page calculator built with just HTML, inline CSS, and JavaScript.
You can copy-paste into a .html file and run it directly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fast Speed Test</title>
<style>
body{margin:0;font-family:Arial,sans-serif;background:#0b0f14;color:#fff;display:flex;justify-content:center;align-items:center;height:100vh}
.container{background:#111826;padding:20px;border-radius:16px;width:320px;text-align:center;box-shadow:0 6px 25px rgba(0,0,0,.5)}
h1{margin-bottom:8px;font-size:24px}
.status{margin:6px 0;color:#8aa0b2;font-size:14px}
.kpi{font-size:32px;font-weight:800;margin:6px 0}
.progress{width:100%;height:10px;background:#0d1420;border-radius:10px;overflow:hidden;margin:6px 0}
.bar{height:100%;width:0%;background:#4cc9f0;transition:width .2s}
button{margin-top:10px;padding:8px 16px;font-weight:700;border:none;border-radius:10px;background:#4cc9f0;color:#001018;cursor:pointer}
</style>
</head>
<body>
<div class="container">
<h1>Speed Test</h1>
<div class="status" id="status">Idle</div>
<div class="kpi" id="lat">Ping: — ms</div>
<div class="kpi" id="down">Download: — Mbps</div>
<div class="progress"><div class="bar" id="downBar"></div></div>
<div class="kpi" id="up">Upload: — Mbps</div>
<div class="progress"><div class="bar" id="upBar"></div></div>
<button id="startBtn">Start Test</button>
</div>
<script>
(() => {
const latEl=document.getElementById('lat'),
downEl=document.getElementById('down'),
upEl=document.getElementById('up'),
statusEl=document.getElementById('status'),
downBar=document.getElementById('downBar'),
upBar=document.getElementById('upBar');
const PING_URL="https://www.google.com/generate_204",
DOWN_URL="https://speed.cloudflare.com/__down?bytes=20000000",
UP_URL="https://httpbin.org/post";
const fmt=n=>Number.isFinite(n)?n.toFixed(1):"—";
async function pingTest(samples=3){
statusEl.textContent="Testing Ping…";
const times=[];
for(let i=0;i<samples;i++){
const s=performance.now();
try{await fetch(PING_URL,{mode:"no-cors",cache:"no-store"});}catch{}
const e=performance.now();
times.push(e-s);
await new Promise(r=>setTimeout(r,100));
}
const avg=times.reduce((a,b)=>a+b,0)/times.length;
latEl.textContent=`Ping: ${fmt(avg)} ms`;
}
async function downloadTest(){
statusEl.textContent="Testing Download…";
downBar.style.width="0%";
const start=performance.now();
let bytes=0;
try{
const res=await fetch(DOWN_URL,{cache:"no-store"});
const reader=res.body?.getReader?.();
if(!reader){bytes=(await res.arrayBuffer()).byteLength;}
else{while(true){const {done,value}=await reader.read();if(done)break;bytes+=value.byteLength;downBar.style.width=Math.min(100,(bytes/20000000)*100)+"%";}}
}catch{}
const dur=(performance.now()-start)/1000;
const mbps=(bytes*8)/(1e6*dur);
downEl.textContent=`Download: ${fmt(mbps)} Mbps`;
downBar.style.width="100%";
}
async function uploadTest(){
statusEl.textContent="Testing Upload…";
upBar.style.width="0%";
const size=5*1024*1024;
const blob=new Uint8Array(size);
const start=performance.now();
try{await fetch(UP_URL,{method:"POST",body:blob});}catch{}
const dur=(performance.now()-start)/1000;
const mbps=(size*8)/(1e6*dur);
upEl.textContent=`Upload: ${fmt(mbps)} Mbps`;
upBar.style.width="100%";
}
async function runTest(){
document.getElementById('startBtn').disabled=true;
await pingTest();
await downloadTest();
await uploadTest();
statusEl.textContent="Test Complete";
document.getElementById('startBtn').disabled=false;
}
document.getElementById('startBtn').addEventListener('click',runTest);
})();
</script>
</body>
</html>
Comments
Post a Comment