128 lines
4.4 KiB
HTML
128 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Simple Browser</title>
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.getElementById('input-field').value = "";
|
|
});
|
|
|
|
async function inputChanged() {
|
|
const inputField = document.getElementById('input-field');
|
|
if (inputField.value == "") {
|
|
document.getElementById("success-box").style.display = "none";
|
|
document.getElementById("error-box").style.display = "none";
|
|
return;
|
|
}
|
|
const isValid = isValidFormatUrl(inputField.value);
|
|
if (isValid) {
|
|
const canProceed = throttle();
|
|
if (canProceed) {
|
|
const result = await serverCall(inputField.value);
|
|
if (result.urlExists) {
|
|
showSuccessMessage("The URL exists and it points to a " + result.type);
|
|
} else {
|
|
showErrorMessage("The URL is in a valid format but does not exist");
|
|
}
|
|
}
|
|
} else {
|
|
showErrorMessage("The URL is not in a valid format");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Checks whether a URL is syntactically valid or not
|
|
*
|
|
* @param {string} url - The URL to check.
|
|
* @return {boolean} True if the URL is in a valid format, false otherwise.
|
|
*/
|
|
function isValidFormatUrl(url) {
|
|
const regex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
|
|
return regex.test(url);
|
|
}
|
|
|
|
let lastCallTime = 0;
|
|
|
|
/**
|
|
* Throttle function to prevent excessive requests to a resource-intensive
|
|
* operation.
|
|
* The throttle is set to 500ms
|
|
* @return {boolean} True if can proceed, false otherwise
|
|
*/
|
|
function throttle() {
|
|
const currentTime = new Date().getTime();
|
|
|
|
if (currentTime - lastCallTime >= 500) {
|
|
lastCallTime = currentTime;
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* This function simulates a server call by randomly determining the
|
|
* existence of a URL and, if it exists, randomly deciding whether it
|
|
* points to a file or a folder, with each outcome having approximately
|
|
* equal probability (1/3).
|
|
*
|
|
* To simulate the latency of a real server call, this function
|
|
* pauses for 50ms
|
|
*
|
|
* @param {string} url - The URL to simulate a server call for.
|
|
* @return {Object} An object containing the simulated server response.
|
|
*/
|
|
async function serverCall(url) {
|
|
return await new Promise(function (resolve, reject) {
|
|
const urlExists = Math.random() < 0.66 ? true : false;
|
|
let type = null;
|
|
if (urlExists) {
|
|
type = Math.random() < 0.33 ? "File" : "Folder";
|
|
}
|
|
|
|
// We mock a fetch() call requiring some time to complete
|
|
setTimeout(() => resolve({
|
|
urlExists,
|
|
type
|
|
}), 50)
|
|
})
|
|
}
|
|
|
|
function showSuccessMessage(text) {
|
|
document.getElementById("success-box").style.display = "block";
|
|
document.getElementById("error-box").style.display = "none";
|
|
|
|
document.getElementById("success-message").innerHTML = text;
|
|
}
|
|
|
|
function showErrorMessage(text) {
|
|
document.getElementById("error-box").style.display = "block";
|
|
document.getElementById("success-box").style.display = "none";
|
|
|
|
document.getElementById("error-message").innerHTML = text;
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<input type="text" class="textbox" id="input-field" placeholder="Enter URL here" oninput="inputChanged()">
|
|
|
|
<div class="message success" id="success-box" style="display: none;">
|
|
<span class="icon">✓</span>
|
|
<span id="success-message"></span>
|
|
</div>
|
|
|
|
<div class="message error" id="error-box" style="display: none;">
|
|
<span class="icon">❌</span>
|
|
<span id="error-message"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |