program logbook 2

Jack Eastwood

Top tips:

Put semi-colons at the end of everything 2 equals signs= comparison Variables can be overwritten Watch out for grammar All variables have to be declared using “VAR” then a value needs to be assigned to the

variable. Code is case sensitive Ordering of variables is very important “//” can be used to apply comments in your code without being applied when running the

program. The “prompt” variable displays a window that asks the user for an input, in this case “Please

enter your name:” The “alert” variable displays the “message” variable on another window after the user has

put an input in the prompt window. Whenever something is stored as a prompt it’s stored as a string. == means equals, != means not equal parseInt means parse integer, meaning this only picks out any numerical values from a string

of characters identified in a variable. Don’t rely on > or <, use ranges with defined upper and lower limits. Don’t put a semi-colon at the end of a for loop. Var ++ is the same as var= var + 1 && means and, || means or ParseFloat = returns any floating point number

3.5 Experiments with graphics// Ex3-5 : Graphics Experiments

// Part of demo program:

var canvas;

canvas = openGraphics();

var x;

var y;

var size;

x = 0;

Jack Eastwood

y = 0;

size = 500;

while( size > 0 )

{

canvas.setColor( "white" );

canvas.fillEllipse( x, y, size, size );

canvas.setColor( "blue" );

canvas.drawEllipse( x, y, size, size );

x = x + 10;

y = y + 10;

size = size - 20;

}

canvas.paint();

Jack Eastwood

// Ex3-5 : Graphics Experiments

// Part of demo program:

var canvas;


var x;

var y;

var width;

var height;

Jack Eastwood

x = 0;

y = 0;

width = 200;

height = 700;

while( (width > 0 ) && (height > 0) )

{

canvas.setColor( "white" );

canvas.fillEllipse( x, y, width, height );


canvas.drawEllipse( x, y, width, height );

x = x + 23;

y = y + 3;

width = width - 7;

height = height - 70;

}

canvas.paint();

Jack Eastwood

Comments

Changing the size or width/height variables will change how small or big the overall shape will be outputted on the canvas. In the two examples I’ve given, by reducing the size in the loop from the

Jack Eastwood

size set when the variable is declared will influence how many circles will be drawn i.e if size is set to 800 then size was reduced by 20 in the loop, then 40 circles would be outputted.

3.6 Graphical Event timer// Ex 3-6 : Graphical Event Timer

var canvas;


var textX = 20;

var textY = 30;

var lineX = 180;

var lineY = textY + 5;

for (var i = 0; i < 10; i++) {

// Put your event timer code here

alert( "Press \"OK\" to start the timer." );

var date = new Date();

// create another Date object and store the time now

alert( "Press \"OK\" to stop the timer." );

var date1 = new Date();

var difference = date1 - date;

var previoustime;

canvas.setStroke(3);

canvas.setColor("black");

canvas.drawString( "Timer", 150, 0 );

canvas.drawString( " Difference in time: " + difference + "ms", 10, textY);

Jack Eastwood

if (previoustime>difference) {

canvas.setColor("Green");

}

else if (previoustime<difference){

canvas.setColor("Red");

}

else {

canvas.setColor("black");

}

canvas.drawLine( lineX, lineY, lineX + difference, lineY );

textY = textY + 20;

lineY = lineY + 20;

previoustime=difference;

canvas.paint();

}

Jack Eastwood

Comments

The program calculates the difference in time by setting up 2 dates that gathers the exact time, then finds the difference between the two times when the user hits the “start” and “stop” prompts. The difference between the 2 times is then outputted as a line and the higher the difference, the higher the line length, so the difference is added to the line’s x length. The for loop means that the user will asked to calculate the difference in time 10 times (10 starts + 10 stops). If the difference in time is less than the earlier time, then the line colour will be set to green and if the difference is higher than the line colour will be set to red using if statements on difference + previous time variables. At the end of the loop the line and text Y positions are plused by 20, meaning that every line and text output when the user hits start and stop will be placed below the previous output.

3.7 Sudoku Grid// Ex3-7 : Blank Sudoku Grid

var canvas;


var x;

