Scribd
Upload
89 views

Web Technology Practical Files-1

Uploaded by

Tj vlogs
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
89 views

Web Technology Practical Files-1

Uploaded by

Tj vlogs
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/ 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