cesine/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Red's Happy Face</title>
    </head>
    <body>
          <main>
            <div>
              <h1 class="hMood"></h1>
              <img class="imgPicture" src="www.fake.com" >
              <p></p>
            </div>

          <div id="dvChange">
            <button class="btnChangeMood">Change Red's Mood</button>
          </div>

          </main>


          <section>
            In this project, you are only using JQuery to manipulate the page.
          </section>

    </body>
</html>

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

## script.js
// Directions: move through the steps below using jQuery code.
//Step 1: Import jQuery

// H1 TITLE
// change the header color to red and add an underline
// using the .text() set it to Red's Happy Face
$(".btnChangeMood").click(function() {
    $(".hMood").css("color", "red");
    $(".hMood").text("Red's Happy Face");

    //Image
    // using .attr()
    // assign src as "https://s-media-cache-ak0.pinimg.com/736x/8e/4e/83/8e4e83ad0b968d50e13da48cf2dad35d.jpg";

    $(".imgPicture").attr("src", "https://s-media-cache-ak0.pinimg.com/736x/8e/4e/83/8e4e83ad0b968d50e13da48cf2dad35d.jpg");

    // using .css()
    // give a width of 150 and display as block
    $(".imgPicture").css("width", 150);
    $(".imgPicture").css("display", "block");

});


// change the div using .css()
// create a border with dashed lines and assign it a color
// make a margin bottom border of 75px
$("#dvChange").css("border-style", "dashed");
$("#dvChange").css("border-color", "blue");
$("#dvChange").css("margin", "75px");

// P TEXT
// using the .text() assign it as "Red's Chill Face"
// using css() make the font color red, size 32 and font-weight bolder
$("p").text("Red's Chill Face");
$("p").css("color", "red");
$("p").css("font-size", 32);
$("p").css("font-weight", "bolder");

// BUTTON
// remove the border around the button div
// make button float right
$(".btnChangeMood").css("border-style", "none");
$(".btnChangeMood").css("float", "right");


// BUTTON
// use .mouseenter() tochange the button background color to yellow
// need a hint? try Googling "jquery mouseenter"
$(".btnChangeMood").mouseenter(function() {
    $(".btnChangeMood").css("background-color", "yellow");
});


// use .mouseleave()
// change button background color to lightgreen
$(".btnChangeMood").mouseleave(function() {
    $(".btnChangeMood").css("background-color", "lightgreen");
});


## styles.css
body {
  background-color: white;
}

div {
  height: 350px;
  width: 300px;
  margin-right: 25px;
  padding-left: 10px;
}

button {
  height: 50px;
  background-color: lightgreen;
  font-size: 18px;
  padding: 0 30px;
}

#dvChange {
  height: 100px;
}

main {
  display: block;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Red's Happy Face</title>
	</head>
	<body>
	<main>
	<div>
	<h1 class="hMood"></h1>
	<img class="imgPicture" src="www.fake.com" >
	<p></p>
	</div>

	<div id="dvChange">
	<button class="btnChangeMood">Change Red's Mood</button>
	</div>

	</main>


	<section>
	In this project, you are only using JQuery to manipulate the page.
	</section>

	</body>
	</html>
	// Directions: move through the steps below using jQuery code.
	//Step 1: Import jQuery

	// H1 TITLE
	// change the header color to red and add an underline
	// using the .text() set it to Red's Happy Face
	$(".btnChangeMood").click(function() {
	$(".hMood").css("color", "red");
	$(".hMood").text("Red's Happy Face");

	//Image
	// using .attr()
	// assign src as "https://s-media-cache-ak0.pinimg.com/736x/8e/4e/83/8e4e83ad0b968d50e13da48cf2dad35d.jpg";

	$(".imgPicture").attr("src", "https://s-media-cache-ak0.pinimg.com/736x/8e/4e/83/8e4e83ad0b968d50e13da48cf2dad35d.jpg");

	// using .css()
	// give a width of 150 and display as block
	$(".imgPicture").css("width", 150);
	$(".imgPicture").css("display", "block");

	});





	// change the div using .css()
	// create a border with dashed lines and assign it a color
	// make a margin bottom border of 75px
	$("#dvChange").css("border-style", "dashed");
	$("#dvChange").css("border-color", "blue");
	$("#dvChange").css("margin", "75px");

	// P TEXT
	// using the .text() assign it as "Red's Chill Face"
	// using css() make the font color red, size 32 and font-weight bolder
	$("p").text("Red's Chill Face");
	$("p").css("color", "red");
	$("p").css("font-size", 32);
	$("p").css("font-weight", "bolder");

	// BUTTON
	// remove the border around the button div
	// make button float right
	$(".btnChangeMood").css("border-style", "none");
	$(".btnChangeMood").css("float", "right");


	// BUTTON
	// use .mouseenter() tochange the button background color to yellow
	// need a hint? try Googling "jquery mouseenter"
	$(".btnChangeMood").mouseenter(function() {
	$(".btnChangeMood").css("background-color", "yellow");
	});


	// use .mouseleave()
	// change button background color to lightgreen
	$(".btnChangeMood").mouseleave(function() {
	$(".btnChangeMood").css("background-color", "lightgreen");
	});
	body {
	background-color: white;
	}

	div {
	height: 350px;
	width: 300px;
	margin-right: 25px;
	padding-left: 10px;
	}

	button {
	height: 50px;
	background-color: lightgreen;
	font-size: 18px;
	padding: 0 30px;
	}

	#dvChange {
	height: 100px;
	}

	main {
	display: block;
	}