Created
August 28, 2017 20:45
-
-
Save courtney-scripted/9307e2bae152d730e53706d7a6b51ab9 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=9307e2bae152d730e53706d7a6b51ab9
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"enabledLibraries":["jquery"]} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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", ""); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: sans-serif; | |
| } | |
| h1 { | |
| font-family: 'Satisfy', cursive; | |
| } | |
| img { | |
| max-width: 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment