JQuery lesson from Treehouse

Developer
Matt Edwards
Size
3,137 Kb
Views
14,168
  1. JQuery lesson from Treehouse Previews
  2. JQuery lesson from Treehouse HTML Codes
  3. JQuery lesson from Treehouse JS Codes

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 Previews
IQ Test

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 &amp; 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 &amp; 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
JQuery lesson from Treehouse - Script Codes
Home Page Home
Developer Matt Edwards
Username mtedwards
Uploaded August 12, 2022
Rating 3
Size 3,137 Kb
Views 14,168
Do you need developer help for JQuery lesson from Treehouse?

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!

Matt Edwards (mtedwards) Script Codes
Name
JQuery Star flashing effect
JQuery featured gallery
Basic jQuery Tabs
Css Skew background for triangular overlay
Let it Rain
JQuery Slider
JQuery .show .hide menu
Quiz
Angular Form JSON test
A Pen by Matt Edwards
Create amazing Facebook ads with AI!

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!