megantaylor/index.html

## index.html
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Button Game</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

<body>

    <h4>Directions: The game is broken! Look at the JavaScript section of the code- solve the challenges to fix the game and make it better!  </h4>
    <h3>
        Click a button to make other buttons disappear and reappear.
    </h3>

    <h3>
     Can you make all the buttons disappear except the blue button?
    </h3>

    <button id="one">1</button>
    <button class="common" id="two">2</button>
    <button class="common" id="three">3</button>
    <button class="common" id="four">4</button>
    <button class="common" id="five">5</button>
    <button class="common" id="six">6</button>
    <button class="common" id="seven">7</button>
    <button class="common" id="eight">8</button>

    <br>
    <a id= "lol" href= "https://popcode.org/?gist=e4d105bfde8d47a82cff25978021dfb4" > You found the secret link! </a>

</body>
</html>

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

## script.js
//Try to solve all the challenges below--
//Challenge 1: Fix the game so that the buttons reappear.
//Challenge 2: Make a new button that uses jQuery to add the following text to the screen: "The solution is 4,2,6,7,3,5,1."
//Challenge 3: Use jQuery to make the buttons bigger.
//Challenge 4: Make all the buttons different colors using CSS.
//Challenge 5: Use jQuery to change the background color of the screen every time you click a new button.
//Challenge 6: Center the instructions on the page.
//Challenge 7: Make a new button that refreshes all the buttons.

//Export your code as a gist before doing the last challenge!

//Challenge 8: Look at the HTML section of the code and find the secret hidden link. Use jQuery to make it visible, then follow the link to the secret challenge page!


        $("#one").click(function(){
            $("#five").hide();
        });
        $("#two").click(function(){
            $("#four").hide();
        });
        $("#three").click(function(){
            $("#seven").hide();
        });
        $("#four").click(function(){
            $("#eight").hide();
        });
        $("#five").click(function(){
            $("#three").hide();
        });
        $("#six").click(function(){
            $("#two").hide();
        });
        $("#seven").click(function(){
            $("#six").hide();
        });
        $("#eight").click(function(){
            $("#one").hide();
        });


## styles.css
#one {
    background-color:lightblue;
}

.common {
    background-color:lightgreen;
}

#lol {
    float:right;
    display: none;
}
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Button Game</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	</head>

	<body>

	<h4>Directions: The game is broken! Look at the JavaScript section of the code- solve the challenges to fix the game and make it better! </h4>
	<h3>
	Click a button to make other buttons disappear and reappear.
	</h3>

	<h3>
	Can you make all the buttons disappear except the blue button?
	</h3>

	<button id="one">1</button>
	<button class="common" id="two">2</button>
	<button class="common" id="three">3</button>
	<button class="common" id="four">4</button>
	<button class="common" id="five">5</button>
	<button class="common" id="six">6</button>
	<button class="common" id="seven">7</button>
	<button class="common" id="eight">8</button>

	<br>
	<a id= "lol" href= "https://popcode.org/?gist=e4d105bfde8d47a82cff25978021dfb4" > You found the secret link! </a>

	</body>
	</html>
	//Try to solve all the challenges below--
	//Challenge 1: Fix the game so that the buttons reappear.
	//Challenge 2: Make a new button that uses jQuery to add the following text to the screen: "The solution is 4,2,6,7,3,5,1."
	//Challenge 3: Use jQuery to make the buttons bigger.
	//Challenge 4: Make all the buttons different colors using CSS.
	//Challenge 5: Use jQuery to change the background color of the screen every time you click a new button.
	//Challenge 6: Center the instructions on the page.
	//Challenge 7: Make a new button that refreshes all the buttons.

	//Export your code as a gist before doing the last challenge!

	//Challenge 8: Look at the HTML section of the code and find the secret hidden link. Use jQuery to make it visible, then follow the link to the secret challenge page!


	$("#one").click(function(){
	$("#five").hide();
	});
	$("#two").click(function(){
	$("#four").hide();
	});
	$("#three").click(function(){
	$("#seven").hide();
	});
	$("#four").click(function(){
	$("#eight").hide();
	});
	$("#five").click(function(){
	$("#three").hide();
	});
	$("#six").click(function(){
	$("#two").hide();
	});
	$("#seven").click(function(){
	$("#six").hide();
	});
	$("#eight").click(function(){
	$("#one").hide();
	});
	#one {
	background-color:lightblue;
	}

	.common {
	background-color:lightgreen;
	}

	#lol {
	float:right;
	display: none;
	}