console.log('adding click event handlers')
$('button#hello').click(function(){
console.log('hello button is clicked')
$('.myviz').html("hello")
})
$('button#hi').click(function(){
console.log('hello button is clicked')
$('.myviz').html("hi")
})
$('button#taller').click(function(){
console.log('taller button is clicked')
$('.myviz').height(500)
})
$('button#shorter').click(function(){
console.log('shorter button is clicked')
$('.myviz').height(100)
})
// TODO: add an event handler for the "Red" button to set the background color
// of the viz block to red
$('button#red').click(function(){
console.log('red button is clicked')
$('.myviz').css("background-color","red")
})
// TODO: add an event handler for the "Green" button to set the background color
// of the viz block to green
$('button#green').click(function(){
console.log('green button is clicked')
$('.myviz').css("background-color","green")
})
$('button#onebar').click(function(){
var svg = "<svg><rect height='50' width='10'></rect></svg>"
$('.myviz').html(svg)
})
$('button#twobars').click(function(){
var svg = "<svg><rect height='50' width='10'/><rect height='50' width='10' x='50'/></svg>"
$('.myviz').html(svg)
})
// TODO: add an event handler for the "Five Bars" button to display five bars
$('button#fivebars').click(function(){
var svg = "<svg><rect height='50' width='10'/><rect height='50' width='10' x='50'/><rect height='50' width='10' x='100'/><rect height='50' width='10' x='150'/><rect height='50' width='10' x='200'/></svg>"
$('.myviz').html(svg)
})
// TODO: add an event handler for the "Five Green Bars" button to display five green bars
$('button#fivegreenbars').click(function(){
var svg = "<svg><rect height='50' width='10' style='fill:green' /><rect height='50' width='10' x='50' style='fill:green' /><rect height='50' width='10' x='100' style='fill:green' /><rect height='50' width='10' x='150' style='fill:green' /><rect height='50' width='10' x='200' style='fill:green' /></svg>"
$('.myviz').html(svg)
})