phucanhapril/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Avengers: Curriculum War

Students of ScriptEd! The universe needs your help! Use your knowledge of for loops to summon the galaxy's mightiest heroes to fight off the villainous Thanos and his quest to conquer your future!
INSTRUCTIONS

Inside the provided click handler, write a for loop that will display images of each Avenger defined in the avengerPics array.
CHALLENGE 1:

Add additional images to the avengerPics array of your favorite super hero! Does the image display without modifying any of the for loop?
CHALLENGE 2:

Inside the same for loop, display the names of the corresponding Avenger defined in the avengerNames array.

  
## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Save ScriptEd!</title>
        <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
    </head>
    <body>
        <div id="thanos"></div>
        <div id="note">
            <div id="instructions">
                <h1>Attention: ScriptEd Students</h1>
                <p>The great villian, Thanos, has stolen the ScriptEd curriculum and is holding all the volunteers hostage. He sees diversity in the technology industry as a threat to his evil plans.</p>

                <p>You must use a for loop and an array to assemble the Avengers and put an end to his evil plan.</p>
                <button>Avengers...Assemble!</button>
            </div>
            <div id="avengers"></div>
        </div>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console"]}

## script.js


var avengerPics = [
    "https://vignette.wikia.nocookie.net/ironman/images/9/96/Iron-Man-AOU-Render.png/revision/latest?cb=20150306195832",
    "https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/f/fd/AoU_Captain_America_2shield-guard.png/revision/latest?cb=20150310052018",
    "https://upload.wikimedia.org/wikipedia/en/5/59/Hulk_%28comics_character%29.png",
    "https://pre00.deviantart.net/9e01/th/pre/f/2018/013/a/f/black_panther__1____png_by_captain_kingsman16-dbzwfo1.png",
    "https://lumiere-a.akamaihd.net/v1/images/usa_avengers_chi_blackwidow_n_8346cbb6.png?region=0%2C0%2C300%2C300"
];

var avengerNames = [
    "Iron Man",
    "Captain America",
    "The Hulk",
    "Black Panther"
];


$("button").click(function() {
    $("#instructions").hide();
    // YOUR CODE GOES INSIDE HERE


});


## styles.css
body, html {
    height: 100%;
    font-family: 'Permanent Marker', cursive;
}
#thanos {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: url("https://timedotcom.files.wordpress.com/2018/04/thanos-marvel-avengers-infinity-war.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#note {
    box-sizing: border-box;
    width: 90%;
    margin: 25px auto;
    padding: 20px;
    background-color: rgba(0,255,255,0.5);
    border-radius: 10px;
}

h1 {
    text-align: center;
    color: red;
    font-size: 30px;
    margin: 0;
}

p {
    text-align: center;
    font-size: 24px;
    margin: 14px 0;
}

button {
    display: block;
    margin: 0 auto 12px auto;
    text-align: center;
    font-size: 20px;
    background-color: red;
    color: white;
    border: 0px;
    border-radius: 25px;
    padding: 10px 25px;
    cursor: pointer;
}

#avengers {
    max-width: 100%;
    height: auto;
    text-align: center;
    font-size: 20px;
    color: red;
}

img {
    max-width: 200px;
    height: auto;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Save ScriptEd!</title>
	<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
	</head>
	<body>
	<div id="thanos"></div>
	<div id="note">
	<div id="instructions">
	<h1>Attention: ScriptEd Students</h1>
	<p>The great villian, Thanos, has stolen the ScriptEd curriculum and is holding all the volunteers hostage. He sees diversity in the technology industry as a threat to his evil plans.</p>

	<p>You must use a for loop and an array to assemble the Avengers and put an end to his evil plan.</p>
	<button>Avengers...Assemble!</button>
	</div>
	<div id="avengers"></div>
	</div>
	</body>
	</html>


	var avengerPics = [
	"https://vignette.wikia.nocookie.net/ironman/images/9/96/Iron-Man-AOU-Render.png/revision/latest?cb=20150306195832",
	"https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/f/fd/AoU_Captain_America_2shield-guard.png/revision/latest?cb=20150310052018",
	"https://upload.wikimedia.org/wikipedia/en/5/59/Hulk_%28comics_character%29.png",
	"https://pre00.deviantart.net/9e01/th/pre/f/2018/013/a/f/black_panther__1____png_by_captain_kingsman16-dbzwfo1.png",
	"https://lumiere-a.akamaihd.net/v1/images/usa_avengers_chi_blackwidow_n_8346cbb6.png?region=0%2C0%2C300%2C300"
	];

	var avengerNames = [
	"Iron Man",
	"Captain America",
	"The Hulk",
	"Black Panther"
	];


	$("button").click(function() {
	$("#instructions").hide();
	// YOUR CODE GOES INSIDE HERE



	});
	body, html {
	height: 100%;
	font-family: 'Permanent Marker', cursive;
	}
	#thanos {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-image: url("https://timedotcom.files.wordpress.com/2018/04/thanos-marvel-avengers-infinity-war.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	}

	#note {
	box-sizing: border-box;
	width: 90%;
	margin: 25px auto;
	padding: 20px;
	background-color: rgba(0,255,255,0.5);
	border-radius: 10px;
	}

	h1 {
	text-align: center;
	color: red;
	font-size: 30px;
	margin: 0;
	}

	p {
	text-align: center;
	font-size: 24px;
	margin: 14px 0;
	}

	button {
	display: block;
	margin: 0 auto 12px auto;
	text-align: center;
	font-size: 20px;
	background-color: red;
	color: white;
	border: 0px;
	border-radius: 25px;
	padding: 10px 25px;
	cursor: pointer;
	}

	#avengers {
	max-width: 100%;
	height: auto;
	text-align: center;
	font-size: 20px;
	color: red;
	}

	img {
	max-width: 200px;
	height: auto;
	}