Tag: jquery

JQuery Projects | Essentials for a Login Page

by Elizabeth, posted in Awesome, D.I.Y, Education, Programming, You can.

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

JQuery Projects | DIY Meme

by Elizabeth, posted in Awesome, D.I.Y, Education, Programming, Something Cool, Technology

Well, the title says it allll. The project I’m about to present to you will give you the power to create…. Memes!!! 

Let’s begin…

Make your folder in which you will be placing all the HTML, CSS and others. Are you done? 

When you finish, make 3 different files. Name one of the files: index.html, style.css, and app.js. I’m using Sublime Text for this. 

On the index.html file, you can copy the code below:

Screen Shot 2017-06-12 at 23.58.33.png

Screen Shot 2017-06-12 at 23.58.45.png

Screen Shot 2017-06-12 at 23.58.52.png

Notice the numbering to prevent confusion.

For the style.css file, copy the following:

html, body {
margin: 0;
padding: 0;
font-family: “Open Sans”, sans-serif;
}

.header {
background: #ffe780;
margin-bottom: 40px;
padding: 10px 0;
}

.header img {
width: 90px;
margin: -10px 10px 0 0;
}

.header h1 {
margin: 0;
display: inline-block;
}

.meme {
position: relative;
}

.top-caption,
.bottom-caption {
font-family: Impact, sans-serif;
color: #fff;
text-shadow: #000 0px 0px 6px;
text-transform: uppercase;
text-align: center;
font-size: 50px;
}

.top-caption {
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
}

.bottom-caption {
bottom: 10px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
}

.tool h2 {
margin-top: 0;
margin-bottom: 20px;
font-size: 25px;
}

.tool form label {
margin-bottom: 10px;

}

.tool input {
border-radius: 0;
border: 0;
border-bottom: 5px solid #ff7171;
box-shadow: none;
}

input[type=”text”]:focus {
border: 0;
border-bottom: 5px solid #ff7171;
outline: 0;
box-shadow: none;
}

 

 

Lastly, for the app.js file, copy the following code:

var main = function() {

$(‘#top-text’).keyup(function() {
var top = $(this).val();
$(‘.top-caption’).text(top);
});

$(‘#bottom-text’).keyup(function() {
var bottom = $(this).val();
$(‘.bottom-caption’).text(bottom);
});

$(‘#image-url’).keyup(function() {
var image = $(this).val();
$(‘#meme’).attr(‘src’, image);
});

};

$(document).ready(main);

 

 

Now, save your project. Open your folder which you’ve placed all these files and double click on the HTML file. This will open up and you will get something like this…..

Screen Shot 2017-06-11 at 19.26.57

If you will notice, there is this (cute) dog(gie) up there on the screenshot with some text. What you have to do is search for a photo that you want, right click to copy photo address and paste it on the Image Url. Add some text. Experiment! Try changing the colors in the style.css to change colours and placing!

Yours truly,

L.O.A.S.H