FILEUP

LOG | FILES | OVERVIEW
F diff --git a/css/style.css b/css/style.css
--- a/css/style.css
+++ b/css/style.css
  	margin: 1rem 0px 0.3rem 0px;
  }
  
+ 
+ .hero_form_error {
+ 	animation: fadein 0.2s;
+ 	background-color: #ff4d4d;
+ 	color: #ffffff;
+ 	padding-left: 0.5rem;
+ 	border-bottom-left-radius: 0.5rem;
+ 	border-bottom-right-radius: 0.5rem;
+ 	margin-top: -0.2rem;
+ 
+ }
+ @keyframes fadein {
+ 	from { opacity: 0; }
+ 	to   { opacity: 1; }
+ }
  input {
  	min-width: 300px;
  	border: 1px solid #bbb;
F diff --git a/index.php b/index.php
--- a/index.php
+++ b/index.php
  					</div>
  
  					<div class="vcenter">
- 						<form action="/register.php" method="post">
+ 						<form name="hero_form" action="/register.php" method="post" onsubmit="return validate_hero_form()">
  							<h2>Get started</h2>
  							<div class="content">
  								<p>Username</p>
  								<input type="text" id="username" name="username">
+ 								<p id="username-length-error" class="hero_form_error" hidden>Please specify a username</p>
+ 
  								<p>Email address</p> 
  								<input type="text" id="email" name="email">
+ 								<p id="email-error" class="hero_form_error" hidden>Invalid email address</p>
+ 
  								<p>Password</p>
  								<input type="password" id="password" name="password">
+ 
  								<p>Repeat Password</p>
  								<input type="password" id="password2" name="password2">
+ 								<p id="password-error" class="hero_form_error" hidden>Passwords didn't match</p>
  								<input type="submit" value="Sign up">
  								<p style="font-size: 1.1em;">Already have an account? <a href="login.html">Sign in</a>
  							</div>
  		</div>
  
  		<script src="js/arrows.js"></script>
+ 		<script src="js/validate_hero.js"></script>
  
  	</body>
  	<html>
F diff --git a/js/arrows.js b/js/arrows.js
--- a/js/arrows.js
+++ b/js/arrows.js
  const minSpeed = 3;
  const maxSpeed = 8;
  const delay = 1500;
- const lifetime = 25000;
+ const lifetime = 20000;
  
  function make_arrow() {
  	const svg = document.getElementById("protoarrow").cloneNode();
F diff --git a/js/validate_hero.js b/js/validate_hero.js
new file mode 100644
--- /dev/null
+++ b/js/validate_hero.js
+ 
+ function clear_hero_errors()
+ {
+ 	var errors = document.getElementsByClassName("hero_form_error");
+ 	var i;
+ 	for (i = 0; i < errors.length; i++)
+ 	{
+ 		errors[i].hidden = true;
+ 	}
+ }
+ function validate_hero_form()
+ {
+ 			var username=document.forms["hero_form"]["username"].value;
+ 			var email=document.forms["hero_form"]["email"].value;
+ 			var password=document.forms["hero_form"]["password"].value;
+ 			var password2=document.forms["hero_form"]["password2"].value;
+ 
+ 			var flag=true;
+ 			clear_hero_errors();
+ 
+ 			if(username.length==0)
+ 			{
+ 				document.getElementById("username-length-error").hidden=false;
+ 				flag=false;
+ 			}
+ 			if(!email.match(/\S+@\S+/))
+ 			{
+ 				document.getElementById("email-error").hidden=false;
+ 				flag=false;
+ 			}
+ 			if(password !== password2)
+ 			{
+ 				document.getElementById("password-error").hidden=false;
+ 				flag=false;
+ 			}
+ 
+ 			if(flag)
+ 			{
+ 				document.getElementById("success").hidden=false;
+ 			}
+ 			return flag;
+ 
+ }