Scribd
Upload
67 views

Web Technology Practical Files-1

Uploaded by

Tj vlogs
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

Web Technology Practical Files-1

Uploaded by

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

Advanced Web Technology CSIT248

LAB FILE

AMITY INSTITUTE OF INFORMATION TECHNOLOGY


AMITY UNIVERSITY UTTAR PRADESH, NOIDA
Session: 2023 – 2024 (Even Semester)

Student Name: Salman Bashir


Enrollment No: A1004822219
Course: BCA-E
Submitted To: Dr. Monika Sharma
PROGRAMS

Q1. WAP to create and edit Font Size, colors, background colors,
alignment of texts.
<html>
<head>
<title>Rishabh</title>
</head>
<body>
<p style="font-size: 24px; color: blue; background-color: yellow; text-align:
center;">
Hi I’m Rishabh Kapoor. I live in Delhi. I’m currently studying BCA at Amity
University.
</p>
</body>
</html>
OUTPUT 1
Q2. WAP to add & edit images into Webpage.

<html>
<head>
<title>IMAGE</title>
</head>
<body>
<h1>Images</h1>
<img src="C:\Users\risha\Desktop\s24ultra.jpg" alt="Image 1" width="300"
height="350">
<img src="C:\Users\risha\Desktop\banner-3.png" alt="Image 2" width="250"
height="300">
</body>
</html>
OUTPUT 2
Q3. WAP to write various types of lists in HTML.

<html>
<head>
<title>IMAGE</title>
</head>
<body>
<p><b> UN-ORDERED LIST</b> </P>
<ul>
<li> Rishabh</li>
<li>Adarsh</li>
<li>Ayush</li>
</ul>
<br>
<hr>
<br>
<P> <b>ORDERED LIST</b> </P>
<ol>
<li>Rishabh</li>
<li>Ajeet</li>
<li>Ayush</li>
</ol>
<br>
<hr>
<br>
</p> <b>DEFINITION LIST</b> </P>
<dl>
<dt>JAVA</dt>
<dd>Java is a high-level, class-based, object-oriented programming language that
is designed to have as few implementation dependencies as possible.</dd>
<dt>Python</dt>
<dd>Python is a popular programming language. Python can be used on a server
to create web applications.</dd>
</dl>
</body>
</html>

OUTPUT 3
Q4. WAP to insert Hyperlinks and link one webpage to another.

<html>
<head>
<title>IMAGE</title>
</head>
<body>
<p> <b> USE OF ANCHOR TAG </b> </p>
<br>
<a href="https://www.google.com"> GOOGLE WEBSITE </a>
</body>
</html>
OUTPUT 4
Q5. WAP for spanning rows and columns of Table.

<html>
<head> </head>
<body>
<table border="1" cellspacing="2" cellpadding="10">
<tr>
<td colspan="2" rowspan="2">RISHABH</td>
<td colspan="2">AJEET</td>
</tr>
<tr>
<td>AYUSH</td>
<td>ADARSH</td>
</tr>
<tr>
<td colspan="2" rowspan="2">JAVA</td>
<td colspan="2">HTML</td>
</tr>
<tr>
<td colspan="2">PYTHON</td>
</tr>
<tr>
<td rowspan="2">ANDOROID</td>
<td rowspan="2">CSS</td>
<td colspan="2" rowspan="2">JAVA-SCRIPT</td>
</tr>
</table>
</body>
</html>
OUTPUT 5
Q6. WAP to create layout of table and add data to it.

<Html>
<head> </head>
<body>
<h2> time table</h2>
<table border="10" cellspacing="5" cellpadding="11">

<tr>
<th>TIME</th>
<th>MONDAY</th>
<th>TUESDAY</th>
<th>WEDNESDAY</th>
<th>THURSDAY</th>
<th>FRIDAY</th>
</tr>

<tr>
<th> 8:00-9:00</th>
<td>ENGLISH</td>
<td>PYTHON</td>
<td>MATHS</td>
<td>SCIENCE</td>
<td>WEBSITE DESIGNING</td>
</tr>

<tr>
<th>9:00-10:00 </th>
<td>PYTHON</td>
<td>ENGLISH</td>
<td>SCIENCE</td>
<td>ACCOUNTS</td>
<td>MATHS</td>
</tr>

<tr>
<th>10:00-11:00 </th>
<td>PYTHON</td>
<td>ENGLISH</td>
<td>SCIENCE</td>
<td>ACCOUNTS</td>
<td>MATHS</td>
</tr>

<tr>
<th>11:00-12:00 </th>
<td>PYTHON</td>
<td>WEBSITE DESIGNING</td>
<td>ANDROID</td>
<td>STATISTICS</td>
<td>MATHS</td>
</tr>

<tr>
<th>12:00-1:00 </th>
<td>COMPUTER</td>
<td>ENGLISH</td>
<td>SCIENCE</td>
<td>ACCOUNTS</td>
<td>MATHS</td>
</tr>

<tr>
<th>1:00-2:00 </th>
<td>COMPUTER</td>
<td>ENGLISH</td>
<td>WEBSITE DESIGNING</td>
<td>ANDROID</td>
<td>MATHS</td>
</tr>

</table>
</body>
</html>
OUTPUT 6
Q7. WAP to insert and edit columns and fonts to table.

<Html>
<head>
<title> table </title>
<style>
.cl1{background-color:black; Text-transform:uppercase; color:White; Text-
decoration:underline overline;}
.cl2{background-color:green; Text-transform:lowercase; color:white; letter-
spacing:5px; font-style:italic; font-weight:bolder;}
.cl3{Text-decoration:underline; background-color:Darkmagenta; color:white;
font-family:Lucida Console;}
.cl4{Text-decoration:line-through; background-color:ghostwhite; letter-
spacing:2px; font-weight:bolder;}
.cl5{Text-decoration:overline; background-color:pink;}
.cl6{background-color:Red; color:White; letter-spacing:3px; font-size:20px;}
.cl7{background-color:pink; color:black; font-size:25px; font-family:verdana;}
.cl8{background-color:cornsilk; color:black; letter-spacing:3px;}
.cl9{background-color:lightskyblue; color:black; letter-spacing:2px; font-
size:25px; margin:50px;}
.cl0{background-color:palegreen; color:black; font-style:oblique;}
</style>
</head>
<body>
<table border="10" cellspacing="5" cellpadding="11">
<tr class="cl1">
<th>TIME</th>
<th>MONDAY</th>
<th>TUESDAY</th>
<th>WEDNESDAY</th>
<th>THURSDAY</th>
<th>FRIDAY</th>
</tr>
<tr>
<th class="cl1"> 8:00-9:00</th>
<td class="cl6"> ENGLISH</td>
<td class="cl2">PYTHON</td>
<td class="cl8">MATHS</td>
<td class="cl9">SCIENCE</td>
<td class="cl3"> WEBSITE DESIGNING</td>
</tr>
<tr>
<th class="cl1"> 9:00-10:00 </th>
<td class="cl2">PYTHON</td>
<td class="cl6">ENGLISH</td>
<td class="cl9">SCIENCE</td>
<td class="cl0">ACCOUNTS</td>
<td class="cl8">MATHS</td>
</tr>
<tr>
<th class="cl1"> 10:00-11:00 </th>
<td class="cl2">PYTHON</td>
<td class="cl6">ENGLISH</td>
<td class="cl9">SCIENCE</td>
<td class="cl0">ACCOUNTS</td>
<td class="cl8">MATHS</td>
</tr>
<tr >
<th class="cl1"> 11:00-12:00 </th>
<td class="cl2"> PYTHON</td>
<td class="cl3">WEBSITE DESIGNING</td>
<td>ANDROID</td>
<td class="cl4">STATISTICS</td>
<td class="cl8">MATHS</td>
</tr>
<tr>
<th class="cl1"> 12:00-1:00 </th>
<td class="cl7"> COMPUTER</td>
<td class="cl6"> ENGLISH</td>
<td class="cl9">SCIENCE</td>
<td class="cl0">ACCOUNTS</td>
<td class="cl8">MATHS</td>
</tr>
<tr>
<th class="cl1"> 1:00-2:00 </th>
<td class="cl7">COMPUTER</td>
<td class="cl6">ENGLISH</td>
<td class="cl3"> WEBSITE DESIGNING</td>
<td>ANDROID</td>
<td class="cl8">MATHS</td>
</tr>
</table>
</body>
</html>
OUTPUT 7
Q8. WAP to use internal, external and inline CSS.

HTML FILE
<html>
<head>
<link rel="Stylesheet" href="kapoor.css">
<Style>
.cl1{background-color:red; Text-transform:uppercase; Text-
decoration:underline;}
.cl2{background-color:green; Text-transform:lowercase;}
h1 { color:red; text-decoration:underline;}
</Style>
</head>
<body>
<h1 style="color:green;"> Hello there!! Im Rishabh Kapoor. </h1>
<p class="cl1" class="cl2"> Im currently doing BCA in Amity University. </p>
</body>
</html>

CSS FILE
h1 {background-color:navy; text-decoration:overline underline;}
OUTPUT 8
Q9. Create your profile with your image using HTML.

<html>
<head>
<title> MY PROFILE </title>
</head>
<body>
<H1>Rishabh Kapoor </h1>
<br>
<img src="C:\Users\risha\Desktop\photomy.jpg" alt="My pic" width="194"
height="200" class="center">
<p> <big> Email : [email protected] </p>
<p> Phone: 9953647@@@ </p> </big>
<hr>
<h2> <u> <em> <font color="#006400"> Education </font> </h2> </em> </u>
<ul>
<li> <big> Scored 85% in Class X
</li> </big>
<li> <big> Scored 87% in Class XII with Science and Computer. </li> </big>
<li> <big> Bachelors of Computer Application - Amity University, 2022-2025
</li> </big>
</ul>
<hr>
<li> JAVA </li> </big>
</ol>
</li>
<li> <big> Web Development </li>
<li> Android Programming </big> </li>
</ul>
<hr>
<h2> <u> <em> <font color = "#006400"> Languages </h2> </em> </u>
</font>
<ul type = "Square">
<li> <big> English </li>
<li> Hindi </li>
<li> German </li>
<li> Punjabi </li> </big>
</ul>
<hr>
</body>
</html>

OUTPUT 9
Q10. WAP for I-frame in HTML.

<html>
<head>
<title>Example of iframe</title>
</head>
<body>

<h2>Embedding another website using iframe</h2>


<p>It's generally recommended to explore alternative approaches
instead of using iframes.</p>

<iframe src="https://www.google.com" width="600" height="400"


frameborder="0"></iframe>

</body>
</html>
OUTPUT 10
Q11. WAP For Div and Span elements.

<html>
<head>
<title>Div and Span Example</title>
<style>
.container {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}
.highlighted {
color: #f00;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
This is a paragraph containing some text.
<br>
My name is Rishabh Kapoor <span
class="highlighted">.HELLO.</span> for emphasis.
</div>
</body>
</html>
OUTPUT 11
Q13. WAP For adding styles to a document.

<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<p style="color: blue; font-size: 20px;">This paragraph shows the
styling. .</p>
</body>
</html>
OUTPUT 13
Q14. WAP for using classes and ID in HTML.

<html>
<head>
<title>Using Classes and ID in HTML</title>
<style>
.important {
color: red;
font-weight: bold;
}
#unique-heading {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1 id="unique-heading">USE OF ID</h1>
<p>This paragraph contains some text.</p>
<p class="important">This paragraph is marked as <span
class="important">important</span>.</p>
</body>
</html>
OUTPUT 14
Q15. Create a menu bar using DIV and TABLE tag.

Div tag

<html>
<head>
<title>Menu Bar Example</title>
<style>
#menu {
background-color: #f0f0f0;
padding: 10px;
list-style: none;
}
#menu li {
display: inline-block;
margin-right: 20px;
}
#menu li a {
text-decoration: none;
color: black;
}
#menu li a:hover {
color: #007bff;
}
</style>
</head>
<body>

<div id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</div>

</body>
</html>

Table Tag

<html>
<head>
<title>Menu Bar Example (Semantic)</title>
<style>
nav {
background-color: #f0f0f0;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li a {
text-decoration: none;
color: black;
}
nav li a:hover {
color: #007bff;
}
</style>
</head>
<body>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

</body>
</html>
OUTPUT 15
Q16. Create a HTML tutorial page using table tag.

<html>
<head>
<title>HTML Tutorial</title>
<style>
/* Add basic styling here if needed */
</style>
</head>
<body>
<header>
<h1>Introduction to HTML</h1>
</header>
<main>
<section>
<h2>What is HTML?</h2>
<p>HTML stands for HyperText Markup Language. It's the basic
building block of web pages, defining the structure and content of
web documents.</p>
</section>
<section>
<h2>Basic HTML Structure</h2>
<p>An HTML document typically consists of the following
elements:</p>
<ul>
<li>**`<!DOCTYPE html>`:** Declares the document type as
HTML.</li>
<li>**`<html>`:** The root element of the HTML
document.</li>
<li>**`<head>`:** Contains information about the document,
such as the title and styles.</li>
<li>**`<body>`:** Contains the content displayed in the
browser window.</li>
</ul>
</section>
</main>
<footer>
<p>&copy; Rishabh Kapoor</p>
</footer>
</body>
</html>

OUTPUT 16
Q17. Design a web page for Login form and perform validation
using Java Script.

<html>
<head>
<style>
body {
font-family: sans-serif; }
.login-form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.login-form label {
display: block;
margin-bottom: 5px;
}
.login-form input[type="text"],
.login-form input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 15px;
}
.login-form button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
.error-message {
color: red;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<form class="login-form" onsubmit="return validateForm()">
<h2>Login</h2>
<div class="error-message"></div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required>
<button type="submit">Login</button>
</form>

<script>
function validateForm() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const errorMessage = document.querySelector('.error-message');

errorMessage.textContent = ""; // Clear previous error messages

if (username === "") {


errorMessage.textContent = "Please enter your username.";
return false;
}

if (password === "") {


errorMessage.textContent = "Please enter your password.";
return false;
}

// Add more validation checks as needed, e.g., password length,


minimum characters, etc.

return true; // Submit the form if all validations pass


}
</script>
</body>
</html>
OUTPUT 17
Q18. Create a nested list in HTML.

<html lang="en">
<head>
</head>
<body>
<h2>Unordered List (Bullet Points)</h2>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
<li>Subitem 2.3
<ul>
<li>Sub-subitem 2.3.1</li>
<li>Sub-subitem 2.3.2</li>
</ul>
</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<h2>Ordered List (Numbered)</h2>
<ol>
<li>Step 1</li>
<li>Step 2
<ol>
<li>Substep 2.1</li>
<li>Substep 2.2</li>
</ol>
</li>
<li>Step 3</li>
</ol>
</body>
</html>

OUTPUT 18
Q19. WAP to show javascript events demo.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Events Demo</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightgray;
margin: 20px;
display: inline-block;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box" id="clickBox" onclick="changeColor(this)">Click
me</div>
<div class="box" id="mouseoverBox"
onmouseover="changeColor(this)">Mouse over</div>
<div class="box" id="mouseoutBox"
onmouseout="changeColor(this)">Mouse out</div>
<div class="box" id="dblclickBox"
ondblclick="changeColor(this)">Double click</div>
<script>
function changeColor(element) {
element.style.backgroundColor = getRandomColor();
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>

OUTPUT 19
Q20. WAP in javascript to change text box color by using
MouseOver and MouseOut.

<!DOCTYPE html>
<html>
<head>
<title>Text Box Color Effects</title>
<style>
.textbox {
width: 200px;
height: 30px;
border: 2px solid #ccc;
transition: border-color 0.3s ease;
}
</style>
</head>
<body>

<input type="text" id="myTextBox" class="textbox"


onmouseover="changeColor(true)"
onmouseout="changeColor(false)">

<script>
function changeColor(isMouseOver) {
var textBox = document.getElementById("myTextBox");
if (isMouseOver) {
textBox.style.borderColor = "blue";
} else {
textBox.style.borderColor = "#ccc";
}
}
</script>

</body>
</html>

OUTPUT 20
Q21. Design a web page for Quiz and calculate the result using
Java script.

<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
.question {
margin-bottom: 20px;
}
</style>
</head>
<body>

<div class="quiz-container">
<div class="question">
<h2>Question 1: What is the capital of France?</h2>
<input type="radio" name="q1" value="Paris"> Paris<br>
<input type="radio" name="q1" value="London"> London<br>
<input type="radio" name="q1" value="Berlin"> Berlin<br>
</div>

<div class="question">
<h2>Question 2: What is the capital of Japan?</h2>
<input type="radio" name="q2" value="Tokyo"> Tokyo<br>
<input type="radio" name="q2" value="Seoul"> Seoul<br>
<input type="radio" name="q2" value="Beijing"> Beijing<br>
</div>

<button onclick="calculateResult()">Submit</button>

<div id="result"></div>
</div>

<script>
function calculateResult() {
var score = 0;

// Question 1
var q1Answer =
document.querySelector('input[name="q1"]:checked');
if (q1Answer) {
if (q1Answer.value === "Paris") {
score += 1;
}
}

// Question 2
var q2Answer =
document.querySelector('input[name="q2"]:checked');
if (q2Answer) {
if (q2Answer.value === "Tokyo") {
score += 1;
}
}
var resultContainer = document.getElementById('result');
resultContainer.innerHTML = 'Your score is: ' + score + ' out of 2';
}
</script>
</body>
</html>
OUTPUT 21
Q22. Design a web script to show the functionality of FORWARD
and BACK button of History class using JavaScript.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>History Class Example</title>
</head>
<body>
<h1>History Class Example</h1>
<button onclick="goBack()">Back</button>
<button onclick="goForward()">Forward</button>
<script>
function goBack() {
window.history.back();
}
function goForward() {
window.history.forward();
}
</script>
</body>
</html>
OUTPUT 22
Q23. JavaScript to check Factorial.

<!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>
<h1>Factorial Calculator</h1>
<label for="numberInput">Enter a number:</label>
<input type="number" id="numberInput">
<button onclick="calculateFactorial()">Calculate Factorial</button>
<p id="result"></p>
<script>
function calculateFactorial() {
var numberInput =
document.getElementById("numberInput").value;
var resultElement = document.getElementById("result");
if (numberInput === "") {
resultElement.textContent = "Please enter a number.";
return;
}
var number = parseInt(numberInput);
if (number < 0) {
resultElement.textContent = "Factorial is not defined for
negative numbers.";
return;
}
var factorial = 1;
for (var i = 2; i <= number; i++) {
factorial *= i;
}
resultElement.textContent = "The factorial of " + number + " is "
+ factorial + ".";
}
</script>
</body>
</html>

OUTPUT 23
Q24. JavaScript to check Fibonacci series.

<html lang="en">
<head>
</head>
<body>
<h1>Fibonacci Series Generator</h1>

<label for="limitInput">Enter the limit:</label>


<input type="number" id="limitInput">
<button onclick="generateFibonacci()">Generate Fibonacci
Series</button>
<p id="fibonacciSeries"></p>
<script>
function generateFibonacci() {
var limitInput = document.getElementById("limitInput").value;
var fibonacciSeriesElement =
document.getElementById("fibonacciSeries");
if (limitInput === "") {
fibonacciSeriesElement.textContent = "Please enter a limit.";
return;
}
var limit = parseInt(limitInput);
if (limit <= 0) {
fibonacciSeriesElement.textContent = "Limit should be a
positive integer.";
return;
}
var fibonacciSeries = [0, 1];
while (fibonacciSeries[fibonacciSeries.length - 1] +
fibonacciSeries[fibonacciSeries.length - 2] <= limit) {
fibonacciSeries.push(fibonacciSeries[fibonacciSeries.length - 1]
+ fibonacciSeries[fibonacciSeries.length - 2]);
}
</script>
</body>
</html>

OUTPUT 24
Q25. Javascript to check Lower and upper case.

<html>
<head>
</head>
<body>
<h1>Case Checker</h1>
<label for="textInput">Enter a string:</label>
<input type="text" id="textInput">
<button onclick="checkCase()">Check Case</button>
<p id="result"></p>
<script>
function checkCase() {
var textInput = document.getElementById("textInput").value;
var resultElement = document.getElementById("result");
if (textInput === "") {
resultElement.textContent = "Please enter a string.";
return;
}
var hasLowerCase = false;
var hasUpperCase = false;
for (var i = 0; i < textInput.length; i++) {
var char = textInput.charAt(i);
if (char >= 'a' && char <= 'z') {
hasLowerCase = true;
} else if (char >= 'A' && char <= 'Z') {
hasUpperCase = true;
}}
if (hasLowerCase && hasUpperCase) {
resultElement.textContent = "The string contains only lowercase
characters.";
} else if (hasUpperCase) {
resultElement.textContent = "The string contains only uppercase
characters.";
}}}
</script>
</body>
</html>

OUTPUT 25
Q26. WAP in javascript to replace a given word in a paragraph.

<html>
<head>
</head>
<body>
<h1>Word Replacement</h1>
<label for="paragraphInput">Enter a paragraph:</label><br>
<textarea id="paragraphInput" rows="4"
cols="50"></textarea><br><br>
<label for="wordInput">Enter the word to replace:</label>
<input type="text" id="wordInput"><br><br>
<label for="replacementInput">Enter the replacement word:</label>
<input type="text" id="replacementInput"><br><br>
<button onclick="replaceWord()">Replace Word</button>
<p id="result"></p
<script>
function replaceWord() {
var paragraphInput =
document.getElementById("paragraphInput").value;
var wordInput = document.getElementById("wordInput").value;
var replacementInput =
document.getElementById("replacementInput").value;
var resultElement = document.getElementById("result");
if (paragraphInput === "" || wordInput === "" || replacementInput
=== "") {
resultElement.textContent = "Please fill in all fields.";
return;
}
var replacedParagraph = paragraphInput.replace(new
RegExp(wordInput, "gi"), replacementInput);
resultElement.textContent = replacedParagraph;
}
</script>
</body>
</html>

OUTPUT 26
Q27. WAP in javascript to concatenate two strings.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>String Concatenation</h1>
<label for="string1Input">Enter the first string:</label>
<input type="text" id="string1Input"><br>
<label for="string2Input">Enter the second string:</label>
<input type="text" id="string2Input"><br>
<button onclick="concatenateStrings()">Concatenate</button>
<p id="result"></p>
<script>
function concatenateStrings() {
var string1 = document.getElementById("string1Input").value;
var string2 = document.getElementById("string2Input").value;
var resultElement = document.getElementById("result");

var concatenatedString = string1 + " " + string2;


resultElement.textContent = "Concatenated String: " +
concatenatedString;
}
</script>
</body>
</html>
OUTPUT 27
Q28. WAP in javascript to display table of any given number.

<html>
<head>
</head>
<body>
<h1>Multiplication Table</h1>
<label for="numberInput">Enter a number:</label>
<input type="number" id="numberInput">
<button onclick="displayMultiplicationTable()">Generate
Table</button>
<table id="table"></table>
<script>
function displayMultiplicationTable() {
var number = document.getElementById("numberInput").value;
var table = document.getElementById("table");
table.innerHTML = "";
// Create table rows
for (var i = 1; i <= 10; i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
// Calculate and set cell values
cell1.textContent = number + " × " + i;
cell2.textContent = number * i;
// Append cells to row
row.appendChild(cell1);
row.appendChild(cell2);
// Append row to table
table.appendChild(row);
}
}
</script>
</body>
</html>

OUTPUT 28
Q29. WAP in javascript to reverse a string.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>String Reversal</h1>
<label for="stringInput">Enter a string:</label>
<input type="text" id="stringInput">
<button onclick="reverseString()">Reverse</button>
<p id="reversedString"></p>
<script>
function reverseString() {
var inputString = document.getElementById("stringInput").value;
var reversedString = "";
// Loop through the input string from end to start and concatenate
each character to reversedString
for (var i = inputString.length - 1; i >= 0; i--) {
reversedString += inputString.charAt(i);
}
document.getElementById("reversedString").textContent =
"Reversed string: " + reversedString;
}
</script>
</body>
</html>
OUTPUT 29
Q30. WAP in Javascript to check the length of the password.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Password Length Checker</h1>
<label for="passwordInput">Enter your password:</label>
<input type="password" id="passwordInput">
<button onclick="checkPasswordLength()">Check Length</button>
<p id="result"></p>
<script>
function checkPasswordLength() {
var password =
document.getElementById("passwordInput").value;
var resultElement = document.getElementById("result");
if (password.length < 8) {
resultElement.textContent = "Password should be at least 8
characters long.";
} else {
resultElement.textContent = "Password length is acceptable.";
}
}
</script>
</body>
</html>
OUTPUT 30

You might also like