Scribd
Upload
54 views10 pages

Assignment 1 22BCE10459

new2

Uploaded by

prakharmalviya.2105
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
54 views10 pages

Assignment 1 22BCE10459

new2

Uploaded by

prakharmalviya.2105
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/ 10

Assignment 1

Internet and Web Programming


PRAKAHR MALVIYA 22BCE10459

1) Design an English alphabet chart such that on clicking the


alphabet the appropriate example must be displayed using
HTML client-side image mapping.

<!DOCTYPE html>
<html>
<head>
<title>Alphabet Chart with Image Mapping</title>
<style>

</style>
</head>
<body>

<h1>Click on the letters to see examples!</h1>

<center><img src="alphabet_chart.jpg" usemap="#alphabetMap"></center>

<map name="alphabetMap">
<area target="" alt="A" title="A" href="link1.html" coords="5,26,96,166" shape="rect">
<area target="" alt="B" title="B" href="link2.html" coords="106,24,194,160" shape="rect">
<area target="" alt="C" title="C" href="link3.html" coords="213,27,305,158" shape="rect">
<area target="" alt="D" title="D" href="link4.html" coords="320,16,415,157" shape="rect">
<area target="" alt="E" title="E" href="link5.html" coords="430,21,504,154" shape="rect">
<area target="" alt="F" title="F" href="link6.html" coords="520,18,593,154" shape="rect">
<area target="" alt="G" title="G" href="link7.html" coords="5,175,97,306" shape="rect">
<area target="" alt="H" title="H" href="link8.html" coords="106,171,188,308" shape="rect">
<area target="" alt="I" title="I" href="link9.html" coords="194,174,251,305" shape="rect">
<area target="" alt="J" title="J" href="link10.html" coords="257,172,334,303" shape="rect">
<area target="" alt="K" title="K" href="link11.html" coords="340,169,420,299" shape="rect">
<area target="" alt="L" title="L" href="link12.html" coords="429,169,499,295" shape="rect">
<area target="" alt="M" title="M" href="link13.html" coords="508,165,592,287" shape="rect">
<area target="" alt="N" title="N" href="link14.html" coords="4,333,83,459" shape="rect">
<area target="" alt="O" title="O" href="link15.html" coords="88,325,166,444" shape="rect">
<area target="" alt="P" title="P" href="link16.html" coords="170,315,243,452" shape="rect">
<area target="" alt="Q" title="Q" href="link17.html" coords="248,317,338,445" shape="rect">
<area target="" alt="R" title="R" href="link18.html" coords="340,306,416,438" shape="rect">
<area target="" alt="S" title="S" href="link19.html" coords="421,305,500,438" shape="rect">
<area target="" alt="T" title="T" href="link20.html" coords="502,304,590,439" shape="rect">
<area target="" alt="U" title="U" href="link21.html" coords="5,464,86,586" shape="rect">
<area target="" alt="V" title="V" href="link22.html" coords="91,473,181,585" shape="rect">
<area target="" alt="W" title="W" href="link23.html" coords="189,468,310,585" shape="rect">
<area target="" alt="X" title="X" href="link24.html" coords="313,454,409,586" shape="rect">
<area target="" alt="Y" title="Y" href="link25.html" coords="412,452,504,597" shape="rect">
<area target="" alt="Z" title="Z" href="link26.html" coords="510,460,593,592" shape="rect">
</map>

</body>
</html>
OUTPUT
2) Develop an online application to find the transpose of the given
matrix. Obtain the number elements from the user based on the
number of rows and columns using JavaScript.

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matrix Transpose Finder</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Matrix Transpose Finder</h1>
<form id="matrixForm" class="form-container">
<div class="input-group">
<label for="rows">Number of Rows:</label>
<input type="number" id="rows" name="rows" min="1" required>
</div>
<div class="input-group">
<label for="cols">Number of Columns:</label>
<input type="number" id="cols" name="cols" min="1" required>
</div>
<button type="button" onclick="generateMatrixInput()" class="btn">Generate Matrix</button>
</form>
<div id="matrixInput" class="matrix-container"></div>
<button id="transposeButton" class="btn" style="display: none;" onclick="transposeMatrix()">Transpose
Matrix</button>
<div id="result" class="result-container"></div>
</div>

<script src="script.js"></script>
</body>
</html>

styles.css
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}

.container {
background-color: #fff;
padding: 20px 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 500px;
width: 100%;
}

h1 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}

.form-container {
margin-bottom: 20px;
}

