First commit

2025-01-05 19:06:12 +01:00
parent 6ce33a7d62
commit 03933f5dda
2 changed files with 177 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/style.css
+++ b/style.css
@ -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;
+}