JQuery Click Handler

1. Hello Display Hello
2. Hi Display Hi
3. Taller Make it taller
4. Shorter Make it shorter
5. Red Set background color to red
6. Green Set background color to green
7. One Bar
8. Two Bars
9. Five Bars
10. Five Green Bars

Viz

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

// TODO: add an event handler for the "Green" button to set the background color
// of the viz block to green

$('button#red').click(function(){
    console.log('red button is clicked')
    $('.myviz').css('background-color', 'red')
})


$('button#green').click(function(){
    console.log('red 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='20'/></svg>"
    $('.myviz').html(svg)
})

$('button#fivebars').click(function(){
    var svg = "<svg><rect height='50' width='10'/><rect height='50' width='10' x='20'/><rect height='50' width='10' x= '40'/><rect height='50' width='10' x ='60'/><rect height='50' width='10' x='80'/></svg>"
    $('.myviz').html(svg)
})

$('button#fivegreenbars').click(function(){
    var svg = "<svg><rect height='50' width='10' style = 'fill:green'/><rect height='50' width='10' x='20' style = 'fill:green'/><rect height='50' width='10' x='40' style = 'fill:green'/><rect height='50' width='10' x ='60' style = 'fill:green'/><rect height='50' width='10' x='80' style = 'fill:green'/></svg>"
    $('.myviz').html(svg)
})
// TODO: add an event handler for the "Five Bars" button to display five bars

// TODO: add an event handler for the "Five Green Bars" button to display five green bars