Scribd
Upload
3 views

Javascript Programs

The document contains multiple HTML and JavaScript examples for creating interactive web pages that perform various calculations and functionalities, including profit calculation for newspaper sales, factorial, Fibonacci, sum of two numbers, DOM manipulation, user greeting, background color changing, and a click counter. Each example includes HTML structure, JavaScript functions for the required calculations or actions, and basic CSS for styling. The examples aim to demonstrate fundamental web development concepts and user interaction.

Uploaded by

2508remo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Javascript Programs

The document contains multiple HTML and JavaScript examples for creating interactive web pages that perform various calculations and functionalities, including profit calculation for newspaper sales, factorial, Fibonacci, sum of two numbers, DOM manipulation, user greeting, background color changing, and a click counter. Each example includes HTML structure, JavaScript functions for the required calculations or actions, and basic CSS for styling. The examples aim to demonstrate fundamental web development concepts and user interaction.

Uploaded by

2508remo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

1.

Create an HTML page that includes an input field for the user to enter the number of
copies of a newspaper sold on a Sunday, a button labeled "Calculate Profit," and a
paragraph element to display the calculated profit. Write a JavaScript function named
calculateProfit() that takes the number of copies sold as input, calculates the total
revenue, total cost, and profit based on given values, and returns the calculated profit.
Integrate this function with the HTML page so that when the "Calculate Profit" button is
clicked, the number of copies sold is read from the input field, the calculateProfit()
function is called with the number of copies as input, and the calculated profit is
displayed in the paragraph element.

 Total Revenue:
o Total Revenue = Number of copies sold (w) * Selling
price per copy

 Total Cost:
o Total Cost = (Number of copies sold (w) * Cost price
per copy) + Fixed cost

 Profit:
o Profit = Total Revenue - Total Cost

Given Values:

 Selling price per copy: Rs. 12


 Cost price per copy: Rs. 5

Fixed cost: Rs. 100

<!DOCTYPE html>

<html>

<head>

<title>Newspaper Agency Profit Calculator</title>

</head>

<body>

<h2>Newspaper Agency Profit Calculator</h2>

<label for="copiesSold">Enter number of copies sold:</label>

<input type="number" id="copiesSold" min="0">

<button onclick="calculateProfit()">Calculate Profit</button>


<p id="result"></p>

<script>