var y;

var gap;

x = 20;

Jack Eastwood

y = 20;

gap = 25;

// so not much help here!

var count;

for( count=0; count<11; count++ )

{

canvas.drawLine( x,y,x+225,y );

y = x+count*gap;

} //endfor

x = 20;

y = 20;


{

canvas.drawLine(x,y,x,y+225);

x = y+count*gap;

}

x = 20;

y = 20;


{


canvas.drawLine(x,y,x+225,y);

y = x+count*gap*3;

Jack Eastwood

}

x = 20;

y = 20;

for( count=0; count<5; count++)

{


canvas.drawLine(x,y,x,y+225);

x = y+count*gap*3;

}

canvas.paint();

Comments

Jack Eastwood

4 for loops are used to create this Sudoku grid. The first for loop draw out all the horizontal lines 10 times and because the gap size is set to 25 then the X line lengths will be set to 225 as each 3x3 box is 75x75, so this is added to the X axis length parameter as well as the Y axis offset being placed 25 pixels below every time a horizontal line is placed. The second for loop plots the vertical lines and this is the same as the previous for loop apart from that the values are added to the Y line length and X offset. Finally, the final 2 loops add the thick black lines to form the grid and the only difference is that the setStroke is set to 3, count set to 5 (prints 4 times) and the gap is times by 3 which will create each 3 x 3 box. The X and Y co-ordinates have to be reset after each loop otherwise the next loop would just print on the X and Y co-ordinates calculated by the previous loops.

4.1 Garfield cartoon// Ex4-1: Garfield Cartoon

var canvas;


var imageName1;

var imageName2;

var imageName3;

var xPosition;

var yPosition;

var width;

Jack Eastwood

var height;

imageName1 = "garfield1.gif";

xPosition = 10;

yPosition = 10;

canvas.drawImage(imageName1, xPosition,yPosition);


xPosition = 210;

yPosition = 10;

canvas.drawImage(imageName2, xPosition, yPosition);


xPosition = 400;

yPosition = 10;

canvas.drawImage(imageName3, xPosition, yPosition);

canvas.setFont( "comic sans ms","10.5px", Font.BOLD );

canvas.drawStringRect("THERE'S A GOOD SCARY MOVIE ON TV TONIGHT", 30, 13, 150);

canvas.drawStringRect("YEAH, SURE", 140, 55, 50);

canvas.drawStringRect("YOU SAY THAT EVERY NIGHT", 328, 40, 61);

canvas.drawStringRect("''INVASION OF THE 50-FOOT ADOLESCENTS''", 415,

Jack Eastwood

12, 150);

canvas.drawStringRect("TONIGHT, THOUGH, YOU WOULD BE CORRECT", 530, 40, 70);

canvas.paint();

Comments