.input-group {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 10px;
}

label {
margin-bottom: 5px;
font-weight: bold;
color: #555;
}

input[type="number"] {
padding: 8px;
border: 1px solid #ddd;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}

.btn {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}

.btn:hover {
background-color: #0056b3;
}

.matrix-container {
margin-top: 20px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}

td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}

.result-container {
margin-top: 20px;
}

.result-container h2 {
font-size: 20px;
margin-bottom: 10px;
color: #333;
}

script.js
function generateMatrixInput() {
const rows = document.getElementById('rows').value;
const cols = document.getElementById('cols').value;
const matrixInputDiv = document.getElementById('matrixInput');

matrixInputDiv.innerHTML = ''; // Clear previous inputs

const table = document.createElement('table');

for (let i = 0; i < rows; i++) {


const row = document.createElement('tr');
for (let j = 0; j < cols; j++) {
const cell = document.createElement('td');
const input = document.createElement('input');
input.type = 'number';
input.id = `cell-${i}-${j}`;
cell.appendChild(input);
row.appendChild(cell);
}
table.appendChild(row);
}

matrixInputDiv.appendChild(table);
document.getElementById('transposeButton').style.display = 'block';
}

function transposeMatrix() {
const rows = document.getElementById('rows').value;
const cols = document.getElementById('cols').value;

let matrix = [];


for (let i = 0; i < rows; i++) {
let row = [];
for (let j = 0; j < cols; j++) {
const value = document.getElementById(`cell-${i}-${j}`).value;
row.push(Number(value));
}
matrix.push(row);
}

let transposedMatrix = [];


for (let i = 0; i < cols; i++) {
let row = [];
for (let j = 0; j < rows; j++) {
row.push(matrix[j][i]);
}
transposedMatrix.push(row); }

displayMatrix(transposedMatrix);
}

function displayMatrix(matrix) {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '<h2>Transposed Matrix:</h2>';

const table = document.createElement('table');

matrix.forEach(row => {
const tr = document.createElement('tr');
row.forEach(cell => {
const td = document.createElement('td');
td.textContent = cell;
tr.appendChild(td);
});
table.appendChild(tr);
});

resultDiv.appendChild(table);
}

OUTPUT
3) Create a hospital registration form and validate the fields using
JavaScript.

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.form-group select {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.form-group button {
width: 100%;
padding: 10px;
background-color: #007bff;
border: none;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.form-group button:hover {
background-color: #0056b3;
}
.error {
color: red;
font-size: 12px;
}
</style>
</head>
<body>

<div class="container">
<h2>Hospital Registration</h2>
<form id="registrationForm">
<div class="form-group">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName">
<div id="fullNameError" class="error"></div>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<div id="ageError" class="error"></div>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<div id="genderError" class="error"></div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<div id="emailError" class="error"></div>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
<div id="phoneError" class="error"></div>
</div>
<div class="form-group">
<button type="submit">Register</button>
</div>
</form>
</div>

<script src="validate.js"></script>

</body>
</html>
Validate.js
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault();

document.querySelectorAll('.error').forEach(function(error) {
error.textContent = '';
});

let valid = true;

const fullName = document.getElementById('fullName').value.trim();


if (fullName === '') {
valid = false;
document.getElementById('fullNameError').textContent = 'Full Name is required.';
}

const age = document.getElementById('age').value;


if (age === '') {
valid = false;
document.getElementById('ageError').textContent = 'Age is required.';
} else if (isNaN(age) || age <= 0) {
valid = false;
document.getElementById('ageError').textContent = 'Please enter a valid age.';
}

const gender = document.getElementById('gender').value;


if (gender === '') {
valid = false;
document.getElementById('genderError').textContent = 'Gender is required.';
}

const email = document.getElementById('email').value.trim();


if (email === '') {
valid = false;
document.getElementById('emailError').textContent = 'Email is required.';
} else if (!validateEmail(email)) {
valid = false;
document.getElementById('emailError').textContent = 'Please enter a valid email.'; }
const phone = document.getElementById('phone').value.trim();
if (phone === '') {
valid = false;
document.getElementById('phoneError').textContent = 'Phone number is required.';
} else if (!validatePhone(phone)) {
valid = false;
document.getElementById('phoneError').textContent = 'Please enter a valid phone number.';
}

if (valid) {
alert('Form submitted successfully!');}});
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());}
function validatePhone(phone) {
const re = /^\d{10}$/;
return re.test(String(phone));
OUTPUT

You might also like