Untitled

//jQuery learning
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Getting started with jQuery</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                color: rgb(16, 10, 102);
            }
        </style>
    </head>
    <body>

    <h1 id="heading">What is jQuery?</h1>

    <p>jQuery is the most popular JavaScript library. It gives developers lots of useful functions so they can make their webpage interactive across multiple browsers.</p>

    <p class="note">jQuery is an open source library with a big community of contributors.</p>

    <h1>Why should you learn jQuery?</h1>

    <p>If you learn jQuery, you'll be able to use it in your own webpages, understood other developer's webpages, and have a better understanding generally about how to use libraries.</p>

    <p class="note">Note: jQuery functions use the DOM API (like <code>document.getElementById</code>). You should  learn that first, if you haven't yet.</p>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
    </script>

    <script>
      $("h1").text("jQuery string");
    </script>

    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Your first jQuery</title>
    </head>
    <body>

    <h1>Just a normal webpage...</h1>

    <h1>until...</h1>

    <h1>you include jQuery!</h1>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">

    </script>

    <script>$("h1").text("jQuery");</script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Finding elements with jQuery</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                color: rgb(16, 10, 102);
            }
            p
              {
                color: red;
              }
              #main-heading
                {
                  color: purple;
                }
                .note
                  {
                    background: yellow;
                  }
        </style>
    </head>
    <body>

    <h1 id="main-heading">What is jQuery?</h1>

    <p>jQuery is the most popular JavaScript library. It gives developers lots of useful functions so they can make their webpage interactive across multiple browsers.</p>

    <p class="note">jQuery is an open source library with a big community of contributors.</p>

    <h1>Why should you learn jQuery?</h1>

    <p>If you learn jQuery, you'll be able to use it in your own webpages, understand other developer's webpages, and have a better understanding generally about how to use libraries.</p>

    <p class="note">Note: jQuery functions use the DOM API (like <code>document.getElementById</code>). You should  learn that first, if you haven't yet.</p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>
        $("p").text("jQuery is the GREATEST!!!");
        $("#main-heading").text("a jQuery string");
        $(".note").text("another string obviously");
    </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Unicorn-ify a page with jQuery</title>
    </head>
    <body>

    <h1 id="page-heading">All About Horses</h1>

    <p>All <span class="animal">horses</span> gallop on 4 legs.</p>

    <p>You can feed carrots to <span class="animal">horses</span>.</p>

    <p>Never walk behind <span class="animal">horses</span>.</p>

    <p>Their most notable body parts:</p>
    <ul>
        <li>Strong legs</li>
        <li>Long mane</li>
        <li>Hooved feet</li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $("li").text("horn");
    $("#page-heading").text("All about unicorns");
    $(".animal").text("unicorns");
    $("p").text("unicorns");


    </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Getting info on elements with jQuery</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                color: rgb(16, 10, 102);
            }

            p {
                color: red;
            }

            #main-heading {
                color: purple;
            }

            .note {
                background: yellow;
            }
        </style>
    </head>
    <body>

    <h1 id="main-heading">What is jQuery?</h1>

    <p>jQuery is the most popular JavaScript library. It gives developers lots of useful functions so they can make their webpage interactive across multiple browsers.</p>

    <p class="note">jQuery is an open source library with a big community of contributors.</p>

    <h1>Why should you learn jQuery?</h1>

    <p>If you learn jQuery, you'll be able to use it in your own webpages, understand other developer's webpages, and have a better understanding generally about how to use libraries.</p>

    <p class="note">Note: jQuery functions use the DOM API (like <code>document.getElementById</code>). You should  learn that first, if you haven't yet.</p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>
        $("p").text("jQuery is the GREATEST!!!");
        //$("#main-heading").text("jQuery? More like YAY-QUERY!");
        $(".note").text("NOTE: jQuery has been known to cause EXTREME JOY!");

        var headingText = $("#main-heading").text();
        consloge.log(headingText);
        $("#main-heading").text("!!" + headingText + "a string");
    </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Famous discoveries</title>
    </head>
    <body>

    <h1>Famous discoveries</h1>

    <h2 id="math-heading">Math discoveries</h2>

    <ul>
    <li>323–283 BC – Euclid: wrote a series of 13 books on geometry called The Elements</li>
    <li>Al-Khawarizmi (780-850): wrote the first major treatise on Algebra titled "Al-jabr wal-muqabaleh"</li>
    </ul>

    <h2 id="science-heading">Science discoveries</h2>
    <ul>
        <li>1543 – Copernicus: discovered the heliocentric model of the solar system.
</li>
        <li>1672 – Sir Isaac Newton: discovers that white light is a spectrum of a mixture of distinct coloured rays.</li>
    </ul>

    <a href="https://en.wikipedia.org/wiki/Timeline_of_scientific_discoveries">Read about more discoveries on Wikipedia.</a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    var math = $("#math-heading");
    var science = $("#science-heading");
    math.text(math.text() + " + a string");
    science.text(science.text() + " + a string");


    </script>
    </body>
</html>


<script>
$("h1"); // selects all the h1s
$("#heading"); // selects the element with id of "heading"
$(".warning"); // selects all the elements with class name of "warning"
jQuery("h1");
jQuery("#heading");
jQuery(".warning");
var heading = $("#heading").text();
</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery example: text()</title>
        <style>
        .weather {
            background: rgb(179, 177, 179);
            margin-right: 447px;
            margin-left: 1px;
            padding-left: 3px;
        }

        body {
            font-family: arial;
        }
        </style>
    </head>
    <body>
    <h1>Winston's Weather Report</h1>
    <img src="https://www.kasandbox.org/programming-images/creatures/Winston.png">
    <!-- The weather report always changes! --->
    <!-- This was the original weather... -->
    <h2 class="weather">Current Weather:</h2>
    <p class="weather" id="temperature">76° Fahrenheit</p>

    <!-- adding jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
    </script>

    <script>
        // Let's use jQuery to change the weather
        // We do that by selecting the temperature paragraph with the "temperature" id and using .text() to change the text
        $("#temperature").text("89° Fahrenheit");

        // Looks like it got hotter!
    </script>
    </body>
</html>
<!-- Example created by Akul Umamageswaran:
https://www.khanacademy.org/profile/technologywiz/ -->


<script>
$("h1").text();
$("h1").length;
</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Modifying elements with jQuery</title>
        <style>
        .gil
          {
            color: green;
            font-family: fantasy;
          }
        </style>
    </head>
    <body>

        <h2 id="cuteness">Cats are cute</h2>

        <p>Cats are widely known to be one of the cutest animals. It has long been rumored that they have put all of humanity under a hypnosis, so that they can achieve their goals of getting fed while also getting to do whatever they darn want around our houses.</p>

        <p>This cat is exhibiting what's known as the "so-cute-now-feed-me" face:</p>
        <a href="https://en.wikipedia.org/wiki/Cat_food">
            <img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="200">
        </a>

        <h2 id="activities">Common cat activities (Cat-ivities)</h2>

        <p>Cats enjoy attacking innocent pieces of string, walking around your legs at the exact moment that you're trying to flip a pancake on the stove, sleeping for hours and hours and hours, and pouncing on unsuspecting laser dots.</p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/2006-07-07_katze_mit_angel.jpg" width="200">

        <a href="https://en.wikipedia.org/wiki/Cat">Learn more</a>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
        $("h2").text("a string");
        $("p").html("another <strong>string </strong>");
        $("p").css("color", "green");
        $("h2").addClass("gil");
        $("a").attr("href", "https://en.wikipedia.org/");
        $("img").attr("src", "https://www.kasandbox.org/programming-images/animals/crocodiles.png");

        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: The changing caterpillar</title>
    </head>
    <body>
    <h1>The Caterpillar</h1>

    <p>This is a <strong>caterpillar</strong> in its natural habitat:</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Monarch_caterpillar_on_swan_plant_branchlet.jpg/640px-Monarch_caterpillar_on_swan_plant_branchlet.jpg" width="400">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $("h1").text("butterflies");
    $("p").html("butterflies");
    $("img").attr("src", "https://www.kasandbox.org/programming-images/animals/butterfly_monarch.png");
    $("p").css("color", "orange");
    </script>

    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Creating elements with jQuery</title>
        <style>
            .crocodile {
                color: green;
                font-family: fantasy;
            }
        </style>
    </head>
    <body>

        <h2 id="cuteness">Cats are cute!</h2>

        <p>Cats are widely known to be one of the cutest animals. It has long been rumored that they have put all of humanity under a hypnosis, so that they can achieve their goals of getting fed while also getting to do whatever they darn want around our houses.</p>

        <p>This cat is exhibiting what's known as the "so-cute-now-feed-me" face:</p>
        <a href="https://en.wikipedia.org/wiki/Cat_food">
            <img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="50">
        </a>

        <h2 id="activities">Common cat activities (Cat-ivities)</h2>

        <p>Cats enjoy attacking innocent pieces of string, walking around your legs at the exact moment that you're trying to flip a pancake on the stove, sleeping for hours and hours and hours, and pouncing on unsuspecting laser dots.</p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/2006-07-07_katze_mit_angel.jpg" width="50">

        <a href="https://en.wikipedia.org/wiki/Cat">Learn more</a>

        here
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
        $("h2").text("CROCODILE ATTACK!");
        $("p").html("The crocodiles are coming - <strong>oh noess</strong>!!");
        $("p").css("color", "green");
        $("h2").addClass("crocodile");
        $("a").attr("href", "https://en.wikipedia.org/wiki/Crocodile");
        $("img").attr("src", "https://www.kasandbox.org/programming-images/animals/crocodiles.png");

        var newP = $("<p>");
        newP.text("a string");
        newP.addCLass("crocodile");
        $("body").append(newP);


        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Creature creator</title>
        <style>
            body {
                font-family: sans-serif;
            }
            .result {
                font-size: 20px;
                font-weight: bold;
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>Creature Creator</h1>

        <p>What happens when you combine these two animals?</p>
        <img src="https://www.kasandbox.org/programming-images/animals/shark.png" height="150" alt="shark">
        <img src="https://www.kasandbox.org/programming-images/animals/spider.png" height="150" alt="spider">

        <p class="result">You get a sharkspider!</p>

        <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
        <script>
        var newP = $("<p>");
        newP.text("this is text");
        newP.addClass("result")
        $("body").append(newP);


        </script>
    </body>
</html>

<script>
$("h1").text("All about cats");
$("h1").html("I <strong>love</strong> cats");
$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com");
$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", color: "red"});
$("h1").addClass("warning");
var $p = $("<p>");
var $p = $('<p style="color:red;">I love people who love cats.</p>');
$p.addClass("warning");
$("#main-div").append($p);
</script>

<script>
$("body").text("Mwahahaha");
$("img").attr("src", "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg");
</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery Collections vs. DOM Nodes</title>
        <style>
            .crocodile {
                color: green;
                font-family: fantasy;
            }
        </style>
    </head>
    <body>

        <h2 id="cuteness">Cats are cute!</h2>

        <p>Cats are widely known to be one of the cutest animals. It has long been rumored that they have put all of humanity under a hypnosis, so that they can achieve their goals of getting fed while also getting to do whatever they darn want around our houses.</p>

        <p>This cat is exhibiting what's known as the "so-cute-now-feed-me" face:</p>
        <a href="https://en.wikipedia.org/wiki/Cat_food">
            <img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="50">
        </a>

        <h2 id="activities">Common cat activities (Cat-ivities)</h2>

        <p>Cats enjoy attacking innocent pieces of string, walking around your legs at the exact moment that you're trying to flip a pancake on the stove, sleeping for hours and hours and hours, and pouncing on unsuspecting laser dots.</p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/2006-07-07_katze_mit_angel.jpg" width="50">

        <a href="https://en.wikipedia.org/wiki/Cat">Learn more</a>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
        // Modifying elements
        $("h2").text("CROCODILE ATTACK!");
        $("p").html("The crocodiles are coming - <strong>oh noess</strong>!!");
        $("p").css("color", "green");
        $("h2").addClass("crocodile");
        $("a").attr("href", "https://en.wikipedia.org/wiki/Crocodile");
        $("img").attr("src", "https://www.kasandbox.org/programming-images/animals/crocodiles.png");

        // Creating elements
        var newP = $("<p>");
        newP.text("The crocodiles have eaten this ENTIRE PAGE!");
        newP.addClass("crocodile");
        $("body").append(newP);

        // Let's discuss:
        var headingFromD = document.getElementById("cuteness");
        // DOM node
        headingFromD.innerHTML = "Setting . innterHTML";
        var headingFromJ = $("#cuteness");
        headingFromJ.html("using .html()");

        var $heading = $("cuteness");
        $heading.html("using jQuery");
        var headingD = $heading[0];

        var $headingJ = $(headingD);

        </script>
    </body>
</html>


heading.text("Best heading ever");


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Looping through jQuery collections</title>
        <style>
            .crocodile {
                color: green;
                font-family: fantasy;
            }
        </style>
    </head>
    <body>

        <h2 id="cuteness">Cats are cute!</h2>

        <p>Cats are widely known to be one of the cutest animals. It has long been rumored that they have put all of humanity under a hypnosis, so that they can achieve their goals of getting fed while also getting to do whatever they darn want around our houses.</p>

        <p>This cat is exhibiting what's known as the "so-cute-now-feed-me" face:</p>
        <a href="https://en.wikipedia.org/wiki/Cat_food">
            <img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="50">
        </a>

        <h2 id="activities">Common cat activities (Cat-ivities)</h2>

        <p>Cats enjoy attacking innocent pieces of string, walking around your legs at the exact moment that you're trying to flip a pancake on the stove, sleeping for hours and hours and hours, and pouncing on unsuspecting laser dots.</p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/2006-07-07_katze_mit_angel.jpg" width="50">

        <a href="https://en.wikipedia.org/wiki/Cat">Learn more</a>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
        // Modifying elements
        $("h2").text("CROCODILE ATTACK!");
        $("p").html("The crocodiles are coming - <strong>oh noess</strong>!!");

        var $paragraph = $('p');
        for (var i = 0; i < $paragraph.length; i +=1)
          {
            var element = $paragraph[i]; // DOM node
            var $paragraph = $(element);
            $paragraph.html(€paragraph.html() + "a string");
          }

          $paragraph.each(function(index, element)
            {
              var $paragraph = $(element); //$(this);
              console.log(element === this);
            $paragraph.html( $paragraph.html() + "..wowee!");
            }
        );

        $("p").css("color", "green");
        $("h2").addClass("crocodile");
        $("a").attr("href", "https://en.wikipedia.org/wiki/Crocodile");
        $("img").attr("src", "https://www.kasandbox.org/programming-images/animals/crocodiles.png");


        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Loopy language</title>
    </head>
    <body>

        <h1>All about Pig Latin</h1>
        <p>Pig Latin is a language game in which words in English are altered. The objective is to conceal the meaning of the words from others not familiar with the rules. The reference to Latin is a deliberate misnomer, as it is simply a form of jargon, used only for its English connotations as a strange and foreign-sounding language.</p>
        <p>The origins of Pig Latin are unknown. A youthful Thomas Jefferson wrote letters to friends in Pig Latin.</p>
        <p>For words that begin with consonant sounds, the initial consonant or consonant cluster is moved to the end of the word, and "ay" is added.</p>


        <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
        <script>
// Takes a string and returns Pig Latin version of it
var toPigLatin = function(str) {
    if (!str.replace) {
        return 'ERROR: Expected a string!';
    }
    return str.replace(/\b(\w)(\w+)\b/g, '$2-$1ay').toLowerCase();
};

// Iterate through each paragraph, call the toPigLatin function on it
var $paragraphs = $("p");
$paragraphs.each(function(index, element){
   var $paragraph = $(element);
   $paragraph.text(toPigLatin($paragraph.text()));
});

        </script>

    </body>
</html>


<script>
var $heading = $('h1');
var heading = $heading[0];
var $heading = $(heading);

$("p").each(function(index, element) {
        $(elem).text( $(element).text() + "!!");
    });


    $("p").each(function() {
        $(elem).text( $(this).text() + "!!");
    });

</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Chaining jQuery methods</title>
        <style>
            .crocodile {
                color: green;
                font-family: fantasy;
            }
        </style>
    </head>
    <body>

        <h2 id="cuteness">Cats are cute!</h2>

        <p>Cats are widely known to be one of the cutest animals. It has long been rumored that they have put all of humanity under a hypnosis, so that they can achieve their goals of getting fed while also getting to do whatever they darn want around our houses.</p>

        <p>This cat is exhibiting what's known as the "so-cute-now-feed-me" face:</p>
        <a href="https://en.wikipedia.org/wiki/Cat_food">
            <img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="50">
        </a>

        <h2 id="activities">Common cat activities (Cat-ivities)</h2>

        <p>Cats enjoy attacking innocent pieces of string, walking around your legs at the exact moment that you're trying to flip a pancake on the stove, sleeping for hours and hours and hours, and pouncing on unsuspecting laser dots.</p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/2006-07-07_katze_mit_angel.jpg" width="50">

        <a href="https://en.wikipedia.org/wiki/Cat">Learn more</a>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
        // Modifying elements
        $("h2").text("CROCODILE ATTACK!");
        $("p").html("The crocodiles are coming - <strong>oh noess</strong>!!");
        $("p").css("color", "green");
        $("h2").addClass("crocodile");
        $("a").attr("href", "https://en.wikipedia.org/wiki/Crocodile");
        $("img").attr("src", "https://www.kasandbox.org/programming-images/animals/crocodiles.png");

        // Creating elements
        var newP = $("<p>");
        newP.text("The crocodiles have eaten this ENTIRE PAGE!");
        newP.addClass("crocodile");
        $("body").append(newP);

        //chaining
        $("<p>")
          .text("The crocodiles have eaten this ENTIRE PAGE!")
          .addClass("crocodile")
          .appendTo("body");

        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Daisy chain</title>
    </head>
    <body>


        <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
        <script>
        // You can use the daisy image at:
        // https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg
        for (var i = 0; i < 5; i +=1)
        {
        $("<img>")
            .attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg")
            .attr("width", 100)
            .attr("alt", "Daisies")
            .appendTo("body")
        }
        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Adding event listeners with jQuery</title>
        <style>
            .crocodile {
                color: green;
                font-family: fantasy;
            }
        </style>
    </head>
    <body>

      <button id = "a-button"> A Button</button>

        <h2 id="cuteness">Cats are cute!</h2>

        <p>Cats are widely known to be one of the cutest animals. It has long been rumored that they have put all of humanity under a hypnosis, so that they can achieve their goals of getting fed while also getting to do whatever they darn want around our houses.</p>

        <p>This cat is exhibiting what's known as the "so-cute-now-feed-me" face:</p>
        <a href="https://en.wikipedia.org/wiki/Cat_food">
            <img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="50">
        </a>

        <h2 id="activities">Common cat activities (Cat-ivities)</h2>

        <p>Cats enjoy attacking innocent pieces of string, walking around your legs at the exact moment that you're trying to flip a pancake on the stove, sleeping for hours and hours and hours, and pouncing on unsuspecting laser dots.</p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/2006-07-07_katze_mit_angel.jpg" width="50">

        <a href="https://en.wikipedia.org/wiki/Cat">Learn more</a>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>

        var crocodilize = function()
          {
            // Modifying elements
            $("h2").text("CROCODILE ATTACK!");
            $("p").html("The crocodiles are coming - <strong>oh noess</strong>!!");
            $("p").css("color", "green");
            $("h2").addClass("crocodile");
            $("a").attr("href", "https://en.wikipedia.org/wiki/Crocodile");
            $("img").attr("src", "https://www.kasandbox.org/programming-images/animals/crocodiles.png");
          };

        $("#a-button").on("click", function()
        {
          console.log("a string");
          crocodilize();
        });


        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Croc Clicker</title>
    </head>
    <body>

    <h1>Challenge: Croc Clicker</h1>
    <img id="crocs" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" width="300" alt="Crocodiles chilling">
    <div id="results"></div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    var numClicks = 0;
    $("#results").text("You clicked " + numClicks + " times");
    $("img").on("click", function()
    {
    numClicks++;
    $("#results").text("You clicked " + numClicks + " times");
    });
    </script>


    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Using event properties in jQuery</title>
        <style>
            .crocodile {
                color: green;
                font-family: fantasy;
            }
        </style>
    </head>
    <body>
        <h2 id="cuteness">Cats are cute!</h2>

        <p>Cats are widely known to be one of the cutest animals. It has long been rumored that they have put all of humanity under a hypnosis, so that they can achieve their goals of getting fed while also getting to do whatever they darn want around our houses.</p>

        <p>This cat is exhibiting what's known as the "so-cute-now-feed-me" face:</p>
        <a href="https://en.wikipedia.org/wiki/Cat_food">
            <img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="50">
        </a>

        <h2 id="activities">Common cat activities (Cat-ivities)</h2>

        <p>Cats enjoy attacking innocent pieces of string, walking around your legs at the exact moment that you're trying to flip a pancake on the stove, sleeping for hours and hours and hours, and pouncing on unsuspecting laser dots.</p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/2006-07-07_katze_mit_angel.jpg" width="50">

        <a href="https://en.wikipedia.org/wiki/Cat">Learn more</a>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>

        var crocodilize = function() {
            $("h2").text("CROCODILE ATTACK!");
            $("p").html("The crocodiles are coming - <strong>oh noess</strong>!!");
            $("p").css("color", "green");
            $("h2").addClass("crocodile");
            $("a").attr("href", "https://en.wikipedia.org/wiki/Crocodile");
            $("img").attr("src", "https://www.kasandbox.org/programming-images/animals/crocodiles.png");
        };

        crocodilize();

        // When the user clicks on the page:

        //   create a new image
        //   position it according to where click happened
        $("body").on("click", function(event)
          {
            console.log(event);
            var $img = $("<img>")
              .attr("src", "https://www.kasandbox.org/programming-images/animals/crocodiles.png")
              .width(100)
              .css("position", "absolute")
              .css("top", event.pageY + "px")
              .css("left", event.pageX + "px")
              .appendTo("body");
          });

        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Spot the Dog</title>
        <style>
            .dot {
                border-radius: 10px;
                background: black;
                position: absolute;
                width: 10px;
                height: 10px;
            }
        </style>
    </head>
    <body>

    <img id="dog-pic" src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Alopekis_white_male.jpg" width="500" alt="White dog">

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $("#dog-pic").on("click", function(event) {
        var $dot = $("<div></div>");
        $dot.addClass("dot");
        $dot.appendTo("body");
        dot.css("top", event.pageY + "px")
        dot.css("left", event.pageX + "px")

    });

    </script>


    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Checking DOM readiness with jQuery</title>
        <style>
            .crocodile {
                color: green;
                font-family: fantasy;
            }
        </style>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>

        var crocodilize = function() {
            $("h2").text("CROCODILE ATTACK!");
            $("p").html("The crocodiles are coming - <strong>oh noess</strong>!!");
            $("p").css("color", "green");
            $("h2").addClass("crocodile");
            $("a").attr("href", "https://en.wikipedia.org/wiki/Crocodile");
            $("img").attr("src", "https://www.kasandbox.org/programming-images/animals/crocodiles.png");
        };

        crocodilize();
        $(document).ready(function()
        {
          crocodilize();
        });
        </script>

    </head>
    <body>

        <h2 id="cuteness">Cats are cute!</h2>

        <p>Cats are widely known to be one of the cutest animals. It has long been rumored that they have put all of humanity under a hypnosis, so that they can achieve their goals of getting fed while also getting to do whatever they darn want around our houses.</p>

        <p>This cat is exhibiting what's known as the "so-cute-now-feed-me" face:</p>
        <a href="https://en.wikipedia.org/wiki/Cat_food">
            <img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="50">
        </a>

        <h2 id="activities">Common cat activities (Cat-ivities)</h2>

        <p>Cats enjoy attacking innocent pieces of string, walking around your legs at the exact moment that you're trying to flip a pancake on the stove, sleeping for hours and hours and hours, and pouncing on unsuspecting laser dots.</p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/2006-07-07_katze_mit_angel.jpg" width="50">

        <a href="https://en.wikipedia.org/wiki/Cat">Learn more</a>


    </body>
</html>

<script>
$("#save-button").on("click", function() {
      // handle click event
   });

   $("#face-pic").on("click", function(event) {
     var mouseX = event.pageX;
     var mouseY = event.pageY;
  });

  $("#save-button").trigger("click");

  $(document).ready(function() {
     $("h1").text("Y'all ready for this?");
   });

   $(function() {
    $("h1").text("Y'all ready for this?");
  });
</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Processing a quiz with jQuery</title>
    </head>
    <body>

    <h1>Reptile quiz</h1>

    <form id="quiz-form">
        <label>
            What is this? <br>
  <img src="https://ka-perseus-images.s3.amazonaws.com/325aab611b8b69b51bfeb16ade0af741da7dc3ff.jpg" alt="Reptile"> <br>
            <select id="quiz-answer">
                <option value="crocodile">Crocodile</option>
                <option value="alligator">Alligator</option>
                <option value="caiman">Caiman</option>
            </select>
        </label> <br>
        <button type="submit">Check Answer</button>
    </form>
    <div id="result"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>

    // When the user submits the form,
    //   Check what answer they picked
    //   And tell them if they're correct
    $("#quiz-form").on("submit", function(event)
    {
      event.preventDefault();
      var $answer = $("#quiz-answer");
      var answer = $answer.val();
      console.log(answer);
      if (answer === "crocodile")
        {
          $("#result").text("this is a answer");
          else
            {
              $("result").text("try it again?");
            }
        }
    });

    </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: jQuery trivia quiz</title>
        <style>
            #result {
                background: rgb(255, 246, 204);
                border: 2px dotted gold;
                font-size: 24px;
                height: 60px;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>

    <h1>jQuery Quiz</h1>

    <form id="trivia-form">
        <label>
            Who invented jQuery?<br>
            <select id="trivia-answer">
                <option value="eich">Brendan Eich</option>
                <option value="resig">John Resig</option>
                <option value="rossum">Guido van Rossum</option>
                <option value="berners">Tim Berners-Lee</option>
            </select>
        </label> <br>
        <button type="submit">Check Answer</button>
    </form>
    <div id="result"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $("#trivia-form").on("submit", function(event)
    {
        event.preventDefault();

        var $answer = $("#trivia-answer");
        var answer = $answer.val();

        if (answer === "resig")
            {
                $("#result").text("autism");
            }
            else
            {
                $("#result").text("try again");
            }

    });
    </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>More form processing with jQuery</title>
    </head>
    <body>

    <h1>Crocodile order form</h1>

    <form id="croc-form">
        <label>
            Species?
            <select name="species">
                <option value="freshwater">Freshwater crocodile</option>
                <option value="saltwater">Saltwater crocodile</option>
                <option value="american">American crocodile</option>
            </select>
        </label>
        <button type="submit">Order</button>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    // Maps croc species to image URLs
    var crocImages = {
        "american": "https://upload.wikimedia.org/wikipedia/commons/f/f2/Crocodylus_acutus_mexico_02-edit1.jpg",
        "saltwater": "https://upload.wikimedia.org/wikipedia/commons/c/ca/Crocodylus_porosus_4.jpg",
        "freshwater": "https://upload.wikimedia.org/wikipedia/commons/c/ce/Australia_Cairns_18.jpg"
    };

    // When the user submits the form,
    //   Check what species they ordered
    //   and display an image of it

    $("#croc-form").on("submit", function(event)
      {
        event.preventDefault();
        var $crocSpecies = $("#croc-form [name = species]");
            $(this).find("[name = species]"); // DOM element

            var crocSpecies = $crocSpecies.val();
            var $img = $("zimg>");
            $img.width(100);
            $img.attr("src", crocImages[crocSpecies]);
            $img.appendTo("body");
      });
    </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Donut Calculator</title>
    </head>
    <body>

    <h1>Donut Calculator</h1>

    <p>Winston eats 3 donuts a day. How many donuts will he eat in his lifetime?</p>

    <form id="calculator-form">
        <label>
            Winston's final age:
            <input type="number" name="age">
        </label>
        <button type="submit">Calculate</button>
        <div id="calculator-results"></div>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    var calcDonuts = function(years) {
        return years * 3 * 365;
    };

    $("#calculator-form").on("submit", function(event) {
        event.preventDefault();

        // TODO: Find inputted age, calculate # of donuts
        var $age = $(this).find("[name = age]");
        var Age = $age.val();
        var total = calcDonuts(Age);

        $("#calculator-results").text("Winston ate "+ total );
    });
    </script>
    </body>
</html>


<script>
$("form").on("submit", function() {
       // process form
    });

    $("form").on("submit", function(event) {
     event.preventDefault();
     // process form
  });

  var answer = $("#answer").val();

  $("form").on("submit", function() {
      // store the value of the input with name='age'
       var age = $(this).find('[name=age]').val();
    });
</script>