The canvas.drawStringRect function basically draws a string in an invisible rectangle. In more simple terms strings can only be drawn at a fixed width by changing the width value (drawstringRect(x),(y),(width). The higher the user sets the width value then the longer a string can be drawn out horizontally on a canvas.

4.2 guess the number// Ex4-2: Guess the Number

var canvas;


var max;

max = 100;

var numberToGuess;

numberToGuess = 50; // use a known value for testing

Jack Eastwood

canvas.drawString("Welcome to Jack Eastwood's guessing game", 50, 10);

var guess;

guess = parseInt(prompt("Please input a number between 0 and 100"),10);

var guessed = false;

var message;

// (3) if too high .....

if (guess < numberToGuess)

{

canvas.drawString("You was wrong, try a higher number", 10, 30);

}

// (4) if too low .....

if (guess > numberToGuess)

{

canvas.drawString("You was wrong again fool, try a lower number", 10, 30);

}

// (5) "just right" said Goldilocks .....

if (guess == numberToGuess)

{

canvas.drawString("You was right",10,30);

}

Jack Eastwood

// (6) canvas.drawString( message ......

canvas.paint();

Jack Eastwood

// Ex4-2: Guess the Number

var canvas;


var max;

max = 100;

var numberToGuess = Math.floor( Math.random() * max ) +1;

canvas.drawString("Welcome to Jack Eastwood's guessing game", 50, 10);

Jack Eastwood

var x = 20;

var y = 20;

var guess;

var guessed = false;

while( !guessed ){

guess = parseInt(prompt("Please input a number between 0 and 100"),10);

var message;

// (3) if too high .....

if (guess > numberToGuess){

message = guess + " Too high";

}

// (4) if too low .....

if (guess < numberToGuess) {

message = guess + " Too low";

}

// (5) "just right" said Goldilocks .....

if (guess == numberToGuess) {

message = guess + " Correct";

guessed = true;

}

Jack Eastwood

canvas.drawString( message, x, y);

y = y + 20;

canvas.paint();

}

Comments

This program sets the user to guess a number between 0 and 100. The Math.floor( Math.random() * max ) +1 function sets a number to guess between 0 and the max variable, which I set to 100, so will select a random number up to 100 and given the variable numberToGuess. The variable guessed to set to false and a while loop is used so that every time the user incorrectly guesses the number, then

Jack Eastwood

they will have to guess again until they get it correct. 3 if statements are also used within the while loop, on saying that if the user guesses to high then it will print to high on the canvas, another one saying to low on the canvas and the last if statement is if the user correctly guesses the number to guess, then the guessed variable will be set to “true”, so the while loop will end and the number that was correctly guessed will be printed on the canvas. Every time the user incorrectly guesses, then the Y value for the user’s number guess and “Too high/low” is increased by 20 everytime, so each message will be printed underneath the previous message.

4.3 Square root calculator// Ex4-3 : Square Root Calculator

var canvas;


//var number = prompt( "Enter a number: " );

//number = parseInt( number, 10 );

//var sqRoot;

//sqRoot = Math.sqrt( number );

//var message;

//message = "Using the JavaScript library,<br>";

//message = message + "The square root of " + number + "<br>";

//message = message + "is " + sqRoot;

// Put your version here

var lowGuess = 0;

var highGuess = 10;

var squareRoot = Math.sqrt( highGuess );

var guess = prompt( "Please enter a number: ");

var message;

Jack Eastwood

if( guess > squareRoot){

message = guess + " Too high";

}

if( guess < squareRoot){

message = guess + " Too low";

}

if( guess == squareRoot){

message = guess + " Correct";

}

canvas.drawString( message, 10, 10 );

canvas.paint();

4.4 BMI calculator// Ex4-4: BMI Calculator

var canvas;


var height = 160/100;

var weight = 40;

var bmi = weight/(height * height);

alert( bmi );

Jack Eastwood

canvas.paint();

// Ex4-4: BMI Calculator

var canvas;


canvas.setFont( "Comic Sans MS", "20px", Font.BOLD );

canvas.drawString( "BMI calculator bitch's", 150, 0);

var height = parseFloat(prompt("Please enter your height in cm: ") ,10)/100;

var weight = parseFloat(prompt("Please enter your weight in kg: ") ,10);

var calculation = weight/(height * height);

var bmi = calculation.toFixed(2);

var classification;

if (bmi <= 18.4999){

classification = " Underweight";

}

else if (bmi > 18.4999 && bmi <= 24.999){

classification = " Ideal";

}

Jack Eastwood

else if (bmi > 24.999 && bmi <= 29.999){

classification = " Overweight";

}

else if (bmi > 29.999 && bmi <= 39.999){

classification = " Obese";

}

else if (bmi > 39.999){

classification = " Very obese";

}

canvas.setFont( "Comic Sans MS", "14px" );

canvas.drawString( bmi + ":" + classification, 0, 50 );

canvas.paint();

Jack Eastwood

Jack Eastwood

// Ex4-4: BMI Calculator

var canvas;


var reset = false;

var xos = 20;

var xosGreen = 125;

var xosOrange = 205;

var xosBrown = 265;

var xosRed = 385;

var yos = 20;

var lineHeight = 400;

var lineHeight2 = 396.5;

var lineLength = 550;

var lineYellow = 105;

var lineGreen = 80;

var lineOrange = 60;

var lineBrown = 120;

var lineRed = 184;

var label = 10;

var labelnum = 0;

var ArmLength = 30;

Jack Eastwood

var ArmYPos = 330;

var LArmPos = 265;

var RArmPos = 320;

var LegLength = 70;

var LegYPos = 350;

var LLegPos = 300;

var RLegPos = 320;

var metricKg;

var metricCM;

var imperialInches;

var imperialStone;

while( !reset ){

canvas.setFont( "Comic Sans MS", "20px", Font.BOLD );

canvas.drawString( "BMI calculator", 150, 0);

canvas.setFont( "Comic Sans MS", "14px");

canvas.drawString( "This program will calculate your body mass index which is an indication of the status of your weight.", 0 ,30 );

canvas.drawString( "The higher the BMI figure, the more likely it is that you are overweight.", 0, 50);

var measureType = prompt( "Would you like to use Metric or Imperial conversion? (Metric/Imperial): ");

if (measureType == "metric"){

var heightMetric = parseFloat(prompt("Please enter your height in cm: ") ,10)/100;

var weightMetric = parseFloat(prompt("Please enter your

Jack Eastwood

weight in kg: ") ,10);

var calculationMetric = weightMetric/(heightMetric * heightMetric);

var bmiMetric = calculationMetric.toFixed(2);

metricKg = " Kg";

metricCM = " Cm";

}

else if (measureType == "imperial"){

var heightImperial = parseFloat(prompt( "Please enter your height in inches: "), 10);

var weightImperial = parseFloat(prompt( "Please enter your weight in pounds: "), 10);

var calculationImperial = weightImperial * 703/(heightImperial * heightImperial);

var bmiImperial = calculationImperial.toFixed(2);

imperialInches = " inches";

imperialStone = " stones";

}

var classification;

canvas.setFont( "Comic Sans MS", "14px" );

canvas.setColor( "DarkBlue" );

if (bmiMetric || bmiImperial <= 18.4999){

canvas.setColor( "black" );



Jack Eastwood

canvas.drawEllipse(xos + 3 + 50, 290, 20, 20);

canvas.fillEllipse(xos + 50, 310, 30, 70);

canvas.drawLine( xos + 50 + 50, ArmYPos, xos + 50 + ArmLength, ArmYPos );

canvas.drawLine( xos - 50 + 50, ArmYPos, xos + 50 + ArmLength, ArmYPos );

canvas.drawLine( xos + 5 + 50, LegYPos, xos + 5 + 50, LegYPos + LegLength );


}

else if (bmiMetric || bmiImperial > 18.4999 && bmiMetric || bmiImperial <= 24.999){

canvas.setColor( "black");









}



Jack Eastwood









}











}

Jack Eastwood

else if (bmiMetric || bmiImperial > 39.999){










}

canvas.setColor("Purple");

canvas.drawString( bmiMetric||bmiImperial + ":" + classification, 0, 150 );

canvas.drawString( "Height " + ":" + heightMetric||heightImperial + metricCM||imperialInches, 120, 100 );

canvas.drawString( "Weight " + ":" + weightMetric||weightImperial + metricKg||imperialStone, 0, 100 );


canvas.setColor ( "Yellow" );

canvas.drawLine( xos, yos + lineHeight2, xos + lineYellow, yos + lineHeight2 );

canvas.setColor( 'Green' );

canvas.drawLine( xosGreen, yos + lineHeight2, xosGreen + lineGreen, yos + lineHeight2 );

canvas.setColor( "Orange" );

canvas.drawLine( xosOrange, yos + lineHeight2, xosOrange + lineOrange, yos

Jack Eastwood

+ lineHeight2 );

canvas.setColor( "Brown" );

canvas.drawLine( xosBrown, yos + lineHeight2, xosBrown + lineBrown, yos + lineHeight2 );

canvas.setColor( "Red" );

canvas.drawLine( xosRed, yos + lineHeight2, xosRed + lineRed, yos + lineHeight2 );

canvas.setStroke( 3 );

canvas.setColor( "Black" );

canvas.drawLine( xos, yos + lineHeight, xos + lineLength, yos + lineHeight);

for( labelnum = 0; labelnum <= 9; labelnum++ )

{

canvas.drawString( label, xos + (labelnum * 60), (yos + lineHeight));

label = label + 5;

}

canvas.paint();

reset = prompt( "Would you like to start over? (Y/N)" );

if ( reset == "y"){

reset = false;

canvas.clear();

}

else {

reset = true;

}

Jack Eastwood

}

Jack Eastwood

Jack Eastwood

Jack Eastwood

Comments

The vast majority of the program is contained within a while loop that is set to false. The user is prompted if they want to use a metric or imperial calculation. This will then go into 2 if statements whether the user has selected metric or imperial conversions, and both statements will prompt the user to type in their height and weight values (kg and cm for metric, inches and pounds for imperial) then both the weight and height variables are calculated against each other to calculate the BMI values for both types then rounded up to 2 decimal places using .toFIxed(2). If statements are then used to classify the BMI from the value calculated by the var BMi metric/Imperial, so if the BMI value is below 18.5 then this would be classified as “Underweight” and the exact bmi will be printed on the canvas along with what classification it falls under. In each if statement are a number of drawRect’s and drawLine’s which draw a figure. This figure will then move to the coloured areas on the line representing what classification the bmi has fallen under by changing the values of each line’s Xos value. Finally, the user is prompted whether they want to run the program again and if the user

Jack Eastwood

types yes (“y”) then reset will remain false and the program is reset by using the canvas.clear function otherwise anything else typed in the prompt will end the program.

Errors: I also encountered some unusual errors, when using metric conversion the height and weight values are correctly displayed, but when I use imperial the height and weight values say “undefined”. The classification after where the Bmi value is displayed only works for imperial conversion and not metric.

5.1 Weather graph// Ex5-1: Weather Data Graph

var canvas;


var xos = 50;

var yos = 100;

var yal = 400;

var xal = 400;

var ylabel = 0;

var ylabelnum = 0;

var xlabel = 0;

var xlabelnum = 0;

var monthwidth = 30;

var month;

var rainfall;

var monthString = ("JFMAMJJUSOND");

canvas.drawLine(xos, yos, xos, yos + yal);

canvas.drawLine(xos, yos + yal, xos + xal, yos + yal);

for(ylabelnum = 0; ylabelnum <= 10; ylabelnum++ )

{

canvas.drawString(ylabel, xos/2, (yos + yal) - ( 40 *

Jack Eastwood

ylabelnum ));

ylabel = ylabel + 50;

}

for(month = 0; month <=11; month++ )

{

rainfall= prompt( "Please enter rainfall." );

parseInt (rainfall, 10);


canvas.fillRect(xos+(monthwidth*month), (yos + yal) - rainfall, monthwidth, rainfall);


canvas.drawRect(xos+(monthwidth*month), (yos + yal) - rainfall, monthwidth, rainfall);

canvas.drawString( monthString.charAt(month), xos+ 10 +(monthwidth*month), (yos + yal));

}

canvas.paint();

Jack Eastwood

// Ex5-1: Weather Data Graph

var canvas;


var xos = 60;

var yos = 100;

var yal = 400;

Jack Eastwood

var xal = 500;

var ylabel = 0;

var ylabelnum = 0;

var xlabel = 0;

var xlabelnum = 0;

var monthwidth = 30;

var month;

var rainfall;

var monthString = ("JFMAMJJUSOND");

canvas.drawLine(xos, yos, xos, yos + yal);

canvas.drawLine(xos, yos, xos + xal, yos);

for(month = 0; month <= 11; month++ )

{

rainfall= prompt( "Please enter rainfall." );

parseInt (rainfall, 10);


canvas.fillRect(xos, yos+(monthwidth*month), rainfall, monthwidth);


canvas.drawString( monthString.charAt(month), xos/2, yos+(monthwidth*month));

}

for(xlabelnum = 0; xlabelnum <=10; xlabelnum++ )

{

canvas.drawString(xlabel, xos + (xlabelnum * 50), yos-15);

xlabel = xlabel + 50;

Jack Eastwood

}

canvas.paint();

//canvas.fillRect(xos+(monthwidth*month), (yos + yal) - rainfall, monthwidth, rainfall);

Comments

The charAt() function selects a single character in a string then prints it on the canvas. For instance charAt(0) selects the 1st character within a string. The variable monthString has all the initials of all the months listed and when plotted on the X axis in the loop, charAt(month) selects each initial in order then plots them one at a time until the loop ends.

Jack Eastwood

5.2 Picture frame revisitedvar canvas = openGraphics();

var xPosition = 100;

var yPosition = 50;

var width = 200;

var height = 150;

var xPos;

var xLeft;

var xRight;

var yPos;

var yTop;

var yBottom;

var line;

var imageName = "Honeysuckle.jpeg";

canvas.setColor ("Gold");

canvas.fillRect (75, 25, 250, 200);

canvas.setColor ("Darkred");

canvas.setStroke (3);

canvas.drawRect (73, 23, 250, 200);


canvas.setColor("Black");

xPos = 326;

yTop = 22;

yBottom = 226;

Jack Eastwood

for( line = 0; line<4; line++){

canvas.drawLine(xPos, yTop, xPos, yBottom);

xPos += 1;

yTop -= 1;

yBottom += 1;

}

xPos = 76;

yTop = 26;

yBottom = 222;

for(line = 0; line<4; line++){


xPos += 1;

yTop += 1;

yBottom -= 1;

}

xLeft = 80;

xRight = 318;

yPos = 29;


canvas.drawLine(xLeft, yPos, xRight, yPos);

xLeft -= 1;

xRight += 1;

yPos -= 1;

}

Jack Eastwood

xLeft = 73;

xRight = 325;

yPos = 226;



xLeft -= 1;

xRight += 1;

yPos += 1;

}

canvas.setColor("Red");

xPos = 322;

yTop = 26;

yBottom = 222;

for(line = 0; line<4; line++){


xPos -= 1;

yTop += 1;

yBottom -= 1;

}

xPos = 72;

yTop = 22;

yBottom = 226;


Jack Eastwood


xPos -= 1;

yTop -= 1;

yBottom += 1;

}

xLeft = 73;

xRight = 325;

yPos = 22;



xLeft -= 1;

xRight += 1;

yPos -= 1;

}

xLeft = 77;

xRight = 321;

yPos = 222;



xLeft += 1;

xRight -= 1;

yPos -= 1;

}

Jack Eastwood

canvas.drawImage( imageName, xPosition, yPosition, width, height );

canvas.paint();

CommentsFor loops are used to print 4 lines on each side of the image, and every time a line gets printed then the X and Y position will change by 1 each time a line is printed that gives the line a triangular shape at the end. The X and Y co-ordinate variables will have to be given different values to be set at a specific place on all 4 sides of the image otherwise the lines will be printed from the previous X and Y values given on the previous loop.

5.3 Interest calculator html<html>

<head>

