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
$('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='20'/></svg>"
    $('.myviz').html(svg)
})


$('button#fivebars').click(function(){
    var svg = "<svg>"
    for(i=0; i < 5; i++){
        svg+="<rect height='50' width='10' x='"+(i*20)+"'/>"
    }
    svg+="</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>"
    for(i=0; i < 5; i++){
        svg+="<rect height='50' width='10' x='"+(i*20)+"' style='fill: green'/>"
    }
    svg+="</svg>"
    $('.myviz').html(svg)
})