Skip to content

Instantly share code, notes, and snippets.

@alexpelan

alexpelan/index.html

Last active November 9, 2017 01:55
Show Gist options
  • Save alexpelan/28a783ab9512f440ae7d06f081838293 to your computer and use it in GitHub Desktop.
Save alexpelan/28a783ab9512f440ae7d06f081838293 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=28a783ab9512f440ae7d06f081838293
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>05.3 jQuery Actions jQuery Funhouse</title>
</head>
<body>
<div class="row">
<div class="control">
<img id="garage-door-opener" src="https://cl.ly/1V3c0o172S0N/garagedoor.jpg">
</div>
<div>
<img id="garage-door" src="https://cl.ly/201d463I3I2v/garage-door.jpg">
</div>
</div>
<div class="row">
<div class="control">
<img id="transporter-controls" src="https://cl.ly/2K2l2I1P2O0F/transportercontrols.jpg">
</div>
<div>
<img id="away-team" src="https://cl.ly/2K2c36373T1R/transporter.jpg">
</div>
</div>
<div class="row">
<div class="control">
<img id="light-switch" src="https://cl.ly/093N0K1c3C33/lightswitch.jpeg">
</div>
<div>
<img id="light-bulb" src="https://cl.ly/2p1J3A28012w/lightbulb.jpg">
</div>
</div>
</body>
</html>
Raw
instructions.md
  1. When you click on the garage door opener, the garage door should toggle slide up or down.
  2. When you click on the transporter, the group of people should fade in.
  3. When you click on the light switch, the light bulb should toggle show/hide
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
$("#garage-door-opener").click(function() {
});
$("#transporter-controls").click(function() {
});
$("#light-switch").click(function() {
});
Raw
styles.css
.row {
display: flex;
}
.row > div {
flex: 0 1 50vw;
height: 100%;
}
img {
width: 100%;
}
.control {
cursor: pointer;
}
#away-team {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment