Adding loader to the formStatus paragraph on submit button press.

Signed-off-by: Eoghan Conlon <eoghanconlon73@skynet.ie>
This commit is contained in:
eoghanconlon73 2023-09-03 20:01:41 +01:00
parent 050fd480fb
commit 38d79217d9

View file

@ -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};