JQuery lesson from Treehouse
How do I make an jquery lesson from treehouse?
What is a jquery lesson from treehouse? How do you make a jquery lesson from treehouse? This script and codes were developed by Matt Edwards on 12 August 2022, Friday.
JQuery lesson from Treehouse - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery lesson from Treehouse</title>
</head>
<body> <!DOCTYPE HTML>
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/css/grid.css" type="text/css" media="screen"> <link rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/css/style.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'> <script src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/external/matchmedia.js"></script> <script src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/picturefill.js"></script> <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
</head>
<body> <div class="container clearfix"> <div id="logo" class="grid_4"> <object data="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/img/logo.svg" type="image/svg+xml" class="logo"> <a href="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/logo.svg" > <!--[if lte IE 8 ]--> <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/img/logo.gif" alt="Smells Like Bakin"> <!--![endif]--> </a> </object> </div> <div id="nav" class="grid_8 omega" > <ul> <li class="about"><a href="#">About</a></li> <li class="pricing"><a href="#">Cupcakes & Prices</a></li> <li class="locations"><a href="#">Locations</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </div> <div class="grid_12"> <h1 class="hero">We have a wide variety of delicious desserts that are sure to take you by surprise!</h1> </div> <div id="form" class="grid_12 omega"> <h2>Contact Smells Like Bakin'</h2> <form action="contact.php" method="post"> <p> <label for="name">Name:</label> <input name="name" id="name" type="text" class="required"> <span>Please enter your name</span> </p> <p> <label for="email">Email:</label> <input name="email" id="email" type="text" class="required"> <span>Please enter a valid email address</span> </p> <p> <label for="subject">Subject:</label> <input name="subject" id="subject" class="required" type="text"> <span>Please enter your subject</span> </p> <p> <label for="message">Message</label> <textarea name="message" id="message" class="required"></textarea> <span>Please enter your message</span> </p> <p class="submit"> <input type="submit" value="Submit" class="btn-submit"> </p> </form> </div> <div id="footer" class="grid_12"> <div id="about" class="grid_7"> <h2>Inside the Kitchen</h2> <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison & Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </p> <p><a href="#" class="btn-small">Read More</a></p> </div> <div id="contact" class="grid_5 omega"> <h2>Get Bakin’ with Us</h2> <p>Call us: <span class="contact">1-800-CUP-CAKE</span><br> Email us: <a href="#">[email protected]</a></p> <p>We announce all of our new flavors first through Facebook & Twitter, and even take requests!</p> <object data="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/img/facebook.svg" type="image/svg+xml"> <a href="facebook.svg"> <!--[if lte IE 8 ]--> <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/img/facebook.gif" alt="Facebook"> <!--![endif]--> </a> </object> <object data="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/img/twitter.svg" type="image/svg+xml"> <a href="twitter.svg"> <!--[if lte IE 8 ]--> <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/img/twitter.gif" alt="Twitter"> <!--![endif]--> </a> </object> </div> <div id="copyright" class="grid_12"> <p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p> </div> </div> </div> <script type="text/javascript" src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland3/codepen/js/jquery.js"></script> <script type="text/javascript"> //Type your jQuery here </script> </body> </html> <script src="js/index.js"></script>
</body>
</html>
JQuery lesson from Treehouse - Script Codes JS Codes
var $submit = $(".submit input");
var $required = $(".required");
function containsBlanks(){ var blanks = $required.map(function(){ return $(this).val() == ""; }); return $.inArray(true, blanks) != -1;
}
function isValidEmail(email){ return email.indexOf("@") != -1;
}
function requiredFilledIn(){ if(containsBlanks() || !isValidEmail($("#email").val())) $submit.attr("disabled","disabled"); else $submit.removeAttr("disabled");
}
$("form span").hide();
$("input, textarea").focus(function(){ $(this).next().addClass("error").fadeIn("slow");
}).blur(function(){ $(this).next(".valid").fadeOut("slow");
}).keyup(function(){ requiredFilledIn();
});
$(".required").keyup(function(){ if($(this).val() != "") $(this).next().removeClass("error").addClass("valid"); else $(this).next().removeClass("valid").addClass("error");
});
$("#email").keyup(function(){ if(isValidEmail($(this).val())) $(this).next().removeClass("error").addClass("valid"); else $(this).next().removeClass("valid").addClass("error");
});
requiredFilledIn();
![JQuery lesson from Treehouse - Script Codes](http://shots.codepen.io/mtedwards/pen/rHazL-512.jpg)
Developer | Matt Edwards |
Username | mtedwards |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 3,137 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
JQuery .show .hide menu | 2,356 Kb |
Css Skew background for triangular overlay | 2,636 Kb |
JQuery Star flashing effect | 2,487 Kb |
Angular Instagram test | 2,396 Kb |
A Pen by Matt Edwards | 1,700 Kb |
Responsive layout with Fixed width Sidebar | 2,249 Kb |
JQuery featured gallery | 7,630 Kb |
A Quiz, reveal answers and keep score | 3,189 Kb |
Calendar | 3,834 Kb |
Quiz | 2,814 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Cloud upload | Jaflo | 2,774 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!