HDip Data Analytics

User Tools

Site Tools

Trace:
submissions:worksheet:webdev:web_dev_week8
no way to compare when less than two revisions

Differences

This shows you the differences between two versions of the page.


—submissions:worksheet:webdev:web_dev_week8 [2020/06/20 14:39] (current) – created - external edit 127.0.0.1
Line 1: Line 1:
 +~~CLOSETOC~~
 +|<100% 25% - >|
 +^  \\ DATA ANALYTICS REFERENCE DOCUMENT\\ \\   ^^
 +^  Document Title:|Web Development week 8 assignments|
 +^  Document No.:|1552342813|
 +^  Author(s):|Gerhard van der Linde|
 +^  Contributor(s):|  |
  
 +
 +
 +**REVISION HISTORY**
 +|< 100% 10% - - 10% 17% 10% >|
 +^  \\  Revision\\  \\  ^\\ Details of Modification(s)^\\ Reason for modification^  \\ Date  ^  \\ By  ^
 +|  [[:doku.php?id=worksheet:webdev:web_dev_week8&do=revisions|0]]  |Draft release|Web Development week 8 assignments|  2019/03/11 22:20  |  Gerhard van der Linde  |
 +
 +
 +----
 +
 +====== Web Development - Week 8 ======
 +
 +{{:modules:46376:pdf:week_8_excercise.pdf|Worksheet - Using the DOM}}
 +
 +===== Exercise 1 =====
 +<code javascript DOM_manipulation.html>
 +<!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>
 +
 +</code>
 +
 +===== Exercise 2 - Basic Calculator =====
 +
 +Create a web page that has 2 input boxes and a button that adds up the numbers in the boxes.
 +
 +<code javascript 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>
 +
 +</code>
 +
 +===== Exercise 3 - Advanced calculator =====
 +
 +{{ submissions:worksheet:webdev:advance_calculator.png?nolink&400 |}}
 +
 +<code javascript 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>
 +
 +Code provided by Mike.
 +
 +<code javascript 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>
 +</code>
 +
 +===== 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:
 +
 +<code javascript>
 +var num = Math.ceil(Math.random() * 10);
 +</code>
 +
 +<code javascript>
 +<!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>
 +</code>
 +===== Exercise 5 - Guessing Game 1 to 100 =====
 +
 +{{ submissions:worksheet:webdev:guess_100.png?nolink&400 |}}
 +
 +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.
 +
 +<code javascript guess_100.html [enable_line_numbers="true",highlight_lines_extra="33"]>
 +<!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>
 +
 +Code provided by Mike
 +
 +<code javascript 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>
 +</code>
submissions/worksheet/webdev/web_dev_week8.txt · Last modified: 2020/06/20 14:39 by 127.0.0.1