vapidbabble/index.html

## index.html
<html>
  <head>
    <title>jQuery Mini Challenge 1</title>
  </head>
  <body>
    <header>
      <h1 id ="main-heading">Introducing jQuery</h1>
    </header>
    <section class = "first-section">
      <h3>What is jQuery?</h3>
      <p>jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.</p>
    </section>
    <section class = "second-section">
      <h3>Why jQuery?</h3>
      <ul>
        <li class="list-item">Lightweight Footprint</li>
        <li class="list-item">CSS3 Compliant</li>
        <li class="list-item">Cross-Browser</li>
      </ul>
    </section>

    <footer>
      <p>Source: <a href="https://jquery.com/">www.jquery.com</a></p>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </footer>
  </body>
</html>

## jquery-101-mini-challenge-1.markdown

      
    Raw
  

              jquery-101-mini-challenge-1.markdown
            
          
    jQuery 101 - Mini Challenge 1

A Pen by John Wise on CodePen.
License.

  
## script.js
//Use jQuery by including a script tag in your html and using this as your CDN source: "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"

//Make sure the page has loaded and is ready to be manipulated:

  //1. Select the element with id "main-heading" and log its text to console.
  var mainheading = $("#main-heading").html();
  console.log(mainheading);

  //2. Select the element with class "first-section" and log its text to console.
  var firstsection = $(".first-section").html();
  console.log(firstsection);

//3. Select elements with the html tag h3 and log its text to console.
  var h3 = $("h3");

h3.each(function(currentElement){
  console.log("h3 tags", currentElement.html());
});

//4. Select the second item in the list(using the class "list-item") and log its text to console.

console.log("Second list item:", $(".list-item").eq(1).html());

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<html>
	<head>
	<title>jQuery Mini Challenge 1</title>
	</head>
	<body>
	<header>
	<h1 id ="main-heading">Introducing jQuery</h1>
	</header>
	<section class = "first-section">
	<h3>What is jQuery?</h3>
	<p>jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.</p>
	</section>
	<section class = "second-section">
	<h3>Why jQuery?</h3>
	<ul>
	<li class="list-item">Lightweight Footprint</li>
	<li class="list-item">CSS3 Compliant</li>
	<li class="list-item">Cross-Browser</li>
	</ul>
	</section>

	<footer>
	<p>Source: <a href="https://jquery.com/">www.jquery.com</a></p>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	</footer>
	</body>
	</html>
	//Use jQuery by including a script tag in your html and using this as your CDN source: "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"

	//Make sure the page has loaded and is ready to be manipulated:

	//1. Select the element with id "main-heading" and log its text to console.
	var mainheading = $("#main-heading").html();
	console.log(mainheading);

	//2. Select the element with class "first-section" and log its text to console.
	var firstsection = $(".first-section").html();
	console.log(firstsection);

	//3. Select elements with the html tag h3 and log its text to console.
	var h3 = $("h3");

	h3.each(function(currentElement){
	console.log("h3 tags", currentElement.html());
	});

	//4. Select the second item in the list(using the class "list-item") and log its text to console.

	console.log("Second list item:", $(".list-item").eq(1).html());