xfarrow/SimpleBrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
xfarrow
2025-01-05 19:06:12 +01:00
parent 6ce33a7d62
commit 03933f5dda
2 changed files with 177 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
index.html Normal file
View File

@ -0,0 +1,128 @@
<!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">&#10003;</span>
<span id="success-message"></span>
</div>
<div class="message error" id="error-box" style="display: none;">
<span class="icon">&#10060;</span>
<span id="error-message"></span>
</div>
</div>
</body>
</html>

49
style.css Normal file
View File

@ -0,0 +1,49 @@
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
.container {
text-align: center;
width: 300px;
}
.textbox {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
outline: none;
transition: border-color 0.3s;
}
.textbox:focus {
border-color: #66afe9;
}
.message {
display: flex;
align-items: center;
margin-top: 10px;
font-size: 14px;
}
.success {
color: green;
}
.error {
color: red;
}
.icon {
margin-right: 8px;
font-size: 18px;
}