In this Project, you will be making a login page. I’ve even added in some code so that if you fail to fill in one of the blanks, make the password less than 8 characters or don’t properly write an email with @gmail.com or @yahoo.com at the end, an error would pop up! 

Now, this is interesting :D.

For this, you will need one folder containing three files preferably made with Sublime text, like me. 

The first file will be named index.html and you will put the following code:



Screen Shot 2017-06-13 at 14.49.47

Screen Shot 2017-06-13 at 14.49.58

Screen Shot 2017-06-13 at 14.51.13



 

The second file will be named style.css and the code I wrote is the following:



html, body {
margin: 0;
padding: 0;
font-family: ‘Montserrat’, sans-serif; }

body {  

background-image: url();

background-size: cover;
background-repeat: no-repeat;
background-color: #140e07;
color: #fff; }

.container {
max-width: 940px; }

/* Header */
.header {
text-align: center;
margin-bottom: 50px; }

.header .container {
padding: 30px 0;
border-bottom: 1px solid #e5e5e5; }

/* Main */
.main {
margin: 80px 0; }

.main h1 {
font-size: 30px;
margin: 0 0 20px 0; }

/* Form */
form input.form-control {
border: 0px;
border-radius: 0px; }

.main .btn {
margin-top: 30px;
color: #fff;
background: rgba(0,240,190,0.25);
border: 0px;
border-radius: 0px; }

.first-name-error,
.last-name-error,
.email-error,
.password-error {
color: #dd4b39;
font-weight: 600; }

/* Footer */
.footer .container {
padding: 20px 0;
border-top: 1px solid #e5e5e5; }

.footer ul {
list-style: none;
padding: 0 20px;
margin-bottom: 80px; }

.footer li {
display: inline;
margin-right: 20px; }



 

Lastly, on your third file, name it app.js and copy the following code:



var main = function() {
$(‘form’).submit(function() {
var firstName = $(‘#first’).val();
var lastName = $(‘#last’).val();
var email = $(‘#email’).val();
var password = $(‘#password’).val();

if (firstName === “”) {
$(“.first-name-error”).text(“Please enter your first name”)}

else {
$(“.first-name-error”).text(“”)}

if (lastName === “”) {
$(“.last-name-error”).text(“Please enter your last name”)
} else {
$(“.last-name-error”).text(“”)}

if (email === “”) {
$(“.email-error”).text(“Please enter your email address”)
} else if (email === “test@example.com”) {
$(“.email-error”).text(“This email is already taken.”)
} else {
$(“.email-error”).text(“”)}

if (password === “”) {
$(“.password-error”).text(“Please enter your password”)
} else if (password.length < 8) {
$(“.password-error”).text(“Short passwords are easy to guess. Try one with at least 8 characters.”)
} else {
$(“.password-error”).text(“”)}

return false;
});

}

$(document).ready(main);



 

After saving this, try out your project! It should look something like this….

Screen Shot 2017-06-13 at 14.52.38

This is how an error would look like…

Screen Shot 2017-06-13 at 14.53.29

Yours truly,

L.O.A.S.H

Advertisements
Posted by:Elizabeth

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s