LtAstros/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Puns</title>
    </head>
    <body>
    <h1>ScriptEd Pun-A-Thon</h1>
    <hr>
    <div id="joke-1"> What kind of cheese doesn't belong to you?
    <button id="1" type="button">Boi</button>
    </div>
    <hr>
    <div id="joke-2"> What does the annoying pepper do?
    <button id="2" type="button">Boi</button>
    </div>
    <hr>
        <div id="joke-3">
        <p> Why did the bike fall over?
        <button id="p" type="button">Boi</button></p>
    </div>
    <hr>
        <div>
        <img id="joke-4" src="https://s16.postimg.org/5fso4wcmd/t_WNHJEV.jpghttps://s16.postimg.org/5mu1wwjx1/ZCIkkze.jpg">
        </div>
</body>
</html>

## popcode.json
{"enabledLibraries":["jquery"]}

## script.js
$("#1").click( function(){
   // Task 1: use .html to change the text in joke-1 to "Nacho Cheese"
   $("#joke-1").html("Nacho Cheese");
   $("#1").hide();
});

$("#2").click( function(){
   // Task 2: use .append to add a paragraph with "It gets jalapeño face!" in it.
    $("#joke-2").append("It gets jalapeño face!");
    $("#2").hide();
});

// Task 3: Create a click handler that appends a paragraph with "It was two-tired" in it.
$("#p").click(function(){
    $("p").append("It was two-tired");
    $("#p").hide();
    });

// Task 4: Create a click handler for joke-4 that changes the attribute src from the current image to this image --> "http://i.imgur.com/ZCIkkze.jpg"
$("#joke-4").click( function(){
    $("#joke-4").attr("src","http://i.imgur.com/ZCIkkze.jpg");
    });
// Bonus: Create a button for each one of these jokes. When the user clicks a button the action should occur


## styles.css
body{
    margin-bottom: 100px;
}

div{
    font-size: 2em;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery Puns</title>
	</head>
	<body>
	<h1>ScriptEd Pun-A-Thon</h1>
	<hr>
	<div id="joke-1"> What kind of cheese doesn't belong to you?
	<button id="1" type="button">Boi</button>
	</div>
	<hr>
	<div id="joke-2"> What does the annoying pepper do?
	<button id="2" type="button">Boi</button>
	</div>
	<hr>
	<div id="joke-3">
	<p> Why did the bike fall over?
	<button id="p" type="button">Boi</button></p>
	</div>
	<hr>
	<div>
	<img id="joke-4" src="https://s16.postimg.org/5fso4wcmd/t_WNHJEV.jpghttps://s16.postimg.org/5mu1wwjx1/ZCIkkze.jpg">
	</div>
	</body>
	</html>
	$("#1").click( function(){
	// Task 1: use .html to change the text in joke-1 to "Nacho Cheese"
	$("#joke-1").html("Nacho Cheese");
	$("#1").hide();
	});

	$("#2").click( function(){
	// Task 2: use .append to add a paragraph with "It gets jalapeño face!" in it.
	$("#joke-2").append("It gets jalapeño face!");
	$("#2").hide();
	});

	// Task 3: Create a click handler that appends a paragraph with "It was two-tired" in it.
	$("#p").click(function(){
	$("p").append("It was two-tired");
	$("#p").hide();
	});

	// Task 4: Create a click handler for joke-4 that changes the attribute src from the current image to this image --> "http://i.imgur.com/ZCIkkze.jpg"
	$("#joke-4").click( function(){
	$("#joke-4").attr("src","http://i.imgur.com/ZCIkkze.jpg");
	});
	// Bonus: Create a button for each one of these jokes. When the user clicks a button the action should occur