Web Development - Week 8

Exercise 1

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM Manipulate</title>
</head>
<body>
  <button onclick="changeText()">Change text</button>
  <H1 id="myH1">This is JavaScript</H1>
</body>
<script>
 // gets input text when the button is clicked and updates the h1
 function changeText(){
  document.getElementById("myH1").innerHTML = "This is DOM manipulation";
}
</script>
</html>

Exercise 2 - Basic Calculator

Create a web page that has 2 input boxes and a button that adds up the numbers in the boxes.

calculator.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Calculator</title>
</head>
<body>
  <input id="val_1">
  <input id="val_2">
  <button onclick="addVals()">Add</button>
 
</body>
<script>
 // gets input text when the button is clicked and updates the h1
 function addVals(){
  v1=Number(document.getElementById("val_1").value);
  v2=Number(document.getElementById("val_2").value);
  alert(v1+v2);
}
</script>
</html>

Exercise 3 - Advanced calculator

advanced_calc.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Advanced Calculator</title>
</head>
<body>
  <H1>Calculator</H1>
  <p>Number 1: <input id="val_1" value=22>
  <p>Number 2: <input id="val_2" value=7>
  <p>
  <button onclick="procVals(0)">Add</button>
  <button onclick="procVals(1)">Subtract</button>
  <button onclick="procVals(2)">Multiply</button>
  <button onclick="procVals(3)">Devide</button>
  <p id='answer'>Answer</p>
</body>
<script>
	function procVals(ttype){
 
	// gets input text when the button is clicked and updates the h1
	var v1=Number(document.getElementById("val_1").value);
	var v2=Number(document.getElementById("val_2").value);
	//var ans=Number(0);
 
		switch(ttype){
		case 0:
			ans= v1 + " plus " + v2 + " = " + Number(v1+v2);
		break;
		case 1:
			ans= v1 + " minus " + v2 + " = " + Number(v1-v2);
		break;
		case 2:
			ans= v1 + " multiplied by " + v2 + " = " + Number(v1*v2);
		break;
		case 3:
			ans= v1 + " devided by " + v2 + " = " + Number(v1/v2);
		break;
		}
	document.getElementById("answer").innerHTML = "ANSWER: "+ans;
	}
</script>
</html>

Code provided by Mike.

advanced_calc_2.html

<!DOCTYPE html>
	<head>
        <title>Calculator</title>
    </head>
 
    <body>
                <h1>Calculator</h1>
 
				<!-- Inputs for numbers -->
                <h1>Number 1:</h1><input type="text" id="inbox1"><br><br>
                <h1>Number 2:</h1><input type="text" id="inbox2"><br><br>
 
				<!-- Buttons for each operator -->
                <button onclick="addNum()">Add</button>
                <button onclick="subNum()">Subtract</button>
                <button onclick="mulNum()">Multiply</button>
                <button onclick="divNum()">Divide</button><br><br>
 
				<!-- Output for answers -->
				<h2>Answer: </h2><h3 id="answer"></h3>
    </body>
 
    <script>
 
		//Function to add contents of input box 1 and input box 2
        function addNum(){
			//Make a var called num1 equals to the value inside the input box with an id of "inbox1" (on line 10 above)
            var num1 = document.getElementById("inbox1").value;
            //Make a var called num1 equals to the value inside the input box with an id of "inbox2" (on line 11 above)
			var num2 = document.getElementById("inbox2").value;
			//Perform calculation - make sure to convert the 2 variables, num1 and num2 to numbers first
			//otherwise, the result willl concatenate
            var total = Number(num1) + Number(num2);
			//Output the result to the "answer" H3 heading on line 20 above
            document.getElementById("answer").innerHTML = num1 + " plus " + num2 + " = " + total;
        }
 
		//Function to subtract contents of input box 1 and input box 2. Almost identical as first function but subtracts instead
        function subNum(){
            var num1 = document.getElementById("inbox1").value;
            var num2 = document.getElementById("inbox2").value;
            var total = Number(num1) - Number(num2);
            document.getElementById("answer").innerHTML = num1 + " subtract " + num2 + " = " + total;
        }
 
        //Function to multiply contents of input box 1 and input box 2. Almost identical as first function but multiplies instead
		function mulNum(){
            var num1 = document.getElementById("inbox1").value;
            var num2 = document.getElementById("inbox2").value;
            var total = Number(num1) * Number(num2);
            document.getElementById("answer").innerHTML = num1 + " multiplied by " + num2 + " = " + total;
        }
 
		//Function to divide contents of input box 1 and input box 2. Almost identical as first function but divides instead
        function divNum(){
            var num1 = document.getElementById("inbox1").value;
            var num2 = document.getElementById("inbox2").value;
            var total = Number(num1) / Number(num2);
            document.getElementById("answer").innerHTML = num1 + " divided by " + num2 + " = " + total;
        }
 
	</script>
</html>

Exercise 4 - Guessing Game 1 to 10

Write a JavaScript program where the program generates a random number between 1 to 10 . The user is then prompted to input a number. If the number the user input matches with the random number, the program will display a message “Good Guess”, otherwise display a message “Sorry, wrong number”.

How to generate a random number between 1 and 10 in JavaScript:

var num = Math.ceil(Math.random() * 10);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Calculator</title>
</head>
<body onload="runAtStart();">
	<p id="secret"></p>
	<p>Guess the secret: <input id="myGeuss">
	<button onclick="addVals()">Submit</button>
	<p id="resp"></p>
 
</body>
<script>
var secretVal=0;
	function addVals(){
		vGuess=Number(document.getElementById("myGeuss").value);
		if (vGuess==secretVal)
		{
			document.getElementById('resp').innerHTML = "Good Guess";
		}
		else {
			document.getElementById('resp').innerHTML = "Sorry, wrong number.";
		}
 
	}
	function runAtStart(){
		secretVal = Math.ceil(Math.random() * 10);
		//document.getElementById('secret').innerHTML = "secret is set";
	}
 </script>
</html>

Exercise 5 - Guessing Game 1 to 100

Write a JavaScript Guessing Game program where the program chooses a random number between 1 to 100. The user is then prompted to guess the number the program chose. The user has six attempts to guess the right number. After each attempt, if the number is incorrect, the program will display “Guess too high” or “Guess too low” depending on the user input. If the user has not guessed the correct number after 6 attempts, the game ends and the number the program generated is displayed.

guess_100.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Calculator</title>
</head>
<body onload="runAtStart();">
	<p id="secret">secret</p>
	<p id="tries">You have 6 attempts to guess the right value.</p>
	<p>Guess the secret: <input id="myGeuss">
	<button onclick="addVals()">Submit</button>
	<p id="resp"></p>
 
</body>
<script>
var secretVal=0;
var tries=0;
var correct =0;
	function addVals(){
		vGuess=Number(document.getElementById("myGeuss").value);
		tries+=1;
		document.getElementById('tries').innerHTML = "Tries: "+tries+"/6";
		if (vGuess<secretVal)
		{
			document.getElementById('resp').innerHTML = "Guess too low";
		}
		if (vGuess>secretVal){
			document.getElementById('resp').innerHTML = "Guess too high";
		}
		if (vGuess==secretVal)
		{
			document.getElementById('resp').innerHTML = "Guess is correct";
			correct=1;
			runAtStart();
		}
		if (tries>=6 & correct==0)
		{
			document.getElementById('resp').innerHTML = "Game over, answer is: "+secretVal+", try again.";
			runAtStart();
		}
	}
	function runAtStart(){
		secretVal = Math.ceil(Math.random() * 100);
		tries=0;
		correct=0;
		document.getElementById('secret').innerHTML = "Secret value is set between 0 and 100";
		document.getElementById('tries').innerHTML = "You have 6 more attempts to guess the right value.";
		document.getElementById('myGeuss').value = 50;
	}
 </script>
</html>

Code provided by Mike

guess_100_v2.html

<!DOCTYPE html>
<html>
	<!-- 	Week 7 Exercise - Guessing Game
			Module: WEB APPLICATION DEVELOPMENT 
	-->
 
	<head>
		<title>Guessing Game 1 to 100</title>
	</head>
 
	<body>
	</body>
	<script>
 
	/* generation of the random variable number guessNumber
	the method Math.random() generates a number between 0 and 1, excluding 0 and 1
	the method Math.ceil() rounds the number for the upwards nearest integer 
	therefore, the number generated will be between 1 (inclusive) and 100 (inclusive)*/
	var guessNumber = Math.ceil(Math.random() * 100);
 
	//Alert created below for testing purposes, this can be removed later
	alert(guessNumber);
 
 
	//for loop - this loop will run six times, and creates a counter called "i"
	//"i" will increment each time the loop runs
		for (var i = 1; i <= 6; i++){
 
			// prompt the user to enter a number
			var userNumber = Number (prompt("Enter the number to guess"));
 
			// compare the number entered with the one generated
			if (userNumber == guessNumber){
				// If the number entered was correct, the using "break;" will stop the for loop completly and progress to the next block of code after the for loop and proceed to line 50 below
				break;
			} else {// If the number entered was not correct
					//Check if the number the user entered is higher than the guessed number
					if (userNumber > guessNumber){
						//If the number guessed was higher, output message stating it's too high
						//The code calculation (6-i) will calculate how many turns are left
						alert("Sorry, too high, try again. You still have " + (6 - i) + " attempts left");
						} else { //If the number guessed was lower, output guess was too low
						alert("Sorry, too low, try again. You still have " + (6 - i) + " attempts left");
						}
			}
 
		}
 
 
		//Final test after the six attempts are finished, or if the user guessed the correct number before the six attemps were up
		if (userNumber == guessNumber){
			alert("Well done! You guessed the right number!");
		} else {
			alert("Sorry, you didn't guess right this time. The number I was thinking of was " + guessNumber);
		}
 
	</script>
</html>

DATA ANALYTICS REFERENCE DOCUMENT
Document Title:	Web Development week 8 assignments
Document No.:	1552342813
Author(s):	Gerhard van der Linde
Contributor(s):

HDip Data Analytics

Table of Contents