Coder-ACJHP/login.html

## login.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Login page</title>
</head>
<body>
    <section>
        <form action="" class="container" id="login-form">
            <div class="box">
                <img src="icons/compass.png" class="box-icon">
                <p class="box-text">LOG IN</p>
                <div>
                    <input type="email" id="email" class="form-inputs" placeholder="Email">
                    <div id="email-shadow"></div>
                </div>
                <div>
                    <input type="password" id="password" class="form-inputs" placeholder="Password">
                    <div id="password-shadow"></div>
                </div>
                <div>
                    <input type="checkbox" name="remember" id="remember-me">
                    <span class="remember-me-text">Remember me</span>
                </div>
                <button type="submit" class="form-button">Login</button>
                <label class="form-label">Don't have an account?
                    <a href="#" class="form-link">Sing up</a>
                </label>
                <label class="form-label">
                    <a href="#" class="form-link">Forgot password?</a>
                </label>
            </div>
        </form>
    </section>
    <script src="script.js"></script>
</body>
</html>

## script.js
window.onload = () => {

    var emailInput = document.getElementById('email');
    var emailInputShadow = document.getElementById('email-shadow');
    var passwordInput = document.getElementById('password');
    var passwordInputShadow = document.getElementById('password-shadow');

    var compass = document.querySelector('.box-icon');

    document.body.onclick = ()=>{
        var selectedObject = document.activeElement;
        if(selectedObject === emailInput) {
            compass.setAttribute('class', 'box-icon');
            passwordInputShadow.removeAttribute('class');
            emailInput.setAttribute('placeholder', 'Email');
            emailInputShadow.setAttribute('class', 'email-shadow');
        } else if(selectedObject === passwordInput) {
            compass.setAttribute('class', 'rotate-icon-90');
            emailInputShadow.removeAttribute('class');
            passwordInput.setAttribute('placeholder', 'Password');
            passwordInputShadow.setAttribute('class', 'password-shadow');
        }
    }


    /** Create function to validate the form */
    function validateForm() {
        var isValid = true;
        var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        var formElements = document.querySelectorAll('#login-form input[id="email"], input[id="password"]');

        formElements.forEach(elem=> {
            if(elem.id === 'email') {
                if(elem.value.length <= 0 || !elem.value.match(emailRegExp)) {
                    elem.value = '';
                    elem.setAttribute('placeholder', 'Invalid email!');
                    emailInputShadow.setAttribute('class', 'email-error-shadow');
                    isValid = false;
                }
            } else {
                if(elem.value.length <= 0 || elem.value.length >= 15) {
                    elem.setAttribute('placeholder', 'Invalid password!');
                    passwordInputShadow.setAttribute('class', 'password-error-shadow');
                    isValid = false;
                }
            }
        });

        return isValid;
    }

    /** Mock server accepting Json object so we need to create Json object from form datas */
    function createJsonobj(userEmail, userPassword, userIdentity) {
        /** User Id it's optional if it's undefined generate random Id */
        if(userIdentity === undefined) {
            userIdentity = Math.floor((Math.random() * 99) + 1);
        }
        var jsonObject = JSON.stringify({
            title: emailInput.value,
            body: passwordInput.value,
            userId: userIdentity
        });
        return jsonObject;
    }

    function ajaxPost(url, data) {
        if(validateForm() == true) {
            /** Animation trigger */
            compass.setAttribute('class', 'rotate-icon-360');

            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.onreadystatechange = () => {
                if(xhr.readyState == XMLHttpRequest.DONE) {
                    console.log(xhr.responseText);
                } else {
                    console.log(xhr.status);
                }
            }

            xhr.setRequestHeader("Content-type", "application/json; charset=UTF-8");
            xhr.send(data);
        }
    }

    var loginButton = document.querySelector('.form-button');
    /** Mock database server url */
    var url = 'https://jsonplaceholder.typicode.com/posts';
    var loginObj = createJsonobj(emailInput.value, passwordInput.value);

    loginButton.onclick = (event)=> {
        event.preventDefault();
        ajaxPost(url, loginObj);
    }

}

## style.css
html, body {
    margin: 0;
    padding: 0;
    background-color: rgb(228, 228, 228);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

::selection {
    color: white;
    background: rgba(0, 68, 88, 0.445);
}

::-moz-selection {
    color: white;
    background: rgba(0, 68, 88, 0.445);
}

::placeholder {
    color: rgba(225, 240, 255, 0.555);
}

::-moz-placeholder {
    color: rgba(225, 240, 255, 0.555);
}

.container {
    width: 400px;
    height: 510px;
    top: 20%;
    left: 40%;
    position: fixed;
    padding: 30px 20px 30px 20px;

    border-radius: 5px;
    background: linear-gradient(to left bottom, #005d81, #45dcfc);
    background: -webkit-linear-gradient(to left bottom, #005d81, #45dcfc);
    background: -moz-linear-gradient(to left bottom, #005d81, #45dcfc);
}

.box {
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

.box-icon {
    width: 125px;
    margin: 0 auto;
    margin-bottom: 10px;
    transition: 0.2s;
}

.rotate-icon-90 {
    width: 125px;
    margin: 0 auto;
    margin-bottom: 10px;
    transform: rotate(-90deg);
    transition: 0.2s;
}

.rotate-icon-360 {
    width: 125px;
    margin: 0 auto;
    margin-bottom: 10px;
    -webkit-animation: rotate-360;
    animation-name: rotate-360;
    animation-duration: 4s;
    animation-iteration-count: 1;
}

@keyframes rotate-360 {
    0% {transform: rotate(360deg);}
    100%  {transform: rotate(-360deg);}
}

@-webkit-keyframes rotate-360 {
    0% {transform: rotate(360deg);}
    100%  {transform: rotate(-360deg);}
}

.box-text {
    font-size: 2em;
    font-weight: bolder;
    margin: 0 auto;
    color: white;
    margin-bottom: 25px;
}

.form-inputs {

    width: 320px;
    border: 0;
    padding: 0 5px 5px 5px;
    margin: 0 35px 40px 35px;
    background: transparent;
    border-bottom: 1px solid white;

    font-size: 20px;
    color: whitesmoke;
}

/** Remove blue border on focusing in Chrome*/
.form-inputs:focus {
    outline: 0;
}

/** Remove yellow background on auto complete in Chrome*/
@-webkit-keyframes autofill {
    to {
        color: whitesmoke;
        background: transparent;
    }
}

.form-inputs:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

.email-shadow, .password-shadow {
    width: 330px;
    position: absolute;
    margin-left: 35px;
    height: 10px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(255, 255, 255, 0.836);
}

.email-shadow {
    margin-top: -40px;
}

.password-shadow {
    margin-top: -40px;
}

/** Make background color red for form validation*/
.email-error-shadow, .password-error-shadow {
    width: 330px;
    position: absolute;
    margin-left: 35px;
    height: 10px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(255, 74, 74, 0.836);
}

.email-error-shadow {
    margin-top: -40px;
}

.password-error-shadow {
    margin-top: -40px;
}

#remember-me {
    width: 15px;
    display: inline-block;
    margin: 0 0 30px 35px;
    cursor: pointer;
}

.remember-me-text {
    color: #575757;
}

.form-button {
    width: 330px;
    font-size: 20px;
    padding: 8px 0 8px 0;
    color: rgb(87, 87, 87);
    margin: 0 auto 20px auto;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.form-label {
    flex: 1;
    margin: 5px auto;
    color: rgb(87, 87, 87);
}

.form-link {
    text-decoration: none;
    cursor: pointer;
    color: rgb(58, 58, 58);
}
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>Login page</title>
	</head>
	<body>
	<section>
	<form action="" class="container" id="login-form">
	<div class="box">
	<img src="icons/compass.png" class="box-icon">
	<p class="box-text">LOG IN</p>
	<div>
	<input type="email" id="email" class="form-inputs" placeholder="Email">
	<div id="email-shadow"></div>
	</div>
	<div>
	<input type="password" id="password" class="form-inputs" placeholder="Password">
	<div id="password-shadow"></div>
	</div>
	<div>
	<input type="checkbox" name="remember" id="remember-me">
	<span class="remember-me-text">Remember me</span>
	</div>
	<button type="submit" class="form-button">Login</button>
	<label class="form-label">Don't have an account?
	<a href="#" class="form-link">Sing up</a>
	</label>
	<label class="form-label">
	<a href="#" class="form-link">Forgot password?</a>
	</label>
	</div>
	</form>
	</section>
	<script src="script.js"></script>
	</body>
	</html>
	window.onload = () => {

	var emailInput = document.getElementById('email');
	var emailInputShadow = document.getElementById('email-shadow');
	var passwordInput = document.getElementById('password');
	var passwordInputShadow = document.getElementById('password-shadow');

	var compass = document.querySelector('.box-icon');

	document.body.onclick = ()=>{
	var selectedObject = document.activeElement;
	if(selectedObject === emailInput) {
	compass.setAttribute('class', 'box-icon');
	passwordInputShadow.removeAttribute('class');
	emailInput.setAttribute('placeholder', 'Email');
	emailInputShadow.setAttribute('class', 'email-shadow');
	} else if(selectedObject === passwordInput) {
	compass.setAttribute('class', 'rotate-icon-90');
	emailInputShadow.removeAttribute('class');
	passwordInput.setAttribute('placeholder', 'Password');
	passwordInputShadow.setAttribute('class', 'password-shadow');
	}
	}


	/** Create function to validate the form */
	function validateForm() {
	var isValid = true;
	var emailRegExp = /^[a-zA-Z0-9.!#$%&'+/=?^_`{\|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)$/;
	var formElements = document.querySelectorAll('#login-form input[id="email"], input[id="password"]');

	formElements.forEach(elem=> {
	if(elem.id === 'email') {
	if(elem.value.length <= 0 \|\| !elem.value.match(emailRegExp)) {
	elem.value = '';
	elem.setAttribute('placeholder', 'Invalid email!');
	emailInputShadow.setAttribute('class', 'email-error-shadow');
	isValid = false;
	}
	} else {
	if(elem.value.length <= 0 \|\| elem.value.length >= 15) {
	elem.setAttribute('placeholder', 'Invalid password!');
	passwordInputShadow.setAttribute('class', 'password-error-shadow');
	isValid = false;
	}
	}
	});

	return isValid;
	}

	/** Mock server accepting Json object so we need to create Json object from form datas */
	function createJsonobj(userEmail, userPassword, userIdentity) {
	/** User Id it's optional if it's undefined generate random Id */
	if(userIdentity === undefined) {
	userIdentity = Math.floor((Math.random() * 99) + 1);
	}
	var jsonObject = JSON.stringify({
	title: emailInput.value,
	body: passwordInput.value,
	userId: userIdentity
	});
	return jsonObject;
	}

	function ajaxPost(url, data) {
	if(validateForm() == true) {
	/** Animation trigger */
	compass.setAttribute('class', 'rotate-icon-360');

	var xhr = new XMLHttpRequest();
	xhr.open('POST', url, true);
	xhr.onreadystatechange = () => {
	if(xhr.readyState == XMLHttpRequest.DONE) {
	console.log(xhr.responseText);
	} else {
	console.log(xhr.status);
	}
	}

	xhr.setRequestHeader("Content-type", "application/json; charset=UTF-8");
	xhr.send(data);
	}
	}

	var loginButton = document.querySelector('.form-button');
	/** Mock database server url */
	var url = 'https://jsonplaceholder.typicode.com/posts';
	var loginObj = createJsonobj(emailInput.value, passwordInput.value);

	loginButton.onclick = (event)=> {
	event.preventDefault();
	ajaxPost(url, loginObj);
	}

	}
	html, body {
	margin: 0;
	padding: 0;
	background-color: rgb(228, 228, 228);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	::selection {
	color: white;
	background: rgba(0, 68, 88, 0.445);
	}

	::-moz-selection {
	color: white;
	background: rgba(0, 68, 88, 0.445);
	}

	::placeholder {
	color: rgba(225, 240, 255, 0.555);
	}

	::-moz-placeholder {
	color: rgba(225, 240, 255, 0.555);
	}

	.container {
	width: 400px;
	height: 510px;
	top: 20%;
	left: 40%;
	position: fixed;
	padding: 30px 20px 30px 20px;

	border-radius: 5px;
	background: linear-gradient(to left bottom, #005d81, #45dcfc);
	background: -webkit-linear-gradient(to left bottom, #005d81, #45dcfc);
	background: -moz-linear-gradient(to left bottom, #005d81, #45dcfc);
	}

	.box {
	width: 100%;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	}

	.box-icon {
	width: 125px;
	margin: 0 auto;
	margin-bottom: 10px;
	transition: 0.2s;
	}

	.rotate-icon-90 {
	width: 125px;
	margin: 0 auto;
	margin-bottom: 10px;
	transform: rotate(-90deg);
	transition: 0.2s;
	}

	.rotate-icon-360 {
	width: 125px;
	margin: 0 auto;
	margin-bottom: 10px;
	-webkit-animation: rotate-360;
	animation-name: rotate-360;
	animation-duration: 4s;
	animation-iteration-count: 1;
	}

	@keyframes rotate-360 {
	0% {transform: rotate(360deg);}
	100% {transform: rotate(-360deg);}
	}

	@-webkit-keyframes rotate-360 {
	0% {transform: rotate(360deg);}
	100% {transform: rotate(-360deg);}
	}

	.box-text {
	font-size: 2em;
	font-weight: bolder;
	margin: 0 auto;
	color: white;
	margin-bottom: 25px;
	}

	.form-inputs {

	width: 320px;
	border: 0;
	padding: 0 5px 5px 5px;
	margin: 0 35px 40px 35px;
	background: transparent;
	border-bottom: 1px solid white;

	font-size: 20px;
	color: whitesmoke;
	}

	/** Remove blue border on focusing in Chrome*/
	.form-inputs:focus {
	outline: 0;
	}

	/** Remove yellow background on auto complete in Chrome*/
	@-webkit-keyframes autofill {
	to {
	color: whitesmoke;
	background: transparent;
	}
	}

	.form-inputs:-webkit-autofill {
	-webkit-animation-name: autofill;
	-webkit-animation-fill-mode: both;
	}

	.email-shadow, .password-shadow {
	width: 330px;
	position: absolute;
	margin-left: 35px;
	height: 10px;
	border: 0;
	box-shadow: inset 0 12px 12px -12px rgba(255, 255, 255, 0.836);
	}

	.email-shadow {
	margin-top: -40px;
	}

	.password-shadow {
	margin-top: -40px;
	}

	/** Make background color red for form validation*/
	.email-error-shadow, .password-error-shadow {
	width: 330px;
	position: absolute;
	margin-left: 35px;
	height: 10px;
	border: 0;
	box-shadow: inset 0 12px 12px -12px rgba(255, 74, 74, 0.836);
	}

	.email-error-shadow {
	margin-top: -40px;
	}

	.password-error-shadow {
	margin-top: -40px;
	}

	#remember-me {
	width: 15px;
	display: inline-block;
	margin: 0 0 30px 35px;
	cursor: pointer;
	}

	.remember-me-text {
	color: #575757;
	}

	.form-button {
	width: 330px;
	font-size: 20px;
	padding: 8px 0 8px 0;
	color: rgb(87, 87, 87);
	margin: 0 auto 20px auto;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	}

	.form-label {
	flex: 1;
	margin: 5px auto;
	color: rgb(87, 87, 87);
	}

	.form-link {
	text-decoration: none;
	cursor: pointer;
	color: rgb(58, 58, 58);
	}