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

// of the viz block to red
$('button#red').click(function(){
    console.log('Red button is clicked')
    $('.myviz').css('background-color', '').css('background-color', 'red');
})

$('button#green').click(function(){
    console.log('Green button is clicked')
    $('.myviz').css('background-color', '').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)
})

$('button#fivegreenbars').click(function(){
    var svg = "<svg>"
    for (i=0; i < 5; i++) {
        svg += "<rect height='50' width='10' x='" + i * 20 + "' style='fill:rgb(0,255,0);'/>"
    }
    svg += "</svg>"
    $('.myviz').html(svg)
})