Scribd
Upload
26 views23 pages

WT Insem 2024 Answer

The document provides a comprehensive guide on HTML and CSS, including examples of forms, tables, CSS selectors, and desirable website features. It discusses HTML5's new features such as semantic elements, audio/video support, and local storage. Additionally, it outlines different types of CSS and their applications in web development.

Uploaded by

soesh65
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views23 pages

WT Insem 2024 Answer

The document provides a comprehensive guide on HTML and CSS, including examples of forms, tables, CSS selectors, and desirable website features. It discusses HTML5's new features such as semantic elements, audio/video support, and local storage. Additionally, it outlines different types of CSS and their applications in web development.

Uploaded by

soesh65
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

SPPU_TE_BE_COMP 👈 Click to join telegram

Q1.a.) write a html code to display form with textfields, checkboxes,


radio buttons, password field and submit button.

Ans.
Here's a simple HTML code to display a form with text fields, checkboxes, radio buttons, a password field,
and a submit button:

This code creates a form with the following fields:

1. Full Name (text field)


2. Email (text field)
3. Password (password field)
4. Age (text field)
5. Gender (radio buttons for male/female)
6. Interests (checkboxes for sports/music/movies)
7. Comments (textarea)
8. Submit button

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Form Example</title>

</head>

<body>

<h2>Sample Form</h2>

<form action="#" method="post">

<label for="fullname">Full Name:</label><br>

<input type="text" id="fullname" name="fullname"><br><br>

<label for="email">Email:</label><br>

<input type="text" id="email" name="email"><br><br>


Study material provided by: Vishwajeet Londhe

Join Community by clicking below links

Telegram Channel

https://t.me/SPPU_TE_BE_COMP
(for all engineering Resources)

WhatsApp Channel
(for all tech updates)

https://whatsapp.com/channel/
0029ValjFriICVfpcV9HFc3b

Insta Page
(for all engg & tech updates)

https://www.instagram.com/
sppu_engineering_update
SPPU_TE_BE_COMP 👈 Click to join telegram
<label for="password">Password:</label><br>

<input type="password" id="password" name="password"><br><br>

<label for="age">Age:</label><br>

<input type="text" id="age" name="age"><br><br>

<label for="gender">Gender:</label><br>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br><br>

<label for="interests">Interests:</label><br>

<input type="checkbox" id="sports" name="interests" value="sports">

<label for="sports">Sports</label><br>

<input type="checkbox" id="music" name="interests" value="music">

<label for="music">Music</label><br>

<input type="checkbox" id="movies" name="interests" value="movies">

<label for="movies">Movies</label><br><br>

<label for="comments">Comments:</label><br>

<textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>
SPPU_TE_BE_COMP 👈 Click to join telegram

Q1.b) Write and explain table tags in HTML with suitable


example.(Any five).

Ans.(1)
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>HTML Table Example</title>

<style>

table {

width: 100%;

border-collapse: collapse;

th, td {

border: 1px solid black;

padding: 8px;

text-align: left;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<h2>Student Information</h2>

<table>
SPPU_TE_BE_COMP 👈 Click to join telegram
<tr>

<th>ID</th>

<th>Name</th>

<th>Age</th>

<th>Grade</th>

</tr>

<tr>

<td>101</td>

<td>John Doe</td>

<td>20</td>

<td>A</td>

</tr>

<tr>

<td>102</td>

<td>Jane Smith</td>

<td>19</td>

<td>B</td>

</tr>

<tr>

<td>103</td>

<td>Emily Johnson</td>

<td>21</td>

<td>A</td>

</tr>

</table>

</body>

</html>

Explanation:
SPPU_TE_BE_COMP 👈 Click to join telegram
• <table>: Defines the start of the table.
• <tr>: Defines a table row.
• <th>: Defines a table header cell. It's used to represent column headings.
• <td>: Defines a table data cell. It's used to represent regular data.
• border-collapse: collapse;: This CSS property collapses the borders of adjacent table
cells into a single border, making the table look cleaner.
• <style>: This section contains CSS rules to style the table, including setting border properties,
padding, and background color for header cells.
• The content within the <table> tags represents a simple table with student information,
including ID, name, age, and grade.

This example demonstrates a basic HTML table structure with student information. Each row contains
data for a single student, and each column represents a specific attribute such as ID, name, age, and
grade. The table is styled using CSS to improve readability and visual appeal.

Ans.(2)
HTML <table> tags are used to create tabular data structures on a webpage. Here's an explanation of
the basic table tags with suitable examples:

1. <table>: This tag defines a table.

<table border="1">

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

Explanation: This creates a simple table with a border, containing two rows and two columns.

2. <tr>: This tag defines a row in the table.

Example:

<table border="1">

<tr>
SPPU_TE_BE_COMP 👈 Click to join telegram
<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

Explanation: <tr> is used to define each row of the table.

3. <td>: This tag defines a cell in the table.

Example:

<table border="1">

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

Explanation: <td> is used to define each cell within a row. In this example, each <td> represents a cell
with its content.

4. <th>: This tag defines a header cell in the table.

Example:

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>
SPPU_TE_BE_COMP 👈 Click to join telegram
</tr>

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

</table>

Explanation: <th> is used to define header cells in the table. By default, text in <th> elements is bold
and centered. In this example, the first row contains header cells.

5. <caption>: This tag defines a caption for the table.

Example:

<table border="1">

<caption>Monthly Expenses</caption>

<tr>

<th>Category</th>

<th>Amount</th>

</tr>

<tr>

<td>Food</td>

<td>$200</td>

</tr>

<tr>

<td>Utilities</td>

<td>$100</td>

</tr>

</table>

Explanation: <caption> is used to add a title or caption to the table. In this example, the caption
"Monthly Expenses" is added above the table.

Q1.c) State and explain CSS selectors with suitable example.


Ans.
SPPU_TE_BE_COMP 👈 Click to join telegram
CSS selectors are patterns used to select and style elements in HTML documents. They allow you to
target specific elements based on their attributes, IDs, classes, and hierarchical relationships. Here are
some common CSS selectors with explanations and examples:

1. Element Selector (element): Selects all elements of a specific type.

Example:

p{

color: blue;

Explanation: This selector targets all <p> elements and sets their text color to blue.

2. ID Selector (#id): Selects an element with a specific ID attribute.

Example:

#header {

background-color: gray;

Explanation: This selector targets the element with the ID "header" and sets its background color to
gray.

3. Class Selector (.class): Selects elements with a specific class attribute.

Example:

.highlight {

font-weight: bold;

Explanation: This selector targets all elements with the class "highlight" and sets their font weight to
bold.

4. Descendant Selector (ancestor descendant): Selects an element that is a descendant of


another specified element.

Example:

ul li {

list-style-type: circle;

}
SPPU_TE_BE_COMP 👈 Click to join telegram
Explanation: This selector targets all <li> elements that are descendants of <ul> elements and sets
their list style type to circle.

5. Adjacent Sibling Selector (element1 + element2): Selects an element that is directly


adjacent to another specified element.

Example:

h2 + p {

margin-top: 0;

Explanation: This selector targets all <p> elements that are directly adjacent to <h2> elements and
removes the top margin.

6. Attribute Selector ([attribute], [attribute=value], [attribute~=value]): Selects


elements based on their attributes.

Example:

input[type="text"] {

border: 1px solid black;

Explanation: This selector targets all <input> elements with a type attribute equal to "text" and sets
their border to 1px solid black.

These are just a few examples of CSS selectors. There are many more selectors available, each with its
own specific purpose and use cases.

Q2.a) what are desirable features for good website?


Ans.
A good website should possess several desirable features to ensure a positive user experience and
achieve its intended goals. Here are some key features:

1. Responsive Design: The website should be accessible and functional across various devices
and screen sizes, including desktops, laptops, tablets, and smartphones.
2. Intuitive Navigation: Users should be able to easily find the information they need. Clear
navigation menus, logical page hierarchies, and intuitive links contribute to a seamless
browsing experience.
3. Fast Loading Speed: Pages should load quickly to prevent users from becoming frustrated and
abandoning the site. Optimizing images, minimizing HTTP requests, and leveraging caching
techniques can help improve loading times.
SPPU_TE_BE_COMP 👈 Click to join telegram
4. Engaging Visuals: High-quality images, videos, and graphics enhance the aesthetic appeal of
the website and help capture users' attention. Visual elements should complement the content
and contribute to the overall user experience.
5. Compelling Content: Relevant, informative, and engaging content keeps users interested and
encourages them to explore the site further. Content should be well-written, easy to understand,
and tailored to the target audience.
6. Clear Call-to-Action (CTA): Each page should include clear and prominent CTAs that guide
users towards their intended actions, whether it's making a purchase, signing up for a
newsletter, or contacting the company.
7. Mobile Optimization: With the increasing use of mobile devices, it's crucial to optimize the
website for mobile users. This includes implementing responsive design, optimizing touch
elements, and ensuring fast loading times on mobile devices.
8. Accessibility: The website should be accessible to users with disabilities, including those with
visual, auditory, motor, or cognitive impairments. Following web accessibility guidelines (e.g.,
WCAG) ensures that all users can access and interact with the content.
9. Security: Users need to trust that their personal information is safe when interacting with the
website. Implementing SSL encryption, using secure payment gateways, and regularly
updating software help protect against security threats and instill confidence in users.
10. SEO Optimization: Optimizing the website for search engines improves its visibility and
organic traffic. This includes using relevant keywords, optimizing meta tags, creating quality
backlinks, and regularly updating content.
11. Social Media Integration: Integrating social media sharing buttons and feeds allows users to
easily share content with their networks and increases brand visibility. It also provides
opportunities for user engagement and community building.
12. Analytics and Tracking: Implementing analytics tools like Google Analytics allows website
owners to track user behavior, monitor site performance, and make data-driven decisions to
improve the user experience and achieve business objectives.

By incorporating these desirable features, a website can effectively attract, engage, and retain visitors,
ultimately leading to greater success and satisfaction for both users and website owners.

Q2. B) what are the new features introduced in HTML 5?


Ans. HTML5 introduced several new features and improvements over its predecessors. Some of the
key new features introduced in HTML5 include:

1. Semantic Elements: HTML5 introduced semantic elements like <header>, <footer>, <nav>,
<article>, <section>, and <aside>. These elements provide a more meaningful structure to
web pages, making it easier for search engines and assistive technologies to understand and
interpret the content.
2. Audio and Video Support: HTML5 introduced native support for embedding audio and video
content directly into web pages using the <audio> and <video> elements. This eliminates the
need for third-party plugins like Flash and provides better compatibility across different
devices and browsers.
3. Canvas Element: The <canvas> element allows for dynamic, scriptable rendering of graphics,
animations, and interactive visualizations directly within the browser. It provides a powerful
tool for creating games, data visualizations, and other rich multimedia experiences.
SPPU_TE_BE_COMP 👈 Click to join telegram
4. Local Storage: HTML5 introduced the localStorage and sessionStorage APIs, which
allow web developers to store data locally on the user's device. This enables web applications
to persist user preferences, settings, and other data without relying on server-side storage.
5. Geolocation API: HTML5 introduced the Geolocation API, which allows web applications to
access the user's geographic location information through the browser. This enables location-
aware features like mapping, local search, and personalized content delivery.
6. Form Improvements: HTML5 introduced several enhancements to web forms, including new
input types (<input type="date">, <input type="email">, <input type="url">, etc.),
attributes (e.g., required, pattern), and form validation features. These improvements make
it easier to create user-friendly and accessible web forms.
7. Web Workers: HTML5 introduced the Web Workers API, which allows web applications to
run scripts in the background, separate from the main browser thread. This enables multi-
threaded processing, improving performance and responsiveness for computationally intensive
tasks.
8. Web Storage: HTML5 introduced the localStorage and sessionStorage APIs for storing
data locally on the user's device. Unlike cookies, which are sent to the server with every
request, web storage allows for larger amounts of data to be stored locally and accessed
quickly by web applications.
9. Drag and Drop: HTML5 introduced native support for drag and drop functionality, allowing
users to drag elements and drop them onto designated targets within the web page. This
provides a more intuitive and interactive user experience for tasks like file uploads, sorting,
and rearranging content.
10. Responsive Images: HTML5 introduced the <picture> and <source> elements, along with
the srcset and sizes attributes, which allow web developers to specify multiple image
sources and sizes based on device characteristics like screen resolution and viewport size. This
enables better image optimization and responsive design.

These are just a few of the many new features and improvements introduced in HTML5, which
collectively contribute to a more powerful, versatile, and user-friendly web development platform.

Q2. c) What are different types of CSS? Explain with


example.
Ans.
CSS (Cascading Style Sheets) can be categorized into different types based on their usage,
methodology, and features. Some common types of CSS include:

1. Inline CSS: Inline CSS is applied directly to individual HTML elements using the style
attribute. This type of CSS overrides any external or internal stylesheets.

Example:

<p style="color: red; font-size: 16px;">This is a paragraph with inline CSS</p>

2. Internal CSS: Internal CSS is defined within the <style> element in the <head> section of an
HTML document. It applies styles to the entire document or specific elements.
SPPU_TE_BE_COMP 👈 Click to join telegram
Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Internal CSS Example</title>

<style>

p{

color: blue;

font-size: 14px;

</style>

</head>

<body>

<p>This is a paragraph with internal CSS</p>

</body>

</html>

3. External CSS: External CSS is defined in a separate .css file and linked to HTML documents
using the <link> element. It allows for the separation of content and presentation, making
styles reusable across multiple pages.

Example (styles.css):

/* styles.css */

p{

color: green;

font-size: 18px;

HTML:

<!DOCTYPE html>

<html lang="en">

<head>
SPPU_TE_BE_COMP 👈 Click to join telegram
<meta charset="UTF-8">

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

<title>External CSS Example</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<p>This is a paragraph with external CSS</p>

</body>

</html>

4. CSS Frameworks: CSS frameworks like Bootstrap, Foundation, and Bulma provide pre-
defined styles and components to facilitate rapid web development. They offer responsive
layouts, typography, forms, buttons, and other UI elements.

Example using Bootstrap:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Bootstrap Example</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<p class="text-primary">This is a paragraph styled with Bootstrap</p>

<button class="btn btn-primary">Button</button>

</div>

</body>

</html>

5. CSS Preprocessors: CSS preprocessors like Sass, LESS, and Stylus extend the capabilities of
CSS by introducing features like variables, mixins, nesting, and functions. They help
streamline CSS development and maintainability.
SPPU_TE_BE_COMP 👈 Click to join telegram
Example using Sass:

/* styles.scss */

$primary-color: blue;

p{

color: $primary-color;

font-size: 16px;

After compilation, it generates CSS:

/* styles.css */

p{

color: blue;

font-size: 16px;

These are some of the common types of CSS, each with its own advantages and use cases. Depending
on the project requirements and preferences, developers can choose the appropriate type of CSS to style
their web pages effectively.

Q3.a) explain operators, functions and arrays in javascript with


suitable examples.
Ans.
1. Operators in JavaScript:

Operators in JavaScript are symbols used to perform operations on variables and values. Here are
some common types of operators:

• Arithmetic Operators: Used to perform arithmetic operations like addition, subtraction,


multiplication, division, etc.

Example:

let a = 5;

let b = 3;

let sum = a + b; // Addition


SPPU_TE_BE_COMP 👈 Click to join telegram
let difference = a - b; // Subtraction

let product = a * b; // Multiplication

let quotient = a / b; // Division

let remainder = a % b; // Modulus

Comparison Operators: Used to compare values and return a Boolean result.

Example:

let x = 10;

let y = 5;

console.log(x > y); // true

console.log(x === y); // false

console.log(x !== y); // true

Logical Operators: Used to perform logical operations like AND (&&), OR (||), and NOT (!).

Example:

let a = true;

let b = false;

console.log(a && b); // false

console.log(a || b); // true

console.log(!a); // false

Assignment Operators: Used to assign values to variables.

Example:

let x = 10;

x += 5; // Equivalent to: x = x + 5

console.log(x); // 15

Unary Operators: Operates on a single operand.

Example:

let x = 5;

console.log(++x); // Pre-increment: 6

console.log(x--); // Post-decrement: 6 (x becomes 5 after this line)


SPPU_TE_BE_COMP 👈 Click to join telegram
2. Functions in JavaScript:

Functions in JavaScript are reusable blocks of code that perform a specific task. They can accept
inputs (parameters) and return outputs.

Example:

// Function declaration

function greet(name) {

return "Hello, " + name + "!";

// Function call

let message = greet("John");

console.log(message); // Hello, John!

Functions can also be assigned to variables (function expressions) or created using arrow function
syntax in ES6:

Example (Function Expression):

let multiply = function(a, b) {

return a * b;

};

console.log(multiply(3, 4)); // 12

Example (Arrow Function):

let square = (x) => {

return x * x;

};

console.log(square(5)); // 25

3. Arrays in JavaScript:

Arrays in JavaScript are used to store multiple values in a single variable. They can hold values of
different data types.
SPPU_TE_BE_COMP 👈 Click to join telegram
Example:

let fruits = ["Apple", "Banana", "Orange", "Mango"];

console.log(fruits[0]); // Apple

console.log(fruits.length); // 4

fruits.push("Grapes"); // Add an element to the end of the array

console.log(fruits); // ["Apple", "Banana", "Orange", "Mango", "Grapes"]

fruits.pop(); // Remove the last element from the array

console.log(fruits); // ["Apple", "Banana", "Orange", "Mango"]

fruits[1] = "Kiwi"; // Modify the value of a specific element

console.log(fruits); // ["Apple", "Kiwi", "Orange", "Mango"]

Arrays also have various built-in methods for manipulation, iteration, and transformation, such as
push(), pop(), shift(), unshift(), slice(), splice(), forEach(), map(), filter(), etc.

Q3. b) write html + javascript program code which makes use


of Document Object Model.
Ans.
here's an example HTML and JavaScript program that demonstrates the use of the Document Object
Model (DOM). In this example, we'll create a simple web page with a button that changes the text of a
paragraph when clicked.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>DOM Example</title>

</head>

<body>
SPPU_TE_BE_COMP 👈 Click to join telegram
<p id="demo">Click the button to change this text.</p>

<button onclick="changeText()">Click Me</button>

<script>

function changeText() {

// Access the paragraph element using its ID

var paragraph = document.getElementById("demo");

// Change the text content of the paragraph

paragraph.textContent = "Text changed using DOM!";

</script>

</body>

</html>

Explanation:

• The HTML document contains a paragraph (<p>) element with the ID "demo" and a button
(<button>) element with an onclick attribute set to call the changeText() function.
• Inside the <script> tag, we define the changeText() function.
• When the button is clicked, the changeText() function is executed.
• Inside the function, we use document.getElementById("demo") to select the paragraph
element with the ID "demo".
• We then use the textContent property to change the text content of the paragraph to "Text
changed using DOM!".

This example demonstrates how JavaScript interacts with the DOM to dynamically change the content
of a web page based on user actions. The DOM allows JavaScript to access and manipulate HTML
elements, making it possible to create dynamic and interactive web pages.

Q4. a) explain alert , confimation and prompt box in javascript. also


write html +javascript code to take one number as input from user
and show its factorial on alert box.
Ans.
SPPU_TE_BE_COMP 👈 Click to join telegram
In JavaScript, alert, confirm, and prompt are three types of dialog boxes commonly used to interact
with users.

1. Alert Box (alert()):


o The alert() method displays an alert dialog box with a specified message and an OK
button.
o It's commonly used to display information or notify users about something.

Example:

alert("This is an alert message!");

2. Confirmation Box (confirm()):

• The confirm() method displays a confirmation dialog box with a specified message, an OK
button, and a Cancel button.
• It's commonly used to ask users for confirmation before proceeding with an action.

Example:

let result = confirm("Are you sure you want to delete this item?");
if (result) {
// Delete the item
} else {
// Cancel deletion
}

Prompt Box (prompt()):

• The prompt() method displays a dialog box with a message, an input field for the user to enter
data, and OK/Cancel buttons.
• It's commonly used to prompt users for input.

Example:

let name = prompt("Please enter your name:", "John Doe");

if (name != null) {

alert("Hello, " + name + "!");

Now, let's write an HTML + JavaScript code to take a number as input from the user and display its
factorial using an alert box:

<!DOCTYPE html>

<html lang="en">

<head>
SPPU_TE_BE_COMP 👈 Click to join telegram
<meta charset="UTF-8">

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

<title>Factorial Calculator</title>

</head>

<body>

<script>

function calculateFactorial() {

// Prompt the user to enter a number

let number = prompt("Please enter a number:", "5");

// Convert the input to a number

number = parseInt(number);

// Validate if the input is a positive integer

if (isNaN(number) || number < 0) {

alert("Invalid input! Please enter a positive integer.");

return;

// Calculate factorial

let factorial = 1;

for (let i = 1; i <= number; i++) {

factorial *= i;

// Display the result in an alert box

alert("The factorial of " + number + " is " + factorial);

</script>
SPPU_TE_BE_COMP 👈 Click to join telegram
<button onclick="calculateFactorial()">Calculate Factorial</button>

</body>

</html>

Explanation:

• The HTML code contains a button that triggers the calculateFactorial() function when
clicked.
• Inside the function, we use the prompt() method to prompt the user to enter a number.
• We convert the input string to a number using parseInt() and validate if it's a positive
integer.
• If the input is valid, we calculate the factorial of the number using a loop.
• Finally, we display the result using an alert box.

Q4. b) Write html +javascript code to dynamically change the content of


paragraph by using getElementById() method and innerHTML property.
Ans.
here's an example of HTML and JavaScript code that demonstrates how to dynamically change the
content of a paragraph using the getElementById() method and innerHTML property:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Dynamic Content Change</title>

</head>

<body>

<p id="demo">Click the button to change this text.</p>

<button onclick="changeText()">Change Text</button>

<script>
SPPU_TE_BE_COMP 👈 Click to join telegram
function changeText() {

// Access the paragraph element using its ID

var paragraph = document.getElementById("demo");

// Change the inner HTML content of the paragraph

paragraph.innerHTML = "Text changed dynamically!";

</script>

</body>

</html>

Explanation:

• The HTML document contains a paragraph (<p>) element with the ID "demo" and a button
(<button>) element with an onclick attribute set to call the changeText() function.
• Inside the <script> tag, we define the changeText() function.
• When the button is clicked, the changeText() function is executed.
• Inside the function, we use document.getElementById("demo") to select the paragraph
element with the ID "demo".
• We then use the innerHTML property to change the HTML content of the paragraph to "Text
changed dynamically!".

This example demonstrates how to use JavaScript to dynamically update the content of an HTML
element on the web page. The getElementById() method allows us to select the desired element, and
the innerHTML property allows us to change its content.

You might also like