Input

Show text

Set Background Color

Set Height

Bars (1)

Bars (2)

Bars (3)

Viz

$('button#show').click(function(){    
    var value = $('input#show').val()    
    console.log(value)
    $('.myviz').html(value)
})

$('button#setcolor').click(function(){    
    var value = $('input#setcolor').val()    
    console.log(value)
    $('.myviz').css('background-color',value)
})

// TODO: add an event handler for "Set Height" button to set the height of the
// viz window to the specified value
$('button#setheight').click(function(){    
    var value = $('input#setheight').val()    
    console.log(value)
    $('.myviz').height(value)
})

// TODO: add an event handler for "Show Bars (1)" to display a specified number of
// vertical bars
$('button#bars1').click(function(){ 
	var svg = "<svg>";
	var numBars = $('input#bars1-number').val() ;
	var i;
    for (i=0;i<numBars;i++){
        svg += "<rect height='50' width='10' x='"+i*20+"'/>";
    }
    svg+="</svg>";
    $('.myviz').html(svg);   
    
})

// add an event handler for "Show Bars (2)" to display a specified number of
// vertical bars in the specified color
$('button#bars2').click(function(){ 
	var svg = "<svg>";
	var numBars = $('input#bars2-number').val() ;
	var color = $('input#bars2-color').val() ;
	var i;
    for (i=0;i<numBars;i++){
        svg += "<rect height='50' width='10' x='"+i*20+"' fill='"+color+"' stroke='"+color+"'/>";
    }
    svg+="</svg>";
    $('.myviz').html(svg);   
    
})

//  add an event handler for "Show Bars (3)" to display a specified number of
// vertical bars in the specified color at the specified height

$('button#bars3').click(function(){ 
	var svg = "<svg>";
	var numBars = $('input#bars3-number').val() ;
	var color = $('input#bars3-color').val() ;
	var height = $('input#bars3-height').val() ;
	var i;
	var i;
    for (i=0;i<numBars;i++){
        svg += "<rect height='"+height+"' width='10' x='"+i*20+"' fill='"+color+"' stroke='"+color+"'/>";
    }
    svg+="</svg>";
    $('.myviz').html(svg);   
    
})