<title>

Interest Calculator

</title>

</head>

<body>

<h1> Interest Calculator </h1>

Jack Eastwood

<p> This will calculate the interest on any amount of money from the interest rate and investment period. </p>

<form action="server_program_name" method="get" id="money">

<label for="money">

Amount of money:

</label>

<input type="number" name="money"></form>

<form action="server_program_name" method="get" id="interest_rate">

<label for="interest_rate">

Interest rate(%):

</label>

<input type="number" name="money"></form>

<form action="server_program_name" method="get" id="investment_period">

<label for="investment_period">

Investment period (years):

</label>

<input type="number" name="investment_period" min=”0”></form>

<button value="submit" type="submit">

Calculate Interest

</button>

</body>

</html>

Jack Eastwood

5.4 Date validation form<html>

<head>

<title>

Date Validation

</title>

</head>

<body>

<h1> Date validation </h1>

<p> Page to validate the day, month and year</p>

<form id="day" action="server_program_name" method="get">

<label for="day">

Day:

</label>

<input type="number" name="money" min="1"

Jack Eastwood

max="31"></form>

<form id="month" action="server_program_name" method="get">

<label for="month">

Month:

</label>

<input type="number" name="month" min="1" max="12"></form>

<form id="year" action="server_program_name" method="get">

<label for="month">

Year:

</label>

<input type="number" name="year" value="2000" ></form>


Validate date

</button>

</body>

</html>

Jack Eastwood

Comments

Input box’s can be given a minimum value to accept by put min=”value” as an element. A starting value can also be put inside an input by typing value=”value”.

5.5 Bmi calculator html<html>

<head>

<title>

BMI Calculator

</title>

</head>

<body>

<h1> BMI calculator </h1>

<p> Body Mass Index is derived from calculating an individuals weight and height. The calculation to work out an individuals BMI for a metric conversion is weight/height x height. </p>

Jack Eastwood

<p> There are classifications for different bmi values: </p>

<p> 18.5 or under: Underweight </p>

<p> 18.5 - 25: Ideal </p>

<p> 25 - 30: Overweight </p>

<p> 30 - 40: Obese </p>

<p> 40 or over: Very Obese </p>

<form id="weight" action="server_program_name" method="get">

<label for="weight">

Please enter your weight (KG):

</label>

<input type="number" name="weight" min="0"></form>

<form id="height" action="server_program_name" method="get">

<label for="height">

Please enter your height (CM):

</label>

<input type="number" name="height" min="0"></form>


Calculate BMI

</button>

</body>

</html>

Jack Eastwood

6.1 Metric Conversion<html>

