Skip to content

Instantly share code, notes, and snippets.

@joliz
Created May 5, 2017 15:24
Show Gist options
  • Save joliz/1d5b42199e2c4787c8c6db49931dfea7 to your computer and use it in GitHub Desktop.
Save joliz/1d5b42199e2c4787c8c6db49931dfea7 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=1d5b42199e2c4787c8c6db49931dfea7
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> Attention: Program Managers </h1>
<p> The great villian Ultron has stolen the ScriptEd curriculum and is holiding all our volunteers hostage. He sees diversity in the technology industry as a threat to all his evil plans. You must use a For Loop and an array to assemble the Avengers and put an end to his evil plan.</p>
<button> Assemble Avengers</button>
<img src="https://www.sideshowtoy.com/wp-content/uploads/2015/02/902343-product-silo.png">
<div id="avengers"> </div>
</body>
</html>
{"enabledLibraries":["jquery"]}
//Hulk Image: https://upload.wikimedia.org/wikipedia/en/5/59/Hulk_%28comics_character%29.png
//Thor: http://vignette1.wikia.nocookie.net/disney/images/4/44/AoU_Thor_02.png/revision/latest?cb=20150310161346
//Ironman: https://vignette2.wikia.nocookie.net/ironman/images/9/96/Iron-Man-AOU-Render.png/revision/latest?cb=20150306195832
//Captain America: https://static1.comicvine.com/uploads/original/11/113509/5117288-8538041188-EOSkE.png
//Black Widow:http://orig05.deviantart.net/a621/f/2016/100/1/6/black_widow___transparent_by_asthonx1-d9suzsa.png
var Avengers = ["https://upload.wikimedia.org/wikipedia/en/5/59/Hulk_%28comics_character%29.png", "http://vignette1.wikia.nocookie.net/disney/images/4/44/AoU_Thor_02.png/revision/latest?cb=20150310161346","https://vignette2.wikia.nocookie.net/ironman/images/9/96/Iron-Man-AOU-Render.png/revision/latest?cb=20150306195832", "https://static1.comicvine.com/uploads/original/11/113509/5117288-8538041188-EOSkE.png", "http://orig05.deviantart.net/a621/f/2016/100/1/6/black_widow___transparent_by_asthonx1-d9suzsa.png"];
$("button").click(function(){
for (var i =0; i < Avengers.length; i= i+1){
$("#avengers").append('<img src='+Avengers[i]+'>');
}
});
h1{
color:red;
text-align:center;
border-style: solid;
border-color: red;
border-radius: 20px;
animation-name: flash;
animation-duration: 0.9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
@keyframes flash {
from {color: red;}
to {color: black;}
}
p{
color:white;
text-align:center;
}
button{
color:black;
text-align:center;
margin-left:43%;
font-weight:bold;
border-style: solid;
border-color: black;
border-radius: 20px;
animation-name: flashy;
animation-duration: 0.9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
@keyframes flashy {
from {color: green;}
to {color: black;}
}
img{
width:15%;
height:15%;
float:right;
}
body{
background-color:black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment