Created
October 1, 2017 15:26
-
-
Save DrinKaziu/7f4f6bc0a78a1f948022c04da580bee5 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/lafuxex
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