<head>

<title>

Metric Conversions

</title>

<script type = "text/JavaScript">

function milesToKilometers()

{

var miles;

miles =

Jack Eastwood

document.getElementById( "milesBox" ).value;

miles = parseFloat( miles );

var kilometers = miles / 5 * 8;

document.getElementById( "kilometersBox" ).value = kilometers.toFixed(2);

}

function KilometersToMiles()

{

var kilometers;

kilometers = document.getElementById( "kilometersBox" ).value;

kilometers = parseFloat( kilometers );

var miles = kilometers / 8 * 5;

document.getElementById( "milesBox" ).value = miles.toFixed(2);

}

</script>

</head>

<body>

<h1>

Metric Conversions

</h1>

<h2>

Miles : Kilometers

</h2>

<p>

The conversion factor for miles and kilometers

is based on the fact that 5 miles is the same

Jack Eastwood

distance as 8 kilometers.

</p>

Miles:

<input type = "text"

id = "milesBox"

value = "" />

<br />

Kilometers:

<input type = "text"

id = "kilometersBox"

value = "" />

<br /><br />

<input type = "button"

id= "convert1"

value = "Miles to Kilometers"

onclick = "milesToKilometers();" />

<br /><br />


id = "convert2"

value = "Kilometers to Miles"

onclick = "KilometersToMiles();" />

</body>

</html>

Jack Eastwood

Comments

The document.getElementById function looks for the value to give to a specific variable from an html object with that specific id name. In this case, the kilometres box id was given to the input box for the user to type how many kilometres. The buttons are linked to the script when they are given an onclick element, so the miles to kilometre button has been given onclick=”milesToKilometers();” that links to the miles to kilometers function in the script. Any scripts declared will have to be declared by stating that it uses text and javascript as its data type.

Jack Eastwood

6.2 Interest Calculator Page<html>

<head>

<title>

Interest Calculator

</title>

<script type = "text/Javascript">

function InterestCalculator()

{

var amount;

amount = document.getElementById( "money").value;

amount = parseFloat( amount );

var rate;

rate = document.getElementById( "Interest_rate" ).value;

rate = parseFloat( rate );

var years;

years = document.getElementById( "Investment_period" ).value;

years = parseFloat( years );

var interest;

interest = (amount * rate * years)/100;

alert( interest );

}

</script>

Jack Eastwood

</head>

<body>

<h1> Interest Calculator </h1>

<p> This will calculate the interest on any amount of money from the interest rate and investment period. </p>

<form action="server_program_name" method="get">

<label for="money">

Amount of money:

</label>

<input type="number"id="money" name="money"></form>


<label for="interest_rate">

Interest rate(%):

</label>

<input type="number" id="Interest_rate" name="money"></form>


