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)
})

$('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#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#twobars').click(function(){
    var svg = "<svg><rect height='50' width='10'/><rect height='50' width='10' x='20'/></svg>"
    $('.myviz').html(svg)
})

$('button#fivegreenbars').click(function(){
   $('.myviz').css("background-color","blue")
    var svg = "<svg><rect height='50' width='10'fill = 'green'/><rect height='50' width='10' x='20' fill = 'green'/><rect height='50' width='10' x='40' fill = 'green'/><rect height='50' width='10' x='60' fill = 'green'/><rect height='50' width='10' x='80' fill = 'green'/></svg>"
    $('.myviz').html(svg)
})