Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Christina Pruitt
Christina Pruitt
3,000 Points

Age restriction on site

I'm trying to put in a pop-up that makes you enter your birth date before continuing to an adult web site. If not, the person would be redirected to another site such as Google. However, I'm getting stuck on the javascript coding.

(Removed the image because I don't want to get flagged)

`` HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <link href='http://fonts.googleapis.com/css?family=Meddon|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> <title>Jen_n_Juice</title> </head> <body> <div class="container"> <h1>Jenn n Juice</h1> <p><a href="#site">Enter site</a></p> <script src="script.js"></script> </div> </body> </html> ``

`` CSS

body { margin: 0; }

.container { height: 800px; padding-top: 170px; text-align: center; background: #BABABA no-repeat; background-size: 50%; background-position: 65% 50%; }

p { font-family: 'Open Sans Condensed', sans-serif; font-weight: bold; }

h1 { font-family: 'Meddon', cursive; }

a:link { text-decoration: none; background-color: #FFD1FF; color: #000; } /* #F7F7F7 */

Media Queries --------------------- @media (max-width: 760px) { .container { width: 100%; padding: 20px; border-top: none; }

.title { font-size: 1.3rem; border: none; } h1 { font-size: 5rem; line-height: 1.1; }

@media (max-width: 460px) {

}

``

`` Javascript

var agePrompt=prompt("Please enter your birthdate.");

if (agePrompt>=18) alert('Welcome!') else { alert('Sorry! Come back in a few years!') document.location="www.google.com";

``

2 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Christina.

You've just got some small syntax errors (missing curly braces and what not), but it's mostly right. Try this:

var agePrompt=prompt("Please enter your birthdate.");

if (agePrompt>=18) {
  alert('Welcome!')
} else {
  alert('Sorry! Come back in a few years!');
  document.location="http://www.google.com";
}
Christina Pruitt
Christina Pruitt
3,000 Points
Christina Pruitt
Christina Pruitt
3,000 Points

Thank you. But what is ideal is for a person entering their birth date. Then, have a code saying "if birth date is less than today's date in 1997" they're okay, "if not, etc." How would I do something like that? Or is that not JavaScript

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

You certainly can, but it'd be much easier to have someone enter their birth date in the more conventional method using <select> dropdowns since then you don't have to worry about which format they input their birth date. You can't do this in an alert dialog, though, so you'd have to have the birth date validation on it's own page and then have your JavaScript run on the submit action.