Created
October 1, 2017 15:27
-
-
Save DrinKaziu/23a567be0fc5628fe86117a4456af2d7 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/sikicov
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> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| * { | |
| box-sizing: border-box; | |
| font-family: sans-serif; | |
| } | |
| main { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| min-width: 250px; | |
| padding: 30px; | |
| } | |
| .lightbulb { | |
| border: 1px solid grey; | |
| padding: 10px; | |
| width: 25%; | |
| float: left; | |
| cursor: pointer; | |
| } | |
| .lightbulb img { | |
| width: 100%; | |
| } | |
| .bulb-on { | |
| background-color: yellow; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <div> | |
| <div class="lightbulb js-lightbulb"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/lightbulb.svg" alt="Kiwi standing on oval"> | |
| </div> | |
| <div class="lightbulb js-lightbulb"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/lightbulb.svg" alt="Kiwi standing on oval"> | |
| </div> | |
| </div> | |
| <div class="lightbulb js-lightbulb"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/lightbulb.svg" alt="Kiwi standing on oval"> | |
| </div> | |
| <div class="lightbulb js-lightbulb"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/lightbulb.svg" alt="Kiwi standing on oval"> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <script id="jsbin-javascript"> | |
| function handleBulbClicks() { | |
| $('.lightbulb').click(function(event){ | |
| $('.lightbulb').removeClass('bulb-on'); | |
| $(event.currentTarget).addClass('bulb-on') | |
| }); | |
| } | |
| $(function() { | |
| handleBulbClicks(); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">* { | |
| box-sizing: border-box; | |
| font-family: sans-serif; | |
| } | |
| main { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| min-width: 250px; | |
| padding: 30px; | |
| } | |
| .lightbulb { | |
| border: 1px solid grey; | |
| padding: 10px; | |
| width: 25%; | |
| float: left; | |
| cursor: pointer; | |
| } | |
| .lightbulb img { | |
| width: 100%; | |
| } | |
| .bulb-on { | |
| background-color: yellow; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function handleBulbClicks() { | |
| $('.lightbulb').click(function(event){ | |
| $('.lightbulb').removeClass('bulb-on'); | |
| $(event.currentTarget).addClass('bulb-on') | |
| }); | |
| } | |
| $(function() { | |
| handleBulbClicks(); | |
| });</script></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
| * { | |
| box-sizing: border-box; | |
| font-family: sans-serif; | |
| } | |
| main { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| min-width: 250px; | |
| padding: 30px; | |
| } | |
| .lightbulb { | |
| border: 1px solid grey; | |
| padding: 10px; | |
| width: 25%; | |
| float: left; | |
| cursor: pointer; | |
| } | |
| .lightbulb img { | |
| width: 100%; | |
| } | |
| .bulb-on { | |
| background-color: yellow; | |
| } |
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
| function handleBulbClicks() { | |
| $('.lightbulb').click(function(event){ | |
| $('.lightbulb').removeClass('bulb-on'); | |
| $(event.currentTarget).addClass('bulb-on') | |
| }); | |
| } | |
| $(function() { | |
| handleBulbClicks(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment