Question

In: Computer Science

Please write JavaScript and HTML code for the following problems Problem 1 - Array Usage Ask...

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.

  • Your sum function should take one parameter (an array) and return the sum
  • Your average function should take one parameter (an array) and return the average

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;

Solutions

Expert Solution

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>

==========================================================================


Related Solutions

Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to display the current day and time. b) Write a JavaScript program to print the contents of the current window.   c) Write a JavaScript program where the program takes a random integer between 1 to 10 d) Write a JavaScript program to calculate multiplication and division of two numbers (input from the user). e)Write a JavaScript program to create a new string from a given...
<HTML JAVASCRIPT> Please create an array of student names and another array of student grades. Create...
<HTML JAVASCRIPT> Please create an array of student names and another array of student grades. Create a function that can put a name and a grade to the arrays. Keep Read student name and grade until student name is “???”. And save the reading by using a function Create another function to show all the grade in that object. Create the third function that can display the maximum grade and the student’s name. Create a sorting function that can sort...
use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file...
use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when a button is clicked. (b) Create a HTML file that includes JavaScript that is similar to: let recs = [“my item …1”,”my item…2”, …] i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be rendered as a list element. Use a HTML list....
The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that...
For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that follow, debug (if necessary).  When required to write a function, you must include a script to test the function with at least two different data sets.  In all cases, for testing, you must write an HTML file that references the JavaScript file. Output an HTML table of the numbers from 2 to 8 along with their squares and cubes. Create a function titled counter that takes...
write php code for buying and selling web using sql, javascript ,html ,css style
write php code for buying and selling web using sql, javascript ,html ,css style
2. The HTML document on the following page consists of JavaScript code executed when the document...
2. The HTML document on the following page consists of JavaScript code executed when the document is loaded. It prompts the user for his/her name (first and last names) then outputs the greeting “Hello Mr. _____!” or “Hello Ms. _____!” (where _____ is the user’s last name) depending on whether the first name is recognized as a male name. (In the code, only three male names are checked; a realistic program would check many more names.) We allow for the...
Using Javascript, complete the following /************************************************************************** * * Array callback filtering * **************************************************************************/ /** * Write...
Using Javascript, complete the following /************************************************************************** * * Array callback filtering * **************************************************************************/ /** * Write and export a function named "everyEven" which takes an array and a test * function for checking individual elements of the array. The "everyEven" * function should test the even elements of the array and return true only * if at least one of the even elements passes the test. * * @param arr An array whose even elements should be tested * @param...
JAVASCRIPT HTML I'm looking to make a function that will take a postal code in a...
JAVASCRIPT HTML I'm looking to make a function that will take a postal code in a text box. The function jobs is to basically make sure the first letter of the postal code starts with these letters. ('A') ('N") ('W') ('F'). If the first letter of the postal code does not match up then an error to the user is sent.
For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML...
For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML <canvas> tag. The game will be played "hot seat" where players take turns using the same device. Requirements: The canvas should be 600px tall and wide, with the gameplay area occupying most of the canvas. The X's and O's may be drawn using polygons or large-font text The grid should be drawn using polygons, specifically long, thin rectangles Before & between games, the canvas...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT