courtney-scripted/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>09.2 Multiple Conditions ScriptEdGram</title>
        <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
    </head>
    <body>
        <h1>ScriptEdGram: Choose a filter.</h1>
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/d6/Half_Dome_from_Glacier_Point%2C_Yosemite_NP_-_Diliff.jpg">
        <p> Choose one of the following filters: Harlem, Bushwick, SOMA, or Sunset. </p>
        <input placeholder="Harlem">
        <button id="applyFilter"> Apply filter </button>
        <div>
            <button id="reset">Reset</button>
        </div>

    </body>
</html>

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

## script.js
var selectedFilter;

$("#applyFilter").click(function() {
    var filter = $("input").val();

  // Write if-statements around the following lines.
    // Think: what is the condition?
    //        what should execute if the condition is met?
    // Let's do the first example together. Below is the code block we want to execute if the user types Harlem in the input.

         $("img").css("filter", "contrast(115%) brightness(120%)");

    // Below is the code block we want to execute if the user types Bushwick in the input.

        $("img").css("filter", "contrast(50%) brightness(180%)");

    // Below is the code block we want to execute if the user types SOMA in the input.

        $("img").css("filter", "grayscale(50%) hue-rotate(10deg)");

    // Below is the code block we want to execute if the user types Sunset in the input.

        $("img").css("filter", "contrast(115%) hue-rotate(-10deg) saturate(180%)");


});

$("#reset").click(function() {
    $("img").css("filter", "");
});

## styles.css
body {
    font-family: sans-serif;
}

h1 {
 font-family: 'Satisfy', cursive;

}
img {
    max-width: 100%;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>09.2 Multiple Conditions ScriptEdGram</title>
	<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
	</head>
	<body>
	<h1>ScriptEdGram: Choose a filter.</h1>
	<img src="https://upload.wikimedia.org/wikipedia/commons/d/d6/Half_Dome_from_Glacier_Point%2C_Yosemite_NP_-_Diliff.jpg">
	<p> Choose one of the following filters: Harlem, Bushwick, SOMA, or Sunset. </p>
	<input placeholder="Harlem">
	<button id="applyFilter"> Apply filter </button>
	<div>
	<button id="reset">Reset</button>
	</div>

	</body>
	</html>
	var selectedFilter;

	$("#applyFilter").click(function() {
	var filter = $("input").val();

	// Write if-statements around the following lines.
	// Think: what is the condition?
	// what should execute if the condition is met?
	// Let's do the first example together. Below is the code block we want to execute if the user types Harlem in the input.

	$("img").css("filter", "contrast(115%) brightness(120%)");

	// Below is the code block we want to execute if the user types Bushwick in the input.

	$("img").css("filter", "contrast(50%) brightness(180%)");

	// Below is the code block we want to execute if the user types SOMA in the input.

	$("img").css("filter", "grayscale(50%) hue-rotate(10deg)");

	// Below is the code block we want to execute if the user types Sunset in the input.

	$("img").css("filter", "contrast(115%) hue-rotate(-10deg) saturate(180%)");


	});

	$("#reset").click(function() {
	$("img").css("filter", "");
	});
	body {
	font-family: sans-serif;
	}

	h1 {
	font-family: 'Satisfy', cursive;

	}
	img {
	max-width: 100%;
	}