From 38d79217d95c398f0e6d55aa6b28646bbb3983ef Mon Sep 17 00:00:00 2001
From: Eoghan Conlon <eoghanconlon73@skynet.ie>
Date: Sun, 3 Sep 2023 20:01:41 +0100
Subject: [PATCH] Adding loader to the formStatus paragraph on submit button
 press.

Signed-off-by: Eoghan Conlon <eoghanconlon73@skynet.ie>
---
 src/signup.html | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)
diff --git a/src/signup.html b/src/signup.html
index 61c2b01..4a42f15 100644
--- a/src/signup.html
+++ b/src/signup.html
@@ -4,6 +4,30 @@
     <meta charset="UTF-8"/>
     <title>Skynet Sign-up</title>
     <link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/>
+    <!-- Below to be put refactored into this page's css file upon completion of that branch -->
+    <style>
+        /* Taken from the W3 schools loader tutorial */
+        .loader {
+            border: 16px solid #f3f3f3;
+            border-radius: 50%;
+            border-top: 16px solid #3498db;
+            width: 60px;
+            height: 60px;
+            -webkit-animation: spin 2s linear infinite; /* Safari */
+            animation: spin 20s linear;
+        }
+
+        /* Safari */
+        @-webkit-keyframes spin {
+            0% { -webkit-transform: rotate(0deg); }
+            100% { -webkit-transform: rotate(360deg); }
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
 </head>
 <body>
 <h2>Welcome to Skynet</h2>
@@ -26,9 +50,10 @@
 <script>
     const formEl = document.getElementById('register');
     formEl.addEventListener('submit', (listener) => formHandler(listener));
-
     function formHandler(listener) {
         listener.preventDefault();
+        //HTML below taken from the W3 schools tutorial ()
+        document.getElementById('formStatus').innerHTML = "<div class='loader'></div>"
         const formData = new FormData(formEl);
         const email = formData.get("email");
         const object = {email: email};
