.container
	form(autocomplete="off" id='form')
		h1#message Get Started
		small#smallMessage 
		.field
			input(type="email" name="email" placeholder="Email" id="email" autocomplete="off")
			label(for="email") Email
				
		.field
			input(type="password" name="password" placeholder="Password" id="password" autocomplete="new-password")
			label(for="password") Password
				
		button#submit Create My Account
		p By signing up, I agree to to the Terms of Service and Privacy Policy

$orange : #ff8473;


body,
html {
	height: 100%;
}

body {
	font-family: "Lato", sans-serif;
	background: $orange;
	display: flex;
	align-items: center;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	color: white;
}

.container {
	width: 400px;
}

form {
	display: flex;
	flex-direction: column;
	//background transparent to allow for :before&::after effect
	background: transparent;
	max-width: 320px;
	//height: 300px;
	padding: 2rem 2rem 2rem 2rem;
	position: relative;
	&::before,
	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		transition: all 0.5s ease;
	}
	&::before {
		z-index: -1;
		background: transparent;
		transform: translateX(-3.5rem) translateY(-3.75rem);
		border: 6px solid #0e39fe;
	}
	&::after {
		background: #0ea8ec;
		z-index: -2;
		transform: translateX(-2rem) translateY(-2.25rem);
	}
	h1 {
		text-align: center;
		margin: 0 0 0.25rem 0;
		padding: 0;
		font-size: 1.5rem;
	}
	small {
		display: block;
		margin: 0 auto 1rem;
		padding: 0;
		font-size: 14px;
	}
	//focus-with in pseudo element allows us to change elements inside the form when "focused/clicked on"
	&:focus-within {
		background: #0ea8ec;
		&::before {
			width: 0%;
			height: 0%;
			//border: ;
			transform: translatex(0px) translatey(0px);
		}
	}
	//end focus-within
	//containers for input and labels
	.field {
		display: flex;
		flex-flow: column-reverse;
		margin-bottom: 1em;
	}

	& label,
	input {
		transition: all 0.3s ease;
		touch-action: manipulation;
	}
	& label {
		// position: absolute;
		// font-size: 21px;
		// color: white;
		// margin: 0;
		opacity: 0;
	}
	& input {
		padding: 10px 20px;
		border: 4px solid white;
		margin: 0 1.5rem;
		background-color: transparent !important;
		-webkit-appearance: none;
		//font-weight: bold;
		color: white;
		//important to override chrome's yellow background and black text autofill
		&:-webkit-autofill {
			background-color: transparent !important;
			-webkit-box-shadow: 0 0 0px 1000px #0ea8ec inset;
			-webkit-text-fill-color: white !important;
		}
		&::placeholder {
			color: white;
		}
		&:focus {
			color: #0e39fe;
			font-weight: bold;
			outline: 0;
			border: 6px solid #0e39fe;
		}
		&::-webkit-input-placeholder {
			opacity: 1;
			transition: inherit;
		}

		&:focus::-webkit-input-placeholder {
			opacity: 0;
		}
	}

	& button {
		border: none;
		padding: 0.85rem 1rem;
		margin-top: 2rem;
		background-color: #0e39fe;
		color: white;
		font-size: 0.75rem;
		text-transform: uppercase;
		width: 65%;
		position: absolute;
		bottom: -20px;
		right: 18%;
		letter-spacing: 0.15em;
		transition: all 0.3s ease;
		&:hover {
			border: 6px solid #090c9b;
		}
	}
	p {
		font-size: 0.75rem;
		line-height: 1.125rem;
		margin: 0.5rem 1.5rem 1.75rem 1.5rem;
		&.success-message {
			font-size: 1.25rem;
			text-align: center;
			line-height: 2rem;
			margin: 1.5rem auto 5rem auto;
		}
	}
}

const form = document.querySelector('form');
const message = document.getElementById('message');
const smallMessage = document.getElementById('smallMessage');
const emailMessage = 'Type your email';
const passwordMessage = 'Choose your password';
const email = document.getElementById('email');
const password = document.getElementById('password');
const submitBtn = document.getElementById('submit');

function firstMessage(){
	message.innerHTML = emailMessage;
	smallMessage.innerHTML = "";
	document.body.style.background= '#88C9E8';
}

// function message(el,message,color){
// 	el.innerHTML = message;
// 	document.body.style.background = color;
// }

function secondMessage(){
	message.innerHTML = passwordMessage;
	
	document.body.style.background ='#D5F3A6';
}
function length(){
	if(password.value.length <= 3){
		smallMessage.innerHTML = "Make it strong";
		
	} 
	else if(password.value.length  > 3 && password.value.length <10){
		smallMessage.innerHTML = "Strong as a bull!";
		
	}
	else if(password.value.length >=10){
		smallMessage.innerHTML = "It's unbreakable!!!";
		
	}
	else{
		smallMessage.innerHTML = "";
	}
}

function formValidation(){
	//step 1 email
	//display Type your email when user clicks on input and types, 
	//hide after user clicks on something else
	email.addEventListener("input",firstMessage);
	//step 2 password 
	//display Choose your password as user clicks on input
	//change small message as user enters longer password 
	password.addEventListener('input', secondMessage);
	password.addEventListener('keyup', length);

	//step 3 when input 1 and 2 are filled out 
	//display message You're a click away, small message that is why you are here fore
	submitBtn.addEventListener('mouseover', function(event){
		message.innerHTML="You're a click away";
		smallMessage.innerHTML = "Do it. That's what you are here for.";
		document.body.style.background = '#FCEFA6';
	});
	
	//step 4 button click
	//display Congratulations, there is a confirmation link in your email
	submitBtn.addEventListener('click', function(event){
	form.innerHTML = ' <h1>Good job!</h1><p class="success-message">There is a confirmation link waiting in your email inbox.</p>';
	document.body.style.background = '#D7F5DE';
});
	
	
}

formValidation();