Adding loader to the formStatus paragraph on submit button press.
Signed-off-by: Eoghan Conlon <eoghanconlon73@skynet.ie>
This commit is contained in:
parent
050fd480fb
commit
38d79217d9
1 changed files with 26 additions and 1 deletions
|
@ -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};
|
||||
|
|
Loading…
Reference in a new issue