In: Computer Science
Please write JavaScript and HTML code for the following problems
Problem 1 - Array Usage
Ask the user to enter positive numeric values. Store each value in an array. Stop reading values when the user enters -1. After all values have been entered, calculate the sum and the average of the values in the array (if you do not know what a sum or average is, or how to calculate them, it is your responsibility to look up this information). Print out the values entered by the user, the sum of those values, and the average value.
You must create one function that calculates the sum of the values in the array and one function that calculates the average of the values in the array.
Problem 2 - Circles
For this problem, you will create a simple HTML page that allows the user to draw circles by clicking inside of a canvas element.
The HTML page shall contain a title, a header, two text fields, and a canvas. The title shall include your name. The header shall contain the text "Problem 2". The first text field shall have a label indicating that the field controls the number of circles that will be drawn. The second text field shall have a label indicating that the field controls the radius of the circles that will be drawn. The canvas shall have a height of 400 pixels and a width of 600 pixels.
The HTML page shall also contain a script that uses an event listener to draw circles whenever the user clicks inside of the canvas element with their mouse. The number of circles to draw, and the radius of the circles, shall be obtained from the text fields. Each circle shall be colored with an alpha value of 0.1. The canvas shall be cleared before any circle is drawn. The x and y position of each circle shall be randomly determined. You can use the following code to assign a random value to x and y:
let x = Math.floor(Math.random() * (width - 2 * r)) + r; let y = Math.floor(Math.random() * (height - 2 * r)) + r;
I'll be solving Problem 1
==================================================================================
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<script>
function arrayOperations() {
var inp = document.getElementById("myText").value; //Get string
entered
inp = inp.split(" "); //Make it into array, split on the basis of "
"
var sum, avg;
var arr = [];
for(var i = 0; inp[i] != -1; i++)
arr[i] = Number(inp[i]); //Converting string to int
sum = calcSum(arr); //Sum function Call
avg = calcAvg(arr) ; //Average function Call
document.getElementById("sum").innerHTML = "Sum:"+sum; //Displaying
sum
document.getElementById("avg").innerHTML = "Average:"+avg;
//Displaing avg
}
function calcSum(arr){
var sum = 0;
for(var i = 0; i < arr.length; i++)
{
sum += arr[i]; //adding all elements
}
return sum;
}
function calcAvg(arr){
var sum = 0;
for(var i = 0; i < arr.length; i++)
{
sum += arr[i];
}
return sum/arr.length; //dividing sum by number of elements to get
avg
}
</script>
</head>
<body>
<input type="text" id="myText" placeholder="Enter array
here"><br>
<button
onClick="arrayOperations()">Calculate</button>
<p id="sum"></p>
<p id="avg"></p>
</body>
</html>
==========================================================================