<label for="investment_period">

Investment period (years):

</label>

<input type="number" id="Investment_period" name="Investment money" min="0">

<br /><br />


id = "CalculateInterest"

value = "Calculate Interest"

onclick = "InterestCalculator();" />

</form>

</body>

Jack Eastwood

</html>

Jack Eastwood

6.3 Validating a date<html>

<head>

<title>

Date Validation

</title>

<script type = "text/Javascript">

function DateValidation()

{

var day;

Jack Eastwood

day = document.getElementById( "day" ).value;

day = parseFloat( day );

var month;

month = document.getElementById( "month" ).value;

month = parseFloat( month );

var year;

year = document.getElementById( "year" ).value;

year = parseFloat( year );

var today = new Date();

var tDay = today.getDate();

var tMonth = today.getMonth()+1;

var tYear = today.getFullYear();

var birthday;

birthday = new Date( year, month-1, day );

var age;

age = today - birthday;

var ageindays;

ageindays = age/86400000;

var ageinyears;

ageinyears = ageindays/365;

Jack Eastwood

if (day >=1 && day<=31)

{

alert ("Day is valid");

}

else

{

alert ("Day is invalid");

}

if (month >=1 && month <=12)

{

alert("Month is valid");

}

else

{

alert("Month is invalid");

}

if (year >= 0 && year <= 2015)

{

alert("Year is valid");

}

else

{

alert("Year is invalid");

}

Jack Eastwood

document.getElementById( "ageBox" ).value = ageinyears.toFixed(2);

}

</script>

</head>

<body>

<h1> Date validation </h1>

<p> Page to validate the user's birthday</p>


<label for="day">

Day:

</label>

<input type="number" name="money" id="day" min="1"></form>


<label for="month">

Month:

</label>

<input type="number" name="month" id="month" min="1"></form>


<label for="year">

Year:

</label>

<input type="number" name="year" id="year" ></form>


<label for="age">

Age:

Jack Eastwood

</label>

<input type="number" id="ageBox" value=" " ></form>

<br /><br />


id = "ValidateDate"

value = "Validate Date's"

onclick = "DateValidation();" />

</body>

</html>

Jack Eastwood

6.4 BMI calculator html<html>

Jack Eastwood

<head>

<title>

BMI Calculator

</title>

<script type ="text/Javascript">

function BMIcalculation()

{

var height;

height = document.getElementById( "Height" ).value/100;

height = parseFloat( height );

var weight;

weight = document.getElementById( "Weight" ).value;

weight = parseFloat( weight );

var calculation = weight/(height * height);

var bmi = calculation.toFixed(2);

var classification;

if (bmi <= 18.4999){


}

else if (bmi > 18.4999 && bmi <= 24.999){


}

else if (bmi > 24.999 && bmi <= 29.999){


Jack Eastwood

}

else if (bmi > 29.999 && bmi <= 39.999){


}

else if (bmi > 39.999){


}

alert( bmi + classification );

document.getElementById( "BMIbox" ).value = bmi;

}

</script>

</head>

<body>

<h1> BMI calculator </h1>

<p> Body Mass Index is derived from calculating an individuals weight and height. The calculation to work out an individuals BMI for a metric conversion is weight/height x height. </p>

<p> There are classifications for different bmi values: </p>

<p> 18.5 or under: Underweight </p>

<p> 18.5 - 25: Ideal </p>

<p> 25 - 30: Overweight </p>

<p> 30 - 40: Obese </p>

<p> 40 or over: Very Obese </p>


<label for="weight">

Jack Eastwood

Please enter your weight (KG):

</label>

<input id = "Weight" type="number" name="weight" min="0"></form>


<label for="height">

Please enter your height (CM):

</label>

<input id = "Height" type="number" name="height" min="0"></form>

<button value="submit" type="submit" onclick = "BMIcalculation();">

Calculate BMI

</button>

<form action = "server_program_name" method="get">

<label> BMI: </label>

<input id="BMIbox" type="number"></form>

</body>

</html>

Jack Eastwood

Jack Eastwood

Jack Eastwood

Documents

program logbook 2