function calculateProfit() {

const sellingPrice = 12;

const costPrice = 5;

const fixedCost = 100;

const w = parseInt(document.getElementById("copiesSold").value);

const totalRevenue = w * sellingPrice;

const totalCost = (w * costPrice) + fixedCost;

const profit = totalRevenue - totalCost;

document.getElementById("result").innerHTML = `Profit on Sunday: Rs. ${profit}`;

</script>

</body>

</html>

2. Create an interactive web page for calculating the factorial of a non-negative integer. The page
should include an input field for the user to enter an integer, a "Calculate Factorial" button, and
a paragraph element to display the result. Implement a JavaScript function named
factorial() that calculates the factorial recursively. Integrate this function with the HTML
elements to calculate the factorial when the button is clicked and display the result in the
paragraph element. Finally, enhance the user experience by applying basic CSS styling to center
the content, add appropriate spacing, and style the input field, button, and result paragraph
with suitable colors, fonts, and borders.

</html>

<!DOCTYPE html>

<html>

<head>

<title>Factorial Calculator</title>
<style>

body {

font-family: sans-serif;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background-color: #f0f0f0;

.container {

background-color: #fff;

padding: 20px;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

input[type="number"] {

padding: 10px;

border: 1px solid #ccc;

border-radius: 3px;

margin-right: 10px;

button {

padding: 10px 20px;

background-color: #4CAF50;
color: white;

border: none;

border-radius: 3px;

cursor: pointer;

p{

margin-top: 10px;

font-weight: bold;

</style>

</head>

<body>

<div class="container">

<h2>Factorial Calculator</h2>

<input type="number" id="numberInput" min="0" placeholder="Enter a number">

<button onclick="calculateFactorial()">Calculate</button>

<p id="result"></p>

</div>

<script>

function factorial(n) {

if (n === 0 || n === 1) {

return 1;

} else {

return n * factorial(n - 1);

}
}

function calculateFactorial() {

const number = parseInt(document.getElementById("numberInput").value);

const result = factorial(number);

document.getElementById("result").innerHTML = `The factorial of ${number} is: ${result}`;

</script>

</body>

</html>

3. Create an interactive web page for calculating the fibonacci of a non-negative integer. The page
should include an input field for the user to enter an integer, a "Calculate Fibonacci" button, and
a paragraph element to display the result. Implement a JavaScript function named
fibonacci() that calculates the factorial recursively. Integrate this function with the HTML
elements to calculate the factorial when the button is clicked and display the result in the
paragraph element. Finally, enhance the user experience by applying basic CSS styling to center
the content, add appropriate spacing, and style the input field, button, and result paragraph
with suitable colors, fonts, and borders

<!DOCTYPE html>

<html>

<head>

<title>Fibonacci Calculator</title>

<style>

body {

font-family: sans-serif;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;
background-color: #f0f0f0;

.container {

background-color: #fff;

padding: 20px;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

input[type="number"] {

padding: 10px;

border: 1px solid #ccc;

border-radius: 3px;

margin-right: 10px;

button {

padding: 10px 20px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 3px;

cursor: pointer;

}
p{

margin-top: 10px;

font-weight: bold;

</style>

</head>

<body>

<div class="container">

<h2>Fibonacci Calculator</h2>

<input type="number" id="numberInput" min="0" placeholder="Enter a number">

<button onclick="calculateFibonacci()">Calculate</button>

<p id="result"></p>

</div>

<script>

function fibonacci(n) {

if (n <= 1) {

return n;

} else {

return fibonacci(n - 1) + fibonacci(n - 2);

function calculateFibonacci() {
const number = parseInt(document.getElementById("numberInput").value);

const result = fibonacci(number);

document.getElementById("result").innerHTML = `The Fibonacci of ${number} is: ${result}`;

</script>

</body>

</html>

4. Create an interactive web page that calculates the sum of two numbers. The page should
include two input fields for the user to enter the numbers, a "Calculate Sum" button, and a
paragraph element to display the result. You are provided with a JavaScript function
addTwoNumbers(num1, num2) that takes two numbers as input and returns their sum. Write
JavaScript code to: 1) Retrieve the values entered by the user from the input fields, 2) Call the
addTwoNumbers() function with the entered values, and 3) Display the result returned by the
function in the paragraph element

<!DOCTYPE html>

<html>

<head>

<title>Sum Calculator</title>

</head>

<body>

<h2>Sum Calculator</h2>

<label for="num1">Enter first number:</label>

<input type="number" id="num1"><br><br>

<label for="num2">Enter second number:</label>

<input type="number" id="num2"><br><br>

<button onclick="calculateSum()">Calculate Sum</button>

<p id="result"></p>

<script>
function addTwoNumbers(num1, num2) {

return num1 + num2;

function calculateSum() {

const num1 = parseFloat(document.getElementById("num1").value);

const num2 = parseFloat(document.getElementById("num2").value);

const sum = addTwoNumbers(num1, num2);

document.getElementById("result").innerHTML = "The sum of " + num1 + " and " + num2 + " is: " +
sum;

</script>

</body>

</html>

5. DOM Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>DOM Manipulation Example</title>

</head>

<body>

<ul id="myList">

<li>Item 1</li>

<li>Item 2</li>

</ul>
<button id="addItemButton">Add Item</button>

<script>

document.getElementById('addItemButton').addEventListener('click', function() {

// Create a new list item

let newItem = document.createElement('li');

newItem.textContent = 'New Item';

// Append the new item to the list

document.getElementById('myList').appendChild(newItem);

});

</script>

</body>

</html>

6. Greeting User Example

A webpage that greets the user with their name.

Code:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Greeting Page</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: #4CAF50;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
<p>Enter your name below:</p>
<input type="text" id="userName" placeholder="Your name">
<button onclick="greetUser()">Greet Me</button>
<script>
function greetUser() {
const name = document.getElementById("userName").value;
alert(`Hello, ${name}! Welcome to the webpage.`);
}
</script>
</body>
</html>

7. Background Color Changer

A webpage that changes the background color when you click a button.

Code:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Color Changer</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Background Color Changer</h1>
<p>Click the button to change the background color!</p>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
const colors = ['#FF5733', '#33FF57', '#3357FF', '#F0FF33',
'#FF33A8'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = randomColor;
}
</script>
</body>
</html>

8. Counter Button Example

A simple counter that increases every time you press the button.

Code:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Counter</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: #FF5733;
}
</style>
</head>
<body>
<h1>Click Counter</h1>
<p>Button has been clicked <span id="counter">0</span> times.</p>
<button onclick="incrementCounter()">Click Me</button>
<script>
let count = 0;
function incrementCounter() {
count++;
document.getElementById('counter').textContent = count;
}
</script>
</body>
</html>

You might also like