sheafk/Pun-Sample-Solution.html

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

## Pun-Sample-Solution.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="answer-1">Answer</button>
    </div>

    <hr>
    <div id="joke-2"> What does the annoying pepper do?
    </div>
    <hr>
        <div id="joke-3">
        <p> Why did the bike fall over? </p>
    </div>
    <hr>
        <img id="joke-4" src="https://s16.postimg.org/5fso4wcmd/t_WNHJEV.jpghttps://s16.postimg.org/5mu1wwjx1/ZCIkkze.jpg">
</body>
</html>

## script.js
$("#joke-1").click( function(){

    $("#joke-1").html("Nacho Cheese");
   // Task 1: use .html to change the text in joke-1 to "Nacho Cheese"

});

$("#joke-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!");

});

// Task 3: Create a click handler that appends a paragraph with "It was two-tired" in it.

$("#joke-3").click(function() {
    $("#joke-3").append("<p>It was two-tired</p>");
});


// 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;
    background-color: #dfffff;
}

div{
    font-size: 2em;
}

button{
    color: white;
    background-color: #654eff;
    border-radius: 10px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    border: none;
}

button:hover {
    background-color: #4CAF50;
    color: white;
}

button:hover {
    background-color: #4CAF50;
    color: white;
}
	<!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="answer-1">Answer</button>
	</div>

	<hr>
	<div id="joke-2"> What does the annoying pepper do?
	</div>
	<hr>
	<div id="joke-3">
	<p> Why did the bike fall over? </p>
	</div>
	<hr>
	<img id="joke-4" src="https://s16.postimg.org/5fso4wcmd/t_WNHJEV.jpghttps://s16.postimg.org/5mu1wwjx1/ZCIkkze.jpg">
	</body>
	</html>
	$("#joke-1").click( function(){

	$("#joke-1").html("Nacho Cheese");
	// Task 1: use .html to change the text in joke-1 to "Nacho Cheese"

	});

	$("#joke-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!");

	});

	// Task 3: Create a click handler that appends a paragraph with "It was two-tired" in it.

	$("#joke-3").click(function() {
	$("#joke-3").append("<p>It was two-tired</p>");
	});


	// 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
	body{
	margin-bottom: 100px;
	background-color: #dfffff;
	}

	div{
	font-size: 2em;
	}

	button{
	color: white;
	background-color: #654eff;
	border-radius: 10px;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	border: none;
	}

	button:hover {
	background-color: #4CAF50;
	color: white;
	}

	button:hover {
	background-color: #4CAF50;
	color: white;
	}