JoeShep/index.html

## 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>

  <button type="" class="btn-j">Click it, Joe</button>
  <button type="" class="btn-j">Click it, Jerry</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>

## main.js
// The vanilla JS way of selecting an element
var vanillaStuff = document.getElementById('list-of-stuff');
console.log("JS element", vanillaStuff );

// Select by id
var jQStuff = $("#list-of-stuff");
console.log("jQ", jQStuff );

// Select by class
var articles = $(".article--main");
console.log("articles", articles);

// All the JavaScript that depends on jQuery will be written here
$(document).ready(function() {
  "use strict";
  var arr = [1,2,3];
  console.log("array #2", $(arr).eq(1));

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

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

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

  // 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);

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

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

  var $destroyer = $("#destroyer");

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

  // If "#destroyer" is added dynamically, you have to use this syntax
  $(document).on("click", "#destroyer", function() {

  });

  $(".btn-j").click(function(){
    console.log("btn text", $(this).html());
  })

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

  // old way
  // var songLoader = new XMLHttpRequest();
  //     songLoader.open("GET", "songs.json");
  //     songLoader.send();
  //     songLoader.addEventListener("load", functionIWantjQueryToExecute )

  // jQuery way
  $.ajax({
    url:"songs.json"
  }).done(functionIWantjQueryToExecute);

  function functionIWantjQueryToExecute(songData) {
    // var songDataObj = JSON.parse(this.responseText)
    console.log("SongDataObj", 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>

	<button type="" class="btn-j">Click it, Joe</button>
	<button type="" class="btn-j">Click it, Jerry</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>
	// The vanilla JS way of selecting an element
	var vanillaStuff = document.getElementById('list-of-stuff');
	console.log("JS element", vanillaStuff );

	// Select by id
	var jQStuff = $("#list-of-stuff");
	console.log("jQ", jQStuff );

	// Select by class
	var articles = $(".article--main");
	console.log("articles", articles);

	// All the JavaScript that depends on jQuery will be written here
	$(document).ready(function() {
	"use strict";
	var arr = [1,2,3];
	console.log("array #2", $(arr).eq(1));

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

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

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

	// 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);

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

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

	var $destroyer = $("#destroyer");

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

	// If "#destroyer" is added dynamically, you have to use this syntax
	$(document).on("click", "#destroyer", function() {

	});

	$(".btn-j").click(function(){
	console.log("btn text", $(this).html());
	})

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

	// old way
	// var songLoader = new XMLHttpRequest();
	// songLoader.open("GET", "songs.json");
	// songLoader.send();
	// songLoader.addEventListener("load", functionIWantjQueryToExecute )

	// jQuery way
	$.ajax({
	url:"songs.json"
	}).done(functionIWantjQueryToExecute);

	function functionIWantjQueryToExecute(songData) {
	// var songDataObj = JSON.parse(this.responseText)
	console.log("SongDataObj", 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();
	});

	});