JoeShep · May 9, 2016 15:42
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
 </head>
 <body>
  <h3>A list of things</h3>
  <ul id="list-of-stuff">
    <li>Monkeys</li>
    <li>Chickens</li>
    <li>Rabbits</li>
    <li>Sandwiched</li>
    <li>Door Knockers</li>
  </ul>

  <article class="article--main" id="top-article">
    This is the very first article in my document
  </article>

  <article class="article--main" id="middle-article">
    This is the middle article in my document.
  </article>

  <button class="delete">Delete</button>

  <div class="container">
    <h1 name="fred" umbrella="open">Song list</h1>

    <section class="song-container" index="0">
      <h1 umbrella="closed">Song list</h1>
      <div class="song">
        <div umbrella="closed" class="title">The Walk</div>
        <div class="artist">Mayer Hawthorne</div>
        <div class="album">How Do You Do</div>
        <button id="button-awesome">Kill it</button>
      </div>
      <div class="album">Blah Blah</div>
    </section>
  </div>

  <button id="destroyer">Hide song</button>

  <ul id="letters">

    <li class="letter a">a</li>

    <li class="letter b">b</li>

    <li class="letter c">c</li>

    <li class="letter d">d</li>

  </ul>

  <input type="text" name="first_name" id="firstName" value="10">

  <div class="echo"></div>

  <!-- scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="main.js"></script>
  </body>
 </html>
diff --git a/main.js b/main.js
 $(document).ready(function() {
  "use strict";
  var arr = [1,2,3];
  // returns the entire jQuery object. The '2' is the first item in the array-like object
  console.log("array index #2: ", $(arr).eq(1));

  $(".article--main").each(function(arrayIndex, currentElement) {
    console.log("each article: ", $(currentElement).html());
  });

  // Select by attribute
  var umbrellaElement = $('h1[name="fred"]');

  // Select specific children
  console.log("the h1: ", $(".container").children("h1"));

  // All the JavaScript that depends on jQuery will be written here

  // Select specific child index (useful for ul/ol)
  // Example of chaining selectors
  console.log("third li: ", $("#letters").children(".letter").eq(2).html());
  console.log("letters id",  $("#letters"));

  // Finding parent DOM elements
  console.log("Index attr: ", $(".album").parents(".song-container").attr("index"));

  // Finding an element
  var album = $(".container").find(".album");
  console.log("album", album.html());

  // Selecting siblings
  var aSibling = $(".a").next();
  var aSibling = $(".b").prev();

  console.log("aSibling: ", aSibling.html()); // like innerHTML

  // Handling events
  // The JS way: document.getElementById("destroyer").addEventListener("click", function)
  $("#destroyer").click(function() { //event listener
    $(".container").toggle();
  });

  // If attaching to a dynamically added element, you must use this syntax
  $(document).on("click", "#destroyer", function() {
    $(".container").toggle();
  });


  $("#firstName").keyup(function() { //event listener
    $(".echo").html($(this).val());
  });

  // An XMLHTTPRequest, in three lines of code. WAT?
  $.ajax({
    url:"./songs.json"
  }).done(functionIWantjQueryToExecute);

  function functionIWantjQueryToExecute(songData) {
    console.log("songs", songData );
    let songs = songData.songs;

    // the original javascript way of looping through the array
    songs.forEach( (song) => { // => is an ES6 shorthand for an anonymous function
      console.log("vanilla song", song.title);
    });

    // Loop through the array with jQuery
    $.each(songs, (key, song) => {
      console.log("jQuery stuff", song.title);
      umbrellaElement.append(`<li>${song.title}</li>`);
    });
  }

  // For fun
  $(document).on("click", "button[id^='button-']", function() {
    $(this).parents(".container").remove();
  });

 });
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	</head>
	<body>
	<h3>A list of things</h3>
	<ul id="list-of-stuff">
	<li>Monkeys</li>
	<li>Chickens</li>
	<li>Rabbits</li>
	<li>Sandwiched</li>
	<li>Door Knockers</li>
	</ul>

	<article class="article--main" id="top-article">
	This is the very first article in my document
	</article>

	<article class="article--main" id="middle-article">
	This is the middle article in my document.
	</article>

	<button class="delete">Delete</button>

	<div class="container">
	<h1 name="fred" umbrella="open">Song list</h1>

	<section class="song-container" index="0">
	<h1 umbrella="closed">Song list</h1>
	<div class="song">
	<div umbrella="closed" class="title">The Walk</div>
	<div class="artist">Mayer Hawthorne</div>
	<div class="album">How Do You Do</div>
	<button id="button-awesome">Kill it</button>
	</div>
	<div class="album">Blah Blah</div>
	</section>
	</div>

	<button id="destroyer">Hide song</button>

	<ul id="letters">

	<li class="letter a">a</li>

	<li class="letter b">b</li>

	<li class="letter c">c</li>

	<li class="letter d">d</li>

	</ul>

	<input type="text" name="first_name" id="firstName" value="10">

	<div class="echo"></div>

	<!-- scripts -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	$(document).ready(function() {
	"use strict";
	var arr = [1,2,3];
	// returns the entire jQuery object. The '2' is the first item in the array-like object
	console.log("array index #2: ", $(arr).eq(1));

	$(".article--main").each(function(arrayIndex, currentElement) {
	console.log("each article: ", $(currentElement).html());
	});

	// Select by attribute
	var umbrellaElement = $('h1[name="fred"]');

	// Select specific children
	console.log("the h1: ", $(".container").children("h1"));

	// All the JavaScript that depends on jQuery will be written here

	// Select specific child index (useful for ul/ol)
	// Example of chaining selectors
	console.log("third li: ", $("#letters").children(".letter").eq(2).html());
	console.log("letters id", $("#letters"));

	// Finding parent DOM elements
	console.log("Index attr: ", $(".album").parents(".song-container").attr("index"));

	// Finding an element
	var album = $(".container").find(".album");
	console.log("album", album.html());

	// Selecting siblings
	var aSibling = $(".a").next();
	var aSibling = $(".b").prev();

	console.log("aSibling: ", aSibling.html()); // like innerHTML

	// Handling events
	// The JS way: document.getElementById("destroyer").addEventListener("click", function)
	$("#destroyer").click(function() { //event listener
	$(".container").toggle();
	});

	// If attaching to a dynamically added element, you must use this syntax
	$(document).on("click", "#destroyer", function() {
	$(".container").toggle();
	});


	$("#firstName").keyup(function() { //event listener
	$(".echo").html($(this).val());
	});

	// An XMLHTTPRequest, in three lines of code. WAT?
	$.ajax({
	url:"./songs.json"
	}).done(functionIWantjQueryToExecute);

	function functionIWantjQueryToExecute(songData) {
	console.log("songs", songData );
	let songs = songData.songs;

	// the original javascript way of looping through the array
	songs.forEach( (song) => { // => is an ES6 shorthand for an anonymous function
	console.log("vanilla song", song.title);
	});

	// Loop through the array with jQuery
	$.each(songs, (key, song) => {
	console.log("jQuery stuff", song.title);
	umbrellaElement.append(`<li>${song.title}</li>`);
	});
	}

	// For fun
	$(document).on("click", "button[id^='button-']", function() {
	$(this).parents(".container").remove();
	});

	});