WebDevelopAssign | PDF | Typefaces | Text
Scribd
Upload
14 views16 pages

WebDevelopAssign

The document contains multiple HTML and JavaScript programs demonstrating various functionalities, including changing background colors, taking user input, implementing a simple calculator, finding the second largest number in an array, and handling events. It also includes instructions for applying internal, inline, and external CSS styles in a webpage. Each section provides code examples and expected outputs for clarity.

Uploaded by

Priyanshu Kunwar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
14 views16 pages

WebDevelopAssign

The document contains multiple HTML and JavaScript programs demonstrating various functionalities, including changing background colors, taking user input, implementing a simple calculator, finding the second largest number in an array, and handling events. It also includes instructions for applying internal, inline, and external CSS styles in a webpage. Each section provides code examples and expected outputs for clarity.

Uploaded by

Priyanshu Kunwar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 16

Assignment 3

1. Write a program to change background color.

<!DOCTYPE html>

<html>

<head>

<title>Change Background Color</title>

<style> body { transition:

background-

color 0.5s ease;

</style>

</head>

<body>

<h1 id="heading">Change Background Color</h1>

<button id="red">Red</button>

<button id="green">Green</button>

<button id="blue">Blue</button>

<button id="random">Random</button>

<script> const heading =

document.getElementById('heading'); constredButton =

document.getElementById('red'); constgreenButton =

document.getElementById('green'); constblueButton =

document.getElementById('blue'); constrandomButton =

document.getElementById('random');

redButton.addEventListener('click', () => { document.body.style.backgroundColor = 'red';

heading.style.color = 'white';

1
});

greenButton.addEventListener('click', () => { document.body.style.backgroundColor

= 'green'; heading.style.color

= 'black';

});

blueButton.addEventListener('click', () => { document.body.style.backgroundColor

= 'blue'; heading.style.color

= 'white';

});

randomButton.addEventListener('click', () => { constrandomColor = getRandomColor();

document.body.style.backgroundColor = randomColor;

heading.style.color = (getLuminance(randomColor) > 0.5) ? 'black' : 'white';

});

function getRandomColor() { const r =

Math.floor(Math.random() * 256); const g =

Math.floor(Math.random() * 256); const b =

Math.floor(Math.random() * 256); return

`rgb(${r}, ${g}, ${b})`;

function getLuminance(color) { const [r, g, b] =

color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/).slice(1).map(Number); return

(0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;

</script>

2
</body>

</html>

Output :-

2. Write a program in JS to take string as input from user and then display the same string.
<!DOCTYPE html>

<html>

<head>
3
<title>String Input and Output</title>

</head>

<body>

<input type="text" id="userInput" placeholder="Enter a string">

<button onclick="displayInput()">Display Input</button>

<p id="output"></p>

<script> function displayInput() { let userInput =

document.getElementById("userInput").value;

document.getElementById("output").innerHTML = "You entered: " + userInput;

</script>

</body>

</html>

Output : -

3. Write a program to implement simple calculator.


<!DOCTYPE html>

<html>

<head>

<title>Simple Calculator</title>

<style>

body { font-family:

Arial, sans-serif;

}
4
#calculator { width: 200px; margin:
20px;

50px auto; padding: border: 1px-radius:


rgba(0, 0,
solid #ccc; border

10px; box-shadow: 0 0 10px


0, 0.1);
}

#display {

width: 100%;

height: 40px;

margin-bottom: 20px; padding:

10px;

border: none; border-

radius: 10px; font-

size: 24px; text-align:

right;
}
.button {

width: 40px;

height: 40px;

margin: 5px;

padding: 10px;

border: none;

border-radius:

10px; font-
size: 18px;
cursor: pointer;
}
.button:hover {
background-color: #ccc;
}
</head>

<body>

<div id="calculator">

<input type="text" id="display" disabled>

<div>

<button class="button" onclick="press('7')">7</button> <button

class="button" onclick="press('8')">8</button> <button

class="button" onclick="press('9')">9</button>

</div>

<div>

<button class="button" onclick="press('4')">4</button> <button

class="button" onclick="press('5')">5</button> <button

class="button" onclick="press('6')">6</button>

</div>

<div>

<button class="button" onclick="press('1')">1</button>

<button class="button" onclick="press('2')">2</button> <button class="button"


onclick="press('3')">3</button>

</div>

<div>

<button class="button" onclick="press('.')">.</button>

<button class="button" onclick="press('-')">-</button>

<button class="button" onclick="press('0')">0</button> <button

class="button" onclick="press('+')">+</button> <button

class="button" onclick="press('*')">*</button> <button

class="button" onclick="press('=')">=</button>

</div>

<button class="button" onclick="clearDisplay()">C</button>


</div> <script> let display = let

document.getElementById('display'); {

currentValue = ''; function press(value)


if (value === '=') {
try { display.value
currentValue = eval(currentValue);
= currentValue;
} catch (e) {
display.value = 'Error';
}
} else {
currentValue += value; display.value
= currentValue;
}
}

function clearDisplay() {

currentValue = ''; display.value

= '';
}
</script>
</body>
</html>

Output :-
4. Write a JavaScript function called “Second Largest” that accepts an array of integers as
parameter and displays the second largest element in the array. Test the function with different
inputs. Embed the JavaScript function within the HTML document.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Second Largest Number Finder</title>

<script>
// JavaScript function to find the second largest element in an array function

secondLargest() {

// Get the input value from the text box const input =

document.getElementById("inputArray").value;

// Convert the input string into an array of integers

let arr = input.split(',').map(num =>parseInt(num.trim()));

// Check if the array has enough elements to find the second largest

if (arr.length< 2) {

document.getElementById("result").innerHTML = "Array should have at least two elements."; return;

let firstLargest = -Infinity; let

secondLargest = -Infinity;

// Loop through the array to find the first and second largest for

(let i = 0; i<arr.length; i++) { if (arr[i] >firstLargest) {

secondLargest = firstLargest; firstLargest

= arr[i];
} else if (arr[i] >secondLargest&&arr[i] !== firstLargest) { secondLargest

= arr[i];

// If the second largest element is still -Infinity, there's no distinct second largest if (secondLargest

=== -Infinity) { document.getElementById("result").innerHTML = "There

is no second largest element.";

} else {

document.getElementById("result").innerHTML = `The second largest element is: ${secondLargest}`;

</script>

</head>
<body>

<h1>Find the Second Largest Number in an Array</h1>

<!-- Input for array of integers -->

<label for="inputArray">Enter numbers (comma separated):</label><br>

<input type="text" id="inputArray" placeholder="Example: 1, 5, 3, 9"><br><br>

<!-- Button to trigger the function -->

<button onclick="secondLargest()">Find Second Largest</button>

<!-- Result will be displayed here -->

<div id="result" style="margin-top: 20px; font-weight: bold;"></div>

</body>

</html>

Output : -

5. Develop a web page and demonstrate event handling mechanisms- with the click button a
message is displayed. Use JS function for handling the events.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Example</title>
<script> function
displayMessage() { alert("Hello! You
clicked the button.");
}
</script>
</head>
<body>
<h2>Event Handling Example</h2>
<p>Click the button below to see the message:</p>
<button onclick="displayMessage()">Click Me!</button>
</body>
</html>

Output :-

6. OBJECTIVE: Understand and demonstrate the differences and applications of


internal, inline, and external CSS by creating a simple webpage that utilizes all
three methods of applying styles.

1. Create the HTML File o Create an HTML file named index.html. o


Write the basic structure of an HTML document.
o Include the following elements in your HTML:
 A header (<h1>).
 A paragraph (<p>).
 A button (<button>).
 A div container (<div>).
 An unordered list (<ul>).
2. Apply Inline CSS o Use inline CSS to style the header
(<h1>). For example:
 Change the font size.
 Add a text color.
 Add a background color.

3. Apply Internal CSS o Add an internal <style> block in the <head>


section of the HTML file.
o Use the internal CSS to style the following:
 Paragraph: Change its font family and text alignment.
 Button: Add padding, border-radius, and hover effects.

4. Create an External CSS File o Create a new file named


styles.css.
o Link this file to your index.html using the <link> tag.
o Use external CSS to style the following:
 Div container: Add a border, background image, and padding.
 Unordered list: Change bullet style, add margins, and style list items.

5. Enhance the Page Design o Experiment with different CSS


properties like margin, padding, border, fontfamily, and
box-shadow.
Use pseudo-classes (e.g., :hover) for interactive styling.
o
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styling Demonstration</title>
<!-- Link to external CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Internal CSS -->
<style>
/* Paragraph styling */
p{
font-family: Arial, sans-serif;
text-align: justify;
}

/* Button styling */
button { padding: 10px 20px;

border-radius: 5px;

background-color: #007BFF;

color: white; border:


none;
cursor: pointer;
}

button:hover { background-
color: #0056b3;
}
</style>
</head>
<body>
<!-- Inline CSS for the header -->
<h1 style="font-size: 2.5rem; color: white; background-color: #333; padding: 10px; text-align:
center;">
CSS Styling Example
</h1>
<!-- Paragraph --> <p>
This is a paragraph styled using internal CSS to demonstrate text alignment and font family.

</p>

<!-- Button -->


<button>Click Me!</button>

<!--Div container -->


<div>
<h2>Styled Div Section</h2>
<p>This section demonstrates external CSS applied to the div container.</p> </div>

<!-- Unordered list -->


<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>
</html>
#styles.css
/* Styling for the div container */
div {
border: 3px solid #333; /* Add a border */
padding: 20px; /* Add padding inside the div */

background-image: url("https://img.freepik.com/free-photo/anime-moon-
landscape_232151645903.jpg?t=st=1733473626~exp=1733477226~hmac=ed813a34369df5d0a
c
8bb2074398 c4b2abf6ed72fb06ce51df90405f96f7f994&w=996"); /* Add a background image

*/ background-size: cover; /* Ensure the background covers the div */ color: white; box-

shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */ width: 50%; /* Set the width to

80% of the viewport or container */ height: 340px; /* Set the height of the div */ margin:

0 auto; /* Center the div horizontally */ text-align: center; /* Center-align text inside the div

*/

}
/* Styling for the unordered list */
ul {
list-style-type: square; /* Change bullet style to square */ margin:
20px 0; /* Add vertical spacing */ padding-left:
20px; /* Add indentation */
} ul li
{

margin: 5px 0; /* Add spacing between items */ font-family: 'Courier

New', Courier, monospace; /* Use a monospaced font */ color: #333; /* Add a

custom text color */ font-size: 1rem; /* Adjust font size */

}
Output : -

You might also like