Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<html>
<head>
<title>JS Example 3</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: Helvetica;
}
.instructions{
margin-top: 20px;
margin-left: 20px;
font-weight: bolder;
}
.button{
background-color: yellow;
width: 60px;
text-align: center;
padding: 10px;
margin: 10px;
}
.button:hover{
background-color: gray;
}
#buttonOne{
color: pink;
}
#buttonTwo{
color: green;
}
#buttonThree{
color: red;
}
#box{
color: white;
width: 200px;
height: 150px;
text-align: center;
line-height: 30px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
background-color: pink;
}
</style>
<script type="text/javascript">
var hidden = false;
$( document ).ready( function(){
$('#buttonOne').click(function(){
console.log("We clicked Button One!");
$('#box').css('background-color','pink');
});
$('#buttonTwo').click(function(){
console.log("We clicked Button Two!");
$('#box').css('background-color','green');
});
$('#buttonThree').click(function(){
console.log("We clicked Button Three!");
hidden = !hidden;
var buttonThreeText;
if (hidden){
buttonThreeText = 'SHOW';
}
else{
buttonThreeText = 'HIDE';
}
//Change the text for button Three
$('#buttonThree').html(buttonThreeText);
//Toggle the display of the box
$('#box').toggle();
});
});
</script>
</head>
<body>
<div class="instructions">CHANGE THE COLOR
<div class="button" id="buttonOne">PINK</div>
<div class="button" id="buttonTwo">GREEN</div>
</div>
<div class = "instructions">TOGGLE THE BOX DISPLAY
<div class="button" id="buttonThree">HIDE</div>
</div>
<div id="box"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment