Simple Age Verification with jQuery

verificationSS

Today I will go over a simple age verification that I built during my downtime this morning. It uses basic jQuery functions to select, based on the users answer, whether they are of age to view the content of a website or not. This may be used in other ways as well in order to block content before the user decides to view it.

This is a common function on the web today so I decided to show a very easy way to accomplish the task.

I built this project online, and it can be viewed here. (jsfiddle)

I styled the page using HTML and CSS3.

Note: The styling was done without using tables as they are outdated and should rarely be used in modern web design.

In order to accomplish this task, We must include our jQuery file in between the head tags:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>       

or at the bottom of your body:

<body>

...BODY CONTENT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</body>

as shown above.

Then we write the jquery that will reference the linked document and give us the desired output. before we start coding the functionality, we  need to set our variables so the jQuery knows what we mean when we refer to “Denied” and “Welcome”

var Denied = "Access is denied.";
var Welcome = "Welcome! You are authorized to view age restricted content";

<script type="text/javascript">
$(document).ready(function () {
      $(".Yes").click(function () {
      if (alert(Welcome)) {
      } else {
        window.location.href ="http://www.jhauge.com"
        return false;
        }
    });

    $(".No").click(function () {
      if (alert(Denied)) {
      } else {
        window.location.href ="http://www.google.com"
        return false;
        }
    });

});
</script>

The script above is what the complete jQuery script looks like. Now I will break it down to explain the functionality.

$(document).ready(function () {
SCRIPT IN HERE
});

First we reference the attached jquery file letting it know we are going to be calling a function. Then we reference our div with the class of .Yes (letting the jquery know what to perform the function on) and then we call the function we want to use, in this case it’s .click().

 $(".Yes").click(function () {
      if (alert(Welcome)) {
      } else {
        window.location.href ="http://www.LINK.com"
        return false;
        }

After the function is called, the next step is to perform an action when that function is completed. For our purposes, we have an alert box pop up when yes is selected by the user telling them that access has been granted, and it forwards them to the page that was hidden using the function window.location.href .

The same was done for the div with the class of .No in order to make the no button functional. The difference is that if no is clicked, the user is directed to a search engine instead of to the protected content, leading those who are underage away from the protected content.

I hope you found this tutorial useful. Thanks for stopping by!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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