diff --git a/.gitignore b/.gitignore
index 7490567..e71ba1c 100644
--- 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
new file mode 100644
index 0000000..6379ede
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+ GB Postcode Lookup
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/script.js b/docs/script.js
new file mode 100644
index 0000000..b67faef
--- /dev/null
+++ 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:
' + data + '';
+ })
+ .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;
+ }
+ });
+}
\ No newline at end of file
diff --git a/docs/styles.css b/docs/styles.css
new file mode 100644
index 0000000..3fad616
--- /dev/null
+++ 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;
+}
\ No newline at end of file