outoftime/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ScriptEdGram

Instagram copied Snapchat, so ScriptEd is going to copy Instagram.
Help make ScriptEdGram, by creating a conditional statement, using if, else if, and else.
Filters

We’re going to define four filters. The user types in the name of a filter to apply it.
Each filter is defined by a particular value for the CSS filter property.

Harlem: Right now, this is applied no matter what the user types. Change it so that it’s only applied if the user types “Harlem”. The CSS filter is contrast(115%) brightness(120%)
Bushwick: The CSS for this filter is contrast(50%) brightness(180%)
SOMA: The CSS for this filter is grayscale(50%) hue-rotate(10deg)
Sunset: The CSS for this filter is contrast(115%) hue-rotate(-10deg) saturate(180%)

If you finish early…

Make up your own filters! Check out the CSS Tricks article on CSS filter for inspiration.
Create another input, where you can put a number, and it will change the size of the image.

  
## 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"],"hiddenUIComponents":["console","editor.css","editor.html"]}

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

    // Modify the rest of this click handler to apply the right filter based on what the user has typed.

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

});

$("#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>
	$("#applyFilter").click(function() {
	var filter = $("input").val();

	// Modify the rest of this click handler to apply the right filter based on what the user has typed.

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

	});

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

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

	}
	img {
	max-width: 100%;
	}