Scribd
Upload
13 views40 pages

Rit WT Lab Manual

The document is a laboratory manual for a Web Technologies Lab course, detailing various experiments for B. Tech. III Year students. It includes tasks such as creating HTML pages, using JavaScript for number conversion, and implementing user validation with AJAX. Each experiment is accompanied by objectives and sample code to guide students in their practical learning.

Uploaded by

amm804994
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
13 views40 pages

Rit WT Lab Manual

The document is a laboratory manual for a Web Technologies Lab course, detailing various experiments for B. Tech. III Year students. It includes tasks such as creating HTML pages, using JavaScript for number conversion, and implementing user validation with AJAX. Each experiment is accompanied by objectives and sample code to guide students in their practical learning.

Uploaded by

amm804994
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/ 40

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.

You might also like