Add index.html

12v · Nov 8, 2023 · 55b6cf7 · 55b6cf7
1 parent 0c96c78
commit 55b6cf7
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 # Ignore all .txt files in docs directory
-docs/*.txt
+docs/postcodes/
 
 # Byte-compiled / optimized / DLL files
 __pycache__/

diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>GB Postcode Lookup</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <script src="script.js"></script>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Postcode Lookup</h1>
+        <form onsubmit="submitForm(event)">
+            <input type="text" id="input" placeholder="Enter postcode">
+            <input type="submit" value="Submit">
+        </form>
+        <div id="result"></div>
+    </div>
+</body>
+
+</html>
diff --git a/docs/script.js b/docs/script.js
@@ -0,0 +1,22 @@
+function submitForm(event) {
+    event.preventDefault();
+    var input = document.getElementById('input').value.replace(/\s/g, '').toUpperCase();
+    fetch(`https://12v.github.io/postcode-lookup/postcodes/${input}.txt`)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(response.status);
+            }
+
+            return response.text()
+        })
+        .then(data => {
+            document.getElementById('result').innerHTML = 'Following the 2023 Review of Parliamentary constituencies, your constituency is:<br><strong> ' + data + '</strong>';
+        })
+        .catch(error => {
+            if (error.message == '404') {
+                document.getElementById('result').textContent = 'Your postcode was not found. Please check your postcode and try again.  Unfortunately, this tool only works for postcodes in England, Scotland and Wales.';
+            } else {
+                document.getElementById('result').textContent = 'An error occurred: ' + error.message;
+            }
+        });
+}
diff --git a/docs/styles.css b/docs/styles.css
@@ -0,0 +1,50 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    padding: 20px;
+}
+
+.container {
+    max-width: 600px;
+    margin: 0 auto;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 4px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+}
+
+form {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+input[type="text"] {
+    flex-grow: 1;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+
+input[type="submit"] {
+    padding: 10px 20px;
+    border-radius: 4px;
+    border: none;
+    background-color: #007BFF;
+    color: #fff;
+    cursor: pointer;
+}
+
+input[type="submit"]:hover {
+    background-color: #0056b3;
+}
+
+#result {
+    margin-top: 20px;
+    text-align: center;
+}