DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
2022-2023
B. Tech. III Year - II Semester
(AR20)STAFF LABORATORY
MANUAL
for
WEB TECHNOLOGIES LAB
C CODE: 20CS6102
Prepared by
P.Sravani
Assistant Professor, CSE
1
LIST OF EXPERIMENTS
1. Create a HTML page, which has properly aligned paragraphs with image along with it.
2. Write a program to display list of items in different styles.
3. Write an HTML page with JavaScript that takes a number from one text field in the range 0-
999 and display it in other text field in words. If the number is out of range, it should show
“out of range” and if it is not a number, it should show “not a number” message in the result
box.
4. Write an HTML page that has one input, which can take multi-line text and a submit button.
Once the user clicks the submit button, it should show the number of characters, lines and
words in the text entered using an alert message. Words are separated with white space and
lines are separated with new line character.
5. Write an HTML page that contains a selection box with a list of 5 countries In the above page
when the user selects a country, its capital should be printed next to the list, and add CSS to
customize the properties of the font of the capital.
6. A simple calculator web application that takes 2 numbers and an operator (+,-,*,/,%) from an
HTML page and returns the result page with the operation performed on the operands.
7. Write a program to connect a XML web page to any database engine.
8. Write a java script for loop that will iterate from 0 to 15 for each iteration, it will check if
the current number is odd or even, and display a message to the screen.
9. Write a java script program which compute, the average marks of the following students
then this average is used to determine the corresponding grade.
10. Write a java script program to sum the multiple s of 3 and 5 under 1000.
11. Write a java script program to test the first character of a string is uppercase or not.
12. To convert the static web pages online library into dynamic web pages using servlets
and cookies.
13. A web application that lists all cookies stored in the browser on clicking “list Cookies”
button. Add cookies if necessary
14. A user validation page web application, where the user submits the login name and
password to the server. The name and password are checked against the data already available in
database and if the data matches, a successful login Message is returned. Otherwise, a failure
message is shown to the user. Use AJAX to show the result on the same page below the button.
Experiment 1: Create an HTML Page with Properly Aligned Paragraphs and an Image
Objective: To create an HTML page with properly aligned paragraphs and an image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aligned Paragraphs with Image</title>
</head>
<body>
<div>
<img src="C:\sravani\parrot.jpg" alt="A parrot" width="300">
<div>
<p>This is an example paragraph aligned next to the image. You can replace this text with
your content.</p>
<p>Here is another paragraph that will align next to the image, creating a visually pleasant
layout.</p>
</div>
</div>
</body>
</html>
Output:
Objective: To create an HTML page with properly aligned paragraphs and an image.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aligned Paragraphs with Image</title>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container img {
width: 300px;
margin-right: 20px;
}
.text p {
max-width: 600px;
font-size: 1rem;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<img src="C:\sravani\parrot.jpg">
<div class="text">
<p>This is an example paragraph aligned next to the image. You can replace this text with
your content.</p>
<p>Here is another paragraph that will align next to the image, creating a visually pleasant
layout.</p>
</div>
</div>
</body>
</html>
Output:
Experiment 2: Display a List of Items in Different Styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List of Items</title>
</head>
<body>
<!-- Unordered List Section -->
<h3>Unordered List</h3>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Strawberry</li>
</ul>
<!-- Ordered List Section -->
<h3>Ordered List</h3>
<ol>
<li>First step: Gather materials</li>
<li>Second step: Prepare the ingredients</li>
<li>Third step: Mix and bake</li>
</ol>
<!-- Custom List Section (Plain List) -->
<h3>Custom Styled List (No Style Applied)</h3>
<ul>
<li>Task 1: Complete the assignment</li>
<li>Task 2: Attend meeting at 3 PM</li>
<li>Task 3: Respond to emails</li>
<li>Task 4: Go for a walk</li>
</ul>
</body>
</html>
Output:
Experiment 2 : example 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Different Types of Lists</title>
</head>
<body>
<!-- Shopping List -->
<h3>Shopping List (Unordered)</h3>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
<li>Butter</li>
</ul>
<!-- Task List with Nested Items -->
<h3>Daily Tasks (Ordered with Nested Items)</h3>
<ol>
<li>Morning Routine
<ul>
<li>Wake up</li>
<li>Exercise</li>
<li>Breakfast</li>
</ul>
</li>
<li>Work Tasks
<ul>
<li>Check emails</li>
<li>Attend team meeting</li>
<li>Submit report</li>
</ul>
</li>
<li>Evening Routine
<ul>
<li>Prepare dinner</li>
<li>Read a book</li>
<li>Go to bed</li>
</ul>
</li>
</ol>
<!-- Definition List -->
<h3>Programming Terms</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used to structure web content.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style web content.</dd>
<dt>JavaScript</dt>
<dd>A programming language used to create dynamic and interactive web pages.</dd>
</dl>
</body>
</html>
Output:
Experiment 2 : example 3
Objective: To display a list of items in different styles using HTML and CSS.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List of Items</title>
<style>
ul {
list-style-type: square;
}
ol {
list-style-type: decimal;
}
.custom-list {
list-style-type: none;
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Unordered List</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h3>Custom Styled List</h3>
<ul class="custom-list">
<li>Custom Item 1</li>
<li>Custom Item 2</li>
</ul>
</body>
</html>
Output:
Experiment 3: Convert a Number to Words Using JavaScript
Objective: To create an HTML page with JavaScript that converts a number into words.
HTML + JavaScript Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number to Words</title>
<script>
function numberToWords() {
const number = document.getElementById('num').value;
const words = ["", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight",
"Nine", "Ten"];
let result = document.getElementById('result');
if (isNaN(number)) {
result.innerHTML = "Not a number";
} else if (number < 0 || number > 999) {
result.innerHTML = "Out of range";
} else {
result.innerHTML = words[number] || "Invalid input";
}
}
</script>
</head>
<body>
<input type="text" id="num" placeholder="Enter a number (0-999)">
<button onclick="numberToWords()">Convert</button>
<p id="result"></p>
</body>
</html>
Output:
Output 2:
Output 3:
Experiment 3 :second version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number to Words</title>
</head>
<body>
<h1>Convert a Number to Words</h1>
<label for="numberInput">Enter a number:</label>
<input type="number" id="numberInput" placeholder="e.g., 123">
<button onclick="convertToWords()">Convert</button>
<p id="result"></p>
<script>
function convertToWords() {
const numberInput = document.getElementById('numberInput').value;
const result = document.getElementById('result');
if (!numberInput || isNaN(numberInput)) {
result.textContent = "Please enter a valid number.";
return;
}
result.textContent = numberToWords(parseInt(numberInput));
}
function numberToWords(num) {
const ones = ["", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight",
"Nine"];
const teens = ["", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen",
"Seventeen", "Eighteen", "Nineteen"];
const tens = ["", "Ten", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy",
"Eighty", "Ninety"];
const thousands = ["", "Thousand", "Million", "Billion"];
if (num === 0) return "Zero";
let word = "";
let i = 0;
while (num > 0) {
let chunk = num % 1000;
if (chunk !== 0) {
word = chunkToWords(chunk) + thousands[i] + " " + word;
}
num = Math.floor(num / 1000);
i++;
}
return word.trim();
function chunkToWords(chunk) {
let chunkWord = "";
if (chunk >= 100) {
chunkWord += ones[Math.floor(chunk / 100)] + " Hundred ";
chunk %= 100;
}
if (chunk >= 11 && chunk <= 19) {
chunkWord += teens[chunk - 10] + " ";
} else if (chunk >= 10 || chunk > 0) {
chunkWord += tens[Math.floor(chunk / 10)] + " ";
chunkWord += ones[chunk % 10] + " ";
}
return chunkWord;
}
}
</script>
</body>
</html>
Output:
Output 2:
Output 3:
Output 4:
Experiment 4: Text Field Character and Word Count
Objective: To count the number of characters, lines, and words in a multi-line text input.
HTML + JavaScript Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Field Count</title>
<script>
function countText() {
const text = document.getElementById('textarea').value;
const numLines = text.split("\n").length;
const numWords = text.split(/\s+/).filter(Boolean).length;
const numChars = text.length;
alert(`Characters: ${numChars}\nWords: ${numWords}\nLines: ${numLines}`);
}
</script>
</head>
<body>
<textarea id="textarea" rows="4" cols="50"></textarea><br>
<button onclick="countText()">Submit</button>
</body>
</html>
Output:
Output 2:
Experiment 4: second version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Character and Word Counter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 100%;
height: 150px;
margin-bottom: 10px;
font-size: 16px;
}
.counter {
margin-top: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Text Field Character and Word Count</h1>
<textarea id="textField" placeholder="Type your text here..."
oninput="countCharactersAndWords()"></textarea>
<div class="counter">
<p>Characters: <span id="charCount">0</span></p>
<p>Words: <span id="wordCount">0</span></p>
</div>
<script>
function countCharactersAndWords() {
const text = document.getElementById('textField').value;
const charCount = text.length;
// Split the text into words, ignoring multiple spaces
const words = text.trim().split(/\s+/);
const wordCount = text.trim() === "" ? 0 : words.length;
// Display the counts
document.getElementById('charCount').textContent = charCount;
document.getElementById('wordCount').textContent = wordCount;
</script>
</body>
</html>
Output:
Output 2:
Output 3:
Experiment 5: Display Country Capital Based on Selection
Objective: To display the capital of a selected country from a dropdown.
HTML + JavaScript Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Country Capital</title>
<style>
#capital {
font-size: 1.5rem;
font-weight: bold;
color: #2c3e50;
}
</style>
<script>
function showCapital() {
const country = document.getElementById('country').value;
const capitals = {
"USA": "Washington, D.C.",
"India": "New Delhi",
"Canada": "Ottawa",
"UK": "London",
"Australia": "Canberra"
};
document.getElementById('capital').innerText = capitals[country] || "Select a country to
see its capital.";
}
</script>
</head>
<body>
<select id="country" onchange="showCapital()">
<option value="">Select a Country</option>
<option value="USA">USA</option>
<option value="India">India</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<option value="Australia">Australia</option>
</select>
<p id="capital"></p>
</body>
</html>
Output:
Output 2:
Output 3:
Experiment 6: Simple Calculator Application
Objective: To create a simple calculator with JavaScript that performs basic arithmetic
operations.
HTML + JavaScript Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<script>
function calculate() {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
const operator = document.getElementById('operator').value;
let result;
if (operator === '+') {
result = num1 + num2;
} else if (operator === '-') {
result = num1 - num2;
} else if (operator === '*') {
result = num1 * num2;
} else if (operator === '/') {
result = num1 / num2;
} else if (operator === '%') {
result = num1 % num2;
}
document.getElementById('result').innerText = `Result: ${result}`;
}
</script>
</head>
<body>
<input type="number" id="num1" placeholder="Enter number 1">
<input type="number" id="num2" placeholder="Enter number 2">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<button onclick="calculate()">Calculate</button>
<p id="result"></p>
</body>
</html>
Output :
Output 2:
Output 3:
Output 4:
How to execute xml
Executing the XML-to-database program involves several steps, as it requires a local or remote
server environment, a database, and proper configuration. Here’s how you can set it up and run
the program:
Step 1: Set Up the Environment
1. Install a Web Server with PHP Support:
o Install XAMPP or WAMP (Windows) / MAMP (Mac) / LAMP (Linux).
o These tools bundle a web server (Apache), PHP, and MySQL for easy setup.
2. Start the Web Server:
o Open the control panel of your installed server environment.
o Start Apache (web server) and MySQL (database).
Step 2: Set Up the Database
1. Access the Database:
o Open phpMyAdmin in your browser (bundled with XAMPP/WAMP/MAMP).
2. Create the Database:
o Run the following SQL commands in phpMyAdmin's SQL query tab to create the
test_db database and users table:
CREATE DATABASE test_db;
USE test_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL
);
Step 3: Place Files in the Server Directory
1. Find the Server's Root Directory:
o For XAMPP: htdocs folder (usually in C:\xampp\htdocs\).
o For WAMP: www folder (usually in C:\wamp\www\).
o For MAMP: htdocs folder (usually in /Applications/MAMP/htdocs/).
2. Create a New Folder:
o Create a folder, e.g., xml_to_db.
3. Copy Your Files:
o Place your index.html file (for the form), process.php file (backend), and sample
XML file in this folder.
Step 4: Run the Program
1. Open the Browser:
o Navigate to your project, e.g., http://localhost/xml_to_db/index.html.
2. Upload the XML File:
o Use the form to upload your sample XML file.
3. Submit the Form:
o Click the Submit button.
o If everything is set up correctly, the PHP script will process the XML and insert
the data into the database.
Step 5: Verify the Data
1. Check phpMyAdmin:
o Open phpMyAdmin and go to the test_db database.
o Check the users table to see the inserted data.
Troubleshooting
1. Common Issues:
o PHP Errors: Check the PHP error log for issues (usually in the logs folder of
XAMPP/WAMP/MAMP).
o Database Connection Errors: Ensure your database credentials (host, user,
password) are correct.
o File Upload Issues: Make sure the XML file format is correct.
2. Enable Error Reporting in PHP:
o Add this at the top of your process.php for debugging:
php
Copy code
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
Experiment 7: Write a program to connect a XML web page to any database engine.
Connecting an XML web page to a database typically involves a backend server or middleware
that processes the XML and communicates with the database. Here’s a basic example using PHP
to demonstrate how an XML-based web page interacts with a database:
Example: XML Web Page Connected to a MySQL Database
1. Sample XML Data (front-end)
Create an XML page to send data to the server.
<?xml version="1.0" encoding="UTF-8"?>
<data>
<user>
<name>John Doe</name>
<email>
[email protected]</email>
</user>
</data>
2. HTML Form to Send XML
This form uploads the XML data to the backend.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XML to Database</title>
</head>
<body>
<h1>Upload XML Data</h1>
<form action="process.php" method="POST" enctype="multipart/form-data">
<label for="xmlFile">Choose XML file:</label><br>
<input type="file" id="xmlFile" name="xmlFile" accept=".xml" required><br><br>
<button type="submit">Upload and Process</button>
</form>
</body>
</html>
3. Backend Script to Process XML and Insert into Database (PHP)
<?php
// Database connection details
$host = 'localhost';
$db = 'test_db';
$user = 'root';
$password = '';
// Establish connection
$conn = new mysqli($host, $user, $password, $db);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['xmlFile']) && $_FILES['xmlFile']['error'] === UPLOAD_ERR_OK) {
// Load XML file
$xmlFile = $_FILES['xmlFile']['tmp_name'];
$xmlContent = simplexml_load_file($xmlFile);
// Extract data
$name = $xmlContent->user->name;
$email = $xmlContent->user->email;
// Insert into database
$stmt = $conn->prepare("INSERT INTO users (name, email) VALUES (?, ?)");
$stmt->bind_param("ss", $name, $email);
if ($stmt->execute()) {
echo "Data successfully inserted into the database!";
} else {
echo "Error: " . $stmt->error;
}
$stmt->close();
} else {
echo "Error uploading XML file.";
}
}
$conn->close();
?>
4. Database Schema
Create a simple database table to store the XML data.
CREATE DATABASE test_db;
USE test_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL
);
Output:
Start xampp server and start apache and mysql server
Save files html, xml, php in C:\xampp\htdocs\xml_to_db
Execute html and upload xml it triggers php program and extracts xml data from xml and shows
the result in browsers
Experiment 8: Write a java script for loop that will iterate from 0 to 15 for each iteration,
it will check if the current number is odd or even, and display a message to the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odd or Even</title>
</head>
<body>
<h1>Odd or Even Numbers</h1>
<div id="result"></div>
<script>
// Loop from 0 to 15
for (let i = 0; i <= 15; i++) {
// Check if the number is odd or even
if (i % 2 === 0) {
// Even number
document.getElementById("result").innerHTML += i + " is even.<br>";
} else {
// Odd number
document.getElementById("result").innerHTML += i + " is odd.<br>";
}
}
</script>
</body>
</html>
Output:
Experiment 9: Write a java script program which compute, the average marks of the
following students then this average is used to determine the corresponding grade.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Grade Calculator</title>
</head>
<body>
<h1>Student Average Marks and Grade</h1>
<div id="result"></div>
<script>
// Student names and their marks
const students = [
{ name: "Alice", marks: [85, 90, 78, 92, 88] },
{ name: "Bob", marks: [70, 75, 80, 65, 72] },
{ name: "Charlie", marks: [92, 95, 98, 100, 97] },
{ name: "David", marks: [60, 55, 65, 58, 62] },
{ name: "Eve", marks: [88, 84, 90, 85, 87] }
];
// Function to calculate the average marks
function calculateAverage(marks) {
const sum = marks.reduce((total, mark) => total + mark, 0);
return sum / marks.length;
}
// Function to determine the grade based on the average
function determineGrade(average) {
if (average >= 90) {
return 'A';
} else if (average >= 80) {
return 'B';
} else if (average >= 70) {
return 'C';
} else if (average >= 60) {
return 'D';
} else {
return 'F';
}
}
// Display the results for each student
let resultHTML = '';
students.forEach(student => {
const average = calculateAverage(student.marks);
const grade = determineGrade(average);
resultHTML += `<p>${student.name}'s Average: ${average.toFixed(2)} - Grade:
${grade}</p>`;
});
// Display the results on the page
document.getElementById('result').innerHTML = resultHTML;
</script>
</body>
</html>
Output:
Experiment 9 : example 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Student Grade Calculator</title>
<style>
input, button {
margin: 5px 0;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Enter Student Data</h1>
<!-- Form to enter student data -->
<form id="studentForm">
<label for="name">Student Name:</label>
<input type="text" id="name" required><br>
<label for="marks">Enter Marks (comma separated):</label>
<input type="text" id="marks" required placeholder="e.g., 85, 90, 78"><br>
<button type="button" id="showResultBtn">Show Result</button>
</form>
<div id="result"></div>
<script>
// Function to calculate the average marks
function calculateAverage(marks) {
const sum = marks.reduce((total, mark) => total + mark, 0);
return sum / marks.length;
}
// Function to determine the grade based on the average
function determineGrade(average) {
if (average >= 90) {
return 'A';
} else if (average >= 80) {
return 'B';
} else if (average >= 70) {
return 'C';
} else if (average >= 60) {
return 'D';
} else {
return 'F';
}
}
// Function to handle the "Show Result" button click
document.getElementById('showResultBtn').addEventListener('click', function() {
// Get the student name and marks from the input fields
const name = document.getElementById('name').value.trim();
const marksInput = document.getElementById('marks').value.trim();
// Convert the marks input into an array of numbers
const marks = marksInput.split(',').map(mark => parseFloat(mark.trim()));
// Validate the marks array
if (marks.some(isNaN) || marks.length === 0) {
alert("Please enter valid marks.");
return;
}
// Calculate the average and grade
const average = calculateAverage(marks);
const grade = determineGrade(average);
// Display the result
const resultHTML = `
<p><strong>${name}'s Average:</strong> ${average.toFixed(2)} - Grade:
${grade}</p>
`;
document.getElementById('result').innerHTML = resultHTML;
// Clear the form fields for new input
document.getElementById('name').value = '';
document.getElementById('marks').value = '';
});
</script>
</body>
</html>
Output :
Experiment 11 : Write a java script program to test the first character of a string is uppercase or
not.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test First Character Uppercase</title>
</head>
<body>
<h1>Check if the First Character is Uppercase</h1>
<!-- Input field for user to enter a string -->
<label for="inputString">Enter a string:</label>
<input type="text" id="inputString" placeholder="Enter text here"><br><br>
<!-- Button to check the first character -->
<button onclick="checkUppercase()">Check</button>
<p id="result"></p>
<script>
function checkUppercase() {
// Get the string entered by the user
const inputString = document.getElementById('inputString').value;
// Check if the first character is uppercase
if (inputString.length > 0 && inputString[0] === inputString[0].toUpperCase()) {
document.getElementById('result').innerText = "The first character is uppercase.";
} else if (inputString.length > 0) {
document.getElementById('result').innerText = "The first character is not uppercase.";
} else {
document.getElementById('result').innerText = "Please enter a string.";
}
}
</script>
</body>
</html>
Output:
Output 2:
Experiment 12: To convert the static web pages online library into dynamic web pages using
servlets and cookies.
