DATA ANALYTICS REFERENCE DOCUMENT |
|
---|---|
Document Title: | Web Development week 8 assignments |
Document No.: | 1552342813 |
Author(s): | Gerhard van der Linde |
Contributor(s): |
REVISION HISTORY
Revision | Details of Modification(s) | Reason for modification | Date | By |
---|---|---|---|---|
0 | Draft release | Web Development week 8 assignments | 2019/03/11 22:20 | Gerhard van der Linde |
<!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>
Create a web page that has 2 input boxes and a button that adds up the numbers in the boxes.
<!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>
<!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.
<!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>
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>
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.
<!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
<!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>