Project Using JavaScript to interact with a user and the Function Calls 125 mark
ID: 3811957 • Letter: P
Question
Project Using JavaScript to interact with a user and the Function Calls 125 mark 4 Using a pl ain test editor (example: Backets or Notepad or Brackets.create a web page that contains JavaScript code by typing in the ITML tags and JavaScript commands as showninthe lecture notes. You will ask the user if they wish to draw the Mandelbrot Set lfthey do you must prompt for the number ofiterations how fine of detail they want Then you will render the Mandelbror set on your webpage. lfthey emeravalue less than 100, or greater than 5,000or decline, you will displaythe factthe user declined on totho webpage The rendered webpage must look like this You MUST use these words and spacingl Header This is a computer rendering orthe Mandelbrot set. Mandelbrot set Author DYourNam Required Text Replace with your actual Everything above and below the horizontal lines are plain HTMLcode. Everything between the two lines is J The JavaScript for the Mandelbro Serisina supplied file named Mandelbrot js You must setup the connection inside your webpage to this file sotheinkladed function can be called from your JavaScript code Ido NOT copy the code in to your webpagel The function is: 450, 300 Num terationsExplanation / Answer
Please have both the files in the same location.
start.html -> In this page, the validations happen. You have to open this HTML page first.
mandar.html -> Here the MandelSort is displayed.
start.html
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Javascript Project 2</title>
</head>
<body>
<script>
function getValue(){
if (confirm('Do you wish to draw Mandelbrot Set ?')) {
var retVal = prompt("How many iterations you want ?");
if (retVal < 100 || retVal > 5000)
document.write("You have declined to draw Mandelbrot Set");
else{
//url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b);
window.location="mandar.html?value=" + encodeURIComponent(retVal);
}
} else {
document.write("You have declined to draw Mandelbrot Set");
}
}
</script>
</body>
</html>
mandar.html
-----------------------------
<!DOCTYPE html>
<html>
<head>
<title>Javascript Project 2</title>
</head>
<body >
<h5>This is computer rendering of Mandelbrot Set</h5>
<hr>
<canvas id="myCanvas" width="600" height="600"></canvas>
<br>
Mandelbrot Set using: <div id="output"></div>
<hr>
Author [Name]
<script>
var numOfIterations;
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
numOfIterations = data.value;
var x,y,i,xt;
var cx,cy;
var color;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
for(x=0;x<numOfIterations;x++)
{
for(y=0;y<numOfIterations;y++)
{
i=0;
cx=-2+x/50;
cy=-2+y/50;
zx=0;
zy=0;
do
{
xt=zx*zy;
zx=zx*zx-zy*zy+cx;
zy=2*xt+cy;
i++;
}
while(i<255&&(zx*zx+zy*zy)<4);
color=i.toString(16);
context.beginPath();
context.rect(x*4, y*4, 4, 4);
context.fillStyle ='#'+color+color+color;
context.fill();
}
}
var output = document.getElementById('output');
output.innerHTML = numOfIterations;
}
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.