Scribd
Upload
31 views

File 5

Uploaded by

mecew10721
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
31 views

File 5

Uploaded by

mecew10721
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Question : Explore event driven coding using JS

Write event-driven programs in JavaScript for the following:

• Enter a number and on click of a button print its multiplication table.

• Print the largest of three numbers entered by the user.

• Find the factorial of a number entered by the user.

Enter a list of positive numbers using the prompt terminated by a zero. Find the
sum and average of these numbers.

Ans. 1. Enter a number and on click of a button, print its multiplication table.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplication Table</title>
</head>
<body>

<h2>Multiplication Table</h2>
<input type="number" id="numberInput" placeholder="Enter a number">
<button onclick="generateTable()">Generate Table</button>
<div id="tableOutput"></div>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

function generateTable() {
const number = document.getElementById("numberInput").value;
const outputDiv = document.getElementById("tableOutput");

if (number) {
let table = "<h3>Multiplication Table for " + number + ":</h3><ul>";
for (let i = 1; i <= 10; i++) {
table += "<li>" + number + " x " + i + " = " + (number * i) + "</li>";
}
table += "</ul>";
outputDiv.innerHTML = table;
} else {
outputDiv.innerHTML = "<p>Please enter a valid number.</p>";
}
}

Explanation:

HTML: The user inputs a number, and when the button is clicked, the multiplication
table is generated and displayed in the <div> with the ID tableOutput.

JavaScript: The generateTable function fetches the input value and generates the
multiplication table up to 10 times, displaying it on the page.

---

2. Print the largest of three numbers entered by the user.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Largest Number</title>
</head>
<body>

<h2>Find the Largest Number</h2>


<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<input type="number" id="num3" placeholder="Enter third number">
<button onclick="findLargest()">Find Largest</button>
<div id="largestOutput"></div>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

function findLargest() {
const num1 = document.getElementById("num1").value;
const num2 = document.getElementById("num2").value;
const num3 = document.getElementById("num3").value;
const largestOutput = document.getElementById("largestOutput");

if (num1 && num2 && num3) {


const largest = Math.max(num1, num2, num3);
largestOutput.innerHTML = "<h3>The largest number is: " + largest + "</h3>";
} else {
largestOutput.innerHTML = "<p>Please enter all three numbers.</p>";
}
}

Explanation:

HTML: There are three input fields for the user to enter the numbers. A button
triggers the findLargest function.

JavaScript: The findLargest function uses Math.max() to determine the largest of


the three entered numbers and displays the result.

---

3. Find the factorial of a number entered by the user.


HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Factorial Calculator</title>
</head>
<body>

<h2>Factorial Calculator</h2>
<input type="number" id="factorialInput" placeholder="Enter a number">
<button onclick="calculateFactorial()">Calculate Factorial</button>
<div id="factorialOutput"></div>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

function calculateFactorial() {
const num = document.getElementById("factorialInput").value;
const factorialOutput = document.getElementById("factorialOutput");

if (num && num >= 0) {


let factorial = 1;
for (let i = 1; i <= num; i++) {
factorial *= i;
}
factorialOutput.innerHTML = "<h3>Factorial of " + num + " is: " + factorial +
"</h3>";
} else {
factorialOutput.innerHTML = "<p>Please enter a valid non-negative number.</p>";
}
}

Explanation:

HTML: The user enters a number, and when they click the button, the factorial of
that number is calculated and displayed in the output <div>.

JavaScript: The calculateFactorial function computes the factorial of the entered


number using a loop and displays the result.

---

4. Enter a list of positive numbers using the prompt terminated by a zero. Find the
sum and average of these numbers.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum and Average Calculator</title>
</head>
<body>

<h2>Sum and Average of Numbers</h2>


<button onclick="calculateSumAndAverage()">Enter Numbers</button>
<div id="sumAvgOutput"></div>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

function calculateSumAndAverage() {
let sum = 0;
let count = 0;
let number;

while (true) {
number = prompt("Enter a positive number (enter 0 to stop):");

number = parseFloat(number);
if (number === 0) {
break;
} else if (number > 0) {
sum += number;
count++;
} else {
alert("Please enter a valid positive number.");
}
}

if (count > 0) {
const average = sum / count;
document.getElementById("sumAvgOutput").innerHTML =
<h3>Sum: ${sum}</h3><h3>Average: ${average}</h3>;
} else {
document.getElementById("sumAvgOutput").innerHTML = "<p>No valid numbers
entered.</p>";
}
}

Explanation:

HTML: The user clicks the button to enter a series of numbers using the prompt. The
process stops when the user enters 0.

JavaScript: The calculateSumAndAverage function collects numbers in a loop. It


calculates the sum and average of the numbers entered and displays the result in
the <div> with id="sumAvgOutput". The loop terminates when the user enters 0.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy