Scribd
Upload
15 views13 pages

Assignment 1 22BCE10697

new45

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
15 views13 pages

Assignment 1 22BCE10697

new45

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/ 13

Assignment 1

Internet and Web Programming


Abhinav Jain - 22BCE10697
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>

</head>

<body>

<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.

<html >

<head>

<title>Matrix Transpose</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

.container {

background: white;

padding: 20px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

border-radius: 10px;

text-align: center;

form {

margin-bottom: 20px;

input[type="number"] {

margin: 10px;

padding: 5px;
width: 50px;

button {

padding: 10px 20px;

margin-top: 20px;

#matrixInput {

margin-top: 20px;

#matrixInput input {

width: 50px;

padding: 5px;

margin: 5px;

#result {

margin-top: 20px;

</style>

</head>

<body>

<div class="container">

<h1>Matrix Transpose</h1>

<form id="matrixForm">

<label for="rows">Rows:</label>

<input type="number" id="rows" name="rows" min="1" required>

<label for="columns">Columns:</label>

<input type="number" id="columns" name="columns" min="1" required>

<button type="button" onclick="generateMatrix()">Generate Matrix</button>

</form>

<div id="matrixInput"></div>

<button id="transposeButton" onclick="transposeMatrix()"


style="display:none;">Transpose Matrix</button>
<div id="result"></div>

</div>

<script>

function generateMatrix() {

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

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

const matrixInputDiv = document.getElementById('matrixInput');

matrixInputDiv.innerHTML = '';

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

for (let j = 0; j < columns; j++) {

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

input.type = 'number';

input.id = `matrix-${i}-${j}`;

input.required = true;

matrixInputDiv.appendChild(input);

matrixInputDiv.appendChild(document.createElement('br'));

document.getElementById('transposeButton').style.display = 'inline-block';

function transposeMatrix() {

const rows = parseInt(document.getElementById('rows').value);

const columns = parseInt(document.getElementById('columns').value);

let matrix = [];

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

let row = [];

for (let j = 0; j < columns; j++) {

row.push(parseInt(document.getElementById(`matrix-${i}-${j}`).value));

matrix.push(row);
}

let transposedMatrix = [];

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

let row = [];

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

row.push(matrix[j][i]);

transposedMatrix.push(row);

displayResult(transposedMatrix);

function displayResult(matrix) {

const resultDiv = document.getElementById('result');

resultDiv.innerHTML = '<h2>Transposed Matrix:</h2>';

for (let i = 0; i < matrix.length; i++) {

resultDiv.innerHTML += matrix[i].join(' ') + '<br>';

</script>

</body>

</html>
OUTPUT

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


JavaScript.

<html>

<head>

<title>Hospital Registration Form</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;
}

.container {

background: white;

padding: 20px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

border-radius: 10px;

text-align: left;

width: 400px;

.container h1 {

text-align: center;

form {

display: flex;

flex-direction: column;

label {

margin-top: 10px;

input, select {

margin-top: 5px;

padding: 10px;

font-size: 16px;

button {

padding: 10px 20px;

margin-top: 20px;
font-size: 16px;

cursor: pointer;

background-color: #007BFF;

color: white;

border: none;

border-radius: 5px;

.error {

color: red;

font-size: 14px;

margin-top: 5px;

</style>

</head>

<body>

<div class="container">

<h1>Hospital Registration Form</h1>

<form id="registrationForm">

<label for="name">Full Name:</label>

<input type="text" id="name" name="name">

<div id="nameError" class="error"></div>

<label for="age">Age:</label>

<input type="number" id="age" name="age">

<div id="ageError" class="error"></div>

<label for="gender">Gender:</label>

<select id="gender" name="gender">

<option value="">Select Gender</option>

<option value="male">Male</option>

<option value="female">Female</option>

<option value="other">Other</option>
</select>

<div id="genderError" class="error"></div>

<label for="phone">Phone Number:</label>

<input type="text" id="phone" name="phone">

<div id="phoneError" class="error"></div>

<label for="email">Email:</label>

<input type="email" id="email" name="email">

<div id="emailError" class="error"></div>

<label for="address">Address:</label>

<input type="text" id="address" name="address">

<div id="addressError" class="error"></div>

<button type="button" onclick="validateForm()">Register</button>

</form>

</div>

<script>

function validateForm() {

let isValid = true;

// Validate Full Name

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

const nameError = document.getElementById('nameError');

if (name === '') {

nameError.textContent = 'Full Name is required';

isValid = false;

} else {

nameError.textContent = '';

// Validate Age
const age = document.getElementById('age').value;

const ageError = document.getElementById('ageError');

if (age === '' || isNaN(age) || age <= 0) {

ageError.textContent = 'Please enter a valid age';

isValid = false;

} else {

ageError.textContent = '';

// Validate Gender

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

const genderError = document.getElementById('genderError');

if (gender === '') {

genderError.textContent = 'Gender is required';

isValid = false;

} else {

genderError.textContent = '';

// Validate Phone Number

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

const phoneError = document.getElementById('phoneError');

const phonePattern = /^[0-9]{10}$/;

if (!phonePattern.test(phone)) {

phoneError.textContent = 'Please enter a valid 10-digit phone number';

isValid = false;

} else {

phoneError.textContent = '';

// Validate Email

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

const emailError = document.getElementById('emailError');


const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailPattern.test(email)) {

emailError.textContent = 'Please enter a valid email address';

isValid = false;

} else {

emailError.textContent = '';

// Validate Address

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

const addressError = document.getElementById('addressError');

if (address === '') {

addressError.textContent = 'Address is required';

isValid = false;

} else {

addressError.textContent = '';

if (isValid) {

alert('Registration Successful!');

</script>

</body>

</html>
OUTPUT

You might also like