Website Speed Test
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
h2 {
margin-bottom: 10px;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
width: 70%;
border: none;
border-radius: 5px 0 0 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #333;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
#loadingMessage {
display: none;
}
#resultList {
list-style: none;
padding: 0;
margin: 0;
}
.success {
color: green;
}
.failure {
color: red;
}
const urlInput = document.getElementById("urlInput");
const testButton = document.getElementById("testButton");
const loadingMessage = document.getElementById("loadingMessage");
const resultList = document.getElementById("resultList");
testButton.addEventListener("click", () => {
const url = urlInput.value;
loadingMessage.style.display = "block";
resultList.innerHTML = "";
const startTime = new Date().getTime();
const img = new Image();
img.onload = function() {
const endTime = new Date().getTime();
const timeTaken = (endTime - startTime) / 1000;
const resultItem = document.createElement("li");
resultItem.classList.add("success");
resultItem.innerHTML = `Success: ${timeTaken}s`;
resultList.appendChild(resultItem);
loadingMessage.style.display = "none";
};
img.onerror = function() {
const resultItem = document.createElement("li");
resultItem.classList.add("failure");
resultItem.innerHTML = "Failed";
resultList.appendChild(resultItem);
loadingMessage.style.display = "none";
};
img.src = `https://${url}/favicon.ico?${new Date().getTime()}`;
});
0
