Lab 5 Calling JavaScript Functions Reference: Participation 5.3.1: JavaScript to change colors, lectures. We provide a lot of help during lab and office hours. Start with the given Lab-5-Start.html page. You'd need to add four buttons to the page, in between the

and elements. 1) Add a button with an onclick event such that when the user clicks the button, the function traverse() runs! Make it similar to one of the 5.3.1 buttons, just call traverse on the onclik event. 2) Add a button with an onclick event such that when the user clicks the button, the color of the text changes to a random color! Just put the appropriate code that calls the given getRandomColor() function to get the text color and apply it. 3) Add a button with an onclick event such that when the user clicks the button, the color of the page changes to a random color! Just put the appropriate code that calls the getRandomColor() function to get a new color for the background of the document. 5) Add a button with an onclick event handler such that when the user clicks the button the drawOnCanvas function runs and fills the canvas with random circles. 6) For all buttons: See what the button should display, on the demo below. Style the buttons (on the head of the page) with a margin top value and a background color. Put tags after each button, so that it displays on a new line.

Here is the coding file I have now, I got the bee flying as well as the text color changed.

However, I don't know how to change the background color to random, and I don't know why the text color will still change when I click the button for "draw on canvas".

body {text-align:center;}

h1 {margin-top: 10%;}

canvas {margin-top: 10%;}

// Do not touch the code below

var picture="bee.png"

var dy, xp, yp; // coordinate and position variables

var am, stx, sty; // amplitude and step variables

var doc_width, doc_height;

doc_width = window.innerWidth-10;

doc_height=window.innerHeight/2;

dy = 0; // set coordinate variables

yp = Math.random()*(doc_height-75); // set position variables

xp = doc_width ; // start from side

am = 10 + Math.random()*7; // set amplitude variables

sty = 0.02 + Math.random()/10; // set step variables

stx = 0.7 + Math.random(); // set step variables

document.write("

");

function traverse(){ // bee animation function *****************

xp -= stx;

if (xp

yp = Math.random()*(doc_height-am-75);

xp = doc_width ;

sty = 0.02 + Math.random()/10;

stx = 0.7 + Math.random();

}

dy += sty;

document.getElementById("dot").style.left=xp+"px";

document.getElementById("dot").style.top=yp + am*Math.sin(dy)+"px";

beeTimer=setTimeout("traverse()", 10);

}

function randNum(range) {

return Math.floor(range * Math.random());

}

function getRandomColor(){ // function that returns a color*****

var colors = ["green", "black", "lightblue", "yellow", "magenta", "orange", "lightbrown", "purple", "cyan","red", "sienna", "salmon", "beige", "white"];

var color = colors[randNum(14)];

var x = document.getElementById("textcolor");

x.style.color = color;

return (color);

}

function drawOnCanvas(){ // function to draw on the canvas******

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Draw a circle with function arc.

//ctx.arc(x, y, radius, startAngle, endAngle);

for (var i = 0; i

ctx.fillStyle = getRandomColor();

ctx.beginPath();

ctx.arc(randNum(450), randNum(450), randNum(50)+10, 0, 2*Math.PI);

ctx.fill();

ctx.stroke();

}

}

Bee traversing the page on a sine wave!!!