Scribd
Upload
12 views

Experiment 1

Code

Uploaded by

archuatul2012
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
12 views

Experiment 1

Code

Uploaded by

archuatul2012
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/ 44

NAME: ROHITHA S USN:21BTRCL132

EXPERIMENT 1

AIM: To Create a website using basic HTML tags.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My web page</title>
</head>
<body>

<header>
<h1><center>BTS</center></h1>
</header>

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>

<section id="about">
<h2>About Me</h2>
<p>BTS, an acronym of Bangtan Sonyeondan or “Beyond the Scene,” is a
Grammy-nominated South Korean group that has been capturing the hearts of
millions of fans globally since its debut in June 2013.
The members of BTS are RM, Jin, SUGA, j-hope, Jimin, V, and Jung
Kook. Gaining recognition for their authentic and self-produced music, top-
notch performances, and the way they interact with their fans, BTS has
established themselves as “21st century Pop Icons” breaking countless world
records. While imparting a positive influence through activities such as the
LOVE MYSELF campaign and the UN ‘Speak Yourself’ speech, the band has
mobilized millions of fans across the world (named ARMY), collected four No. 1
songs in a span of 9 months, performed multiple sold-out stadium shows across
the world, and been named TIME’s Entertainer of the Year 2020.</p>
</section>

<section>
<h2>The Band</h2>
<center><img
src="https://ibighit.com/bts/images/profile/proof/member/bts-m.jpg" alt="bts
image"></center>
</sectio

1
NAME: ROHITHA S USN:21BTRCL132

<section id="services">
<h2>Influence</h2>
<p>In 2019, BTS had been estimated to have revitalized the Korean
music industry and have a 1-2% effect upon the entire Korean economy, in
addition to its international influences.[157] Credited for the surge in
popularity of online purchases of K-pop items[158] and the growth of the
Korean Wave between 2016 and 2018 by the Korea Customs Service and Korea
Foundation,[159] BTS were cited as one of the main driving forces for the
recovery of South Korea's music-related sector to levels seen before China's
2016 ban on domestic cultural contents over soured diplomatic relations.</p>
</section>

<section id="contact">
<h2>Contact Me</h2>
<p><mail>[email protected]</mail></p>
</section>
<footer align="center">
<p>&copy; 2023 bts. All rights reserved.</p>
</footer>

</body>
</html>

OUTPUT:

2
NAME: ROHITHA S USN:21BTRCL132

EXPERIMENT 2

AIM: To Create a website with advanced HTML tags.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mobile page</title>
</head>
<body>
<h2 align="center">IPHONE WORLD</h2>
<p align="center">**********************************</p>
<h3 align="center">Happy shopping</h3>
<br><br>
<hr>
<marquee behavior="" direction="">Online offers</marquee>
<hr>
<br><br>
<center> <img src="https://www.91-cdn.com/hub/wp-
content/uploads/2023/11/iPhone-14.png" alt="phone fest" width="50%"
height="400px"></center>
<br><br>
<a href="./phone1.html"><img
src="https://lh3.googleusercontent.com/spp/ABYooDoK7aiNBi8BzCzDVFRYK3RfjH7Fgr2
ExRXt_2igIUaIKfJJPmQLF-HpSaSXFE1il4WZXlQyxg3-
IawFxjF_6X1jTMxTgIn0h4CxGHSkISsKvrElejB3CtL1W7kwEyXJ2M0n4AnDCbTr8YGN3OWDZWqz2p
0EnyjHQu28ls7tkXLXDXfqr9IEfLIIYZ7bzpRAmt65Z439Ck0=s512-rw-pd-pc0x00ffffff"
height="400"
width="400"></a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&n
bsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;
<a href="./phone2.html"><img
src="https://cdn.palbincdn.com/users/17333/images/51b36a3063e54d30a626a3b2e0ba
4b3ee4535556_800_800-1676215108.jpg" height = "400"
width="400"></a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&n
bsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;
<a href="./phone3.html"><img src="https://sp-
ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_700,h_700/https://sotelefon
es.com/wp-content/uploads/2021/11/iphone_13_starlight_pdp_image_position-
1a_en-768x768.jpg" height="400" width =
"400"></a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nb
sp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;

<br><br>

3
NAME: ROHITHA S USN:21BTRCL132

<address align="center">27th Main Rd, Jayanagar 9th Block, Bengaluru -


560049</address>
<address align="center">Contact number: <a href="">080 2311
1845</a></address>
</body>
</html>

OUTPUT:

4
NAME: ROHITHA S USN:21BTRCL132

EXPERIMENT 3

Aim: To Create a personal website with style properties using Inline, internal and external
CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Program 3</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color:rgb(76, 17, 76);
color: #eadcdc;
}

header {
background-color:black;
color: #fff;
text-align: center;
padding: 20px;
}

header h1 {
margin: 0;
}

section {
color: black;
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
text-align: center;
padding: 10px;
background-color:black;
color: #fff;
position: fixed;
bottom: 0;

5
NAME: ROHITHA S USN:21BTRCL132

width: 100%;
}

</style>
</head>
<body>

<header>
<h1>Rohitha S</h1>
<p>Welcome to my personal website!</p>
</header>

<section id="about">
<h2>About Me</h2>
<p>I'm an enthusiastic Computer Science student with a passion for Data
science who focuses on Artificial Intelligence and Machine Learning.
My passion is sifting through complex data to find patterns, and I want
to use AI and ML to solve problems in the real world. I'm committed to
lifelong learning and being on the cutting edge of the rapidly developing
Data science field because I want to have a significant effect in this
fascinating area.</p>
</section>

<section id="skills">
<h2>Skills</h2>
<ul>
<li>Web Development</li>
<li>Python</li>
<li>Problem Solving</li>
<li>SQL</li>
<li>Problem Solving</li>
<li>Data-Driven Insights</li>
<li>Networking</li>
</ul>
</section>

<section id="contact">
<h2>Contact Me</h2>
<p>Email: [email protected]</p>
</section>

<footer>
<p>&copy; 2023 rohitha. All rights reserved.</p>
</footer>

</body>
</html>

OUTOOOO

6
NAME: ROHITHA S USN:21BTRCL132

o OUTPUT:

7
NAME: ROHITHA S USN:21BTRCL132

EXPERIMENT 4

Aim: To Create a website with the use of HTML and advanced CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Advanced CSS Website</title>
<link rel="stylesheet" href="styles.css">
<style>body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

nav {
background-color: #333;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}

.logo {
font-size: 1.5em;
font-weight: bold;
}

.nav-links {
list-style: none;
display: flex;
}

.nav-links li {
margin-right: 20px;
}

.nav-links a {
text-decoration: none;
color: white;
transition: color 0.3s ease-in-out;

8
NAME: ROHITHA S USN:21BTRCL132

.nav-links a:hover {
color: #ffd700;
}

.main-section {
padding: 50px;
text-align: center;
}

form {
display: flex;
flex-direction: column;
max-width: 300px;
margin: auto;
}

form label, form input, form button {


margin-bottom: 10px;
}

button {
padding: 10px;
background-color: #333;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}

button:hover {
background-color: #ffd700;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<nav>
<div class="logo">Capabl</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>

9
NAME: ROHITHA S USN:21BTRCL132

<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<section id="home" class="main-section">


<h1>Welcome to Capabl</h1>
<p>Where Enigineering Students become Industry Capabl.</p>
</section>

<section id="about" class="main-section">


<h2>About Us</h2>
<p>Our team at Capabl is on a mission to create a world-class
engineering learning ecosystem with Students, Industry, and Colleges
considering the limitations and the complex Indian engineering education
system. And this innovative ecosystem goes hand in hand with the current
college education system - elevating it rather than challenging it.</p>
</section>

<section id="services" class="main-section">


<h2>Services</h2>
<ul>
<li>Web Design</li>
<li>Front-end Development</li>
<li>Responsive Layouts</li>
</ul>
</section>

<section id="contact" class="main-section">


<h2>Contact Me</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<button type="submit">Submit</button>
</form>
</section>

<footer>
<p>&copy; copyright © 2023 ETG Career Labs Pvt Ltd.</p>
</footer>

</body>
</html>

10
NAME: ROHITHA S USN:21BTRCL132

Output:

11
NAME: ROHITHA S USN:21BTRCL132

Experiment 5

Aim: Create a personal web site with minimum 4 web pages using HTML tags and use Scientific
calculator for the webpage using JavaScript.

<!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>
<link rel="stylesheet" href="styles.css">
<style>

body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}

.calculator {
text-align: center;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"] {
width: 80%;
padding: 10px;
font-size: 18px;
margin-bottom: 10px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

12
NAME: ROHITHA S USN:21BTRCL132

button {
width: 100%;
height: 50px;
font-size: 18px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #ddd;
}

</style>
</head>
<body>
<div class="calculator">
<h1>Simple Calculator</h1>
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="addToDisplay('1')">1</button>
<button onclick="addToDisplay('2')">2</button>
<button onclick="addToDisplay('3')">3</button>
<button onclick="addToDisplay('+')">+</button>

<button onclick="addToDisplay('4')">4</button>
<button onclick="addToDisplay('5')">5</button>
<button onclick="addToDisplay('6')">6</button>
<button onclick="addToDisplay('-')">-</button>

<button onclick="addToDisplay('7')">7</button>
<button onclick="addToDisplay('8')">8</button>
<button onclick="addToDisplay('9')">9</button>
<button onclick="addToDisplay('*')">*</button>

<button onclick="clearDisplay()">C</button>
<button onclick="addToDisplay('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="addToDisplay('/')">/</button>
</div>
</div>

<script>
function addToDisplay(value) {
document.getElementById("display").value += value;
}

13
NAME: ROHITHA S USN:21BTRCL132

function clearDisplay() {
document.getElementById("display").value = "";
}

function calculate() {
try {
const result = eval(document.getElementById("display").value);
if (Number.isFinite(result)) {
document.getElementById("display").value = result;
} else {
document.getElementById("display").value = "Error";
}
} catch (error) {
document.getElementById("display").value = "Error";
}
}

</script>
</body>
</html>

OUTPUT:

14
NAME: ROHITHA S USN:21BTRCL132

15
NAME: ROHITHA S USN:21BTRCL132

EXPERIMENT 6

Aim: Create a static website using HTML, CSS and use validation for registration and login form
using JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static Website with Form Validation</title>
<Style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}

.container {
display: flex;
justify-content: space-around;
width: 80%;
}

.form-container {
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
}

input {
padding: 10px;

16
NAME: ROHITHA S USN:21BTRCL132

margin-bottom: 10px;
}

button {
padding: 10px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #2980b9;
}

</Style>
</head>
<body>
<div class="container">
<div class="form-container">
<h1>Registration</h1>
<form id="registrationForm"
onsubmit="validateRegistration(event)">
<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>

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword"
name="confirmPassword" required>

<button type="submit">Register</button>
</form>
</div>

<div class="form-container">
<h1>Login</h1>
<form id="loginForm" onsubmit="validateLogin(event)">
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" name="loginUsername"
required>

<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" name="loginPassword"
required>

17
NAME: ROHITHA S USN:21BTRCL132

<button type="submit">Login</button>
</form>
</div>
</div>

<script>
function validateRegistration(event) {
event.preventDefault();

const username = document.getElementById("username").value;


const password = document.getElementById("password").value;
const confirmPassword =
document.getElementById("confirmPassword").value;

if (password !== confirmPassword) {


alert("Passwords do not match");
return;
}

alert(`Registration Successful!\nUsername: ${username}`);


}

function validateLogin(event) {
event.preventDefault();

const loginUsername =
document.getElementById("loginUsername").value;
const loginPassword =
document.getElementById("loginPassword").value;

alert(`Login Successful!\nUsername: ${loginUsername}`);


}
</script>
</body>
</html>

OUTPUT:

18
NAME: ROHITHA S USN:21BTRCL132

19
NAME: ROHITHA S USN:21BTRCL132

EXPERIMENT 7

Aim: Create a Webpage using HTML, CSS, JavaScript that contains a text field,
when the name is inserted into the field and submitted, it will be displayed in all
linking webpages.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Name Webpage</title>
<STYLE>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #151414;
}

.container {
text-align: center;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
}

input {
padding: 10px;
margin-bottom: 10px;
}

20
NAME: ROHITHA S USN:21BTRCL132

button {
padding: 10px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #2980b9;
}

a {
display: block;
margin-top: 10px;
text-decoration: none;
color: #3498db;
}

</STYLE>
</head>
<body>
<div class="container">
<h1> Name Webpage</h1>
<form onsubmit="saveName(event)">
<label for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" required>
<button type="submit">Submit</button>
</form>
</div>

<script>// script.js
function saveName(event) {
event.preventDefault();
const name = document.getElementById('nameInput').value;
localStorage.setItem('sharedName', name);
window.location.reload();
}

function getSharedName() {
const sharedName = localStorage.getItem('sharedName');
return sharedName || 'No name submitted yet.';
}

document.addEventListener('DOMContentLoaded', function () {
const displayedNameElements =
document.querySelectorAll('#displayedName');

21
NAME: ROHITHA S USN:21BTRCL132

displayedNameElements.forEach(function (element) {
element.textContent = getSharedName();
});
});
</script>
</body>
</html>

Page 1:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page 1</title>
<STYLE>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #101010;
}

.container {
text-align: center;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
}

input {
padding: 10px;

22
NAME: ROHITHA S USN:21BTRCL132

margin-bottom: 10px;
}

button {
padding: 10px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #2980b9;
}

a {
display: block;
margin-top: 10px;
text-decoration: none;
color: #3498db;
}
</STYLE>
</head>
<body>
<div class="container">
<h1>Welcome to Page 1</h1>
<p id="displayedName">No name submitted yet.</p>
<a href="exp 7.html">Go back to Home</a>
</div>

<script>
function saveName(event) {
event.preventDefault();
const name = document.getElementById('nameInput').value;
localStorage.setItem('sharedName', name);
window.location.reload();
}

function getSharedName() {
const sharedName = localStorage.getItem('sharedName');
return sharedName || 'No name submitted yet.';
}

document.addEventListener('DOMContentLoaded', function () {
const displayedNameElements =
document.querySelectorAll('#displayedName');
displayedNameElements.forEach(function (element) {

23
NAME: ROHITHA S USN:21BTRCL132

element.textContent = getSharedName();
});
});
</script>
</body>
</html>

Page 2:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page 2</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #181717;
}

.container {
text-align: center;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
}

input {
padding: 10px;
margin-bottom: 10px;

24
NAME: ROHITHA S USN:21BTRCL132

button {
padding: 10px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #2980b9;
}

a {
display: block;
margin-top: 10px;
text-decoration: none;
color: #3498db;
}

</style>
</head>
<body>
<div class="container">
<h1>Welcome to Page 2</h1>
<p id="displayedName">No name submitted yet.</p>
<a href="exp 7.html">Go back to Home</a>
</div>

<script>

function saveName(event) {
event.preventDefault();
const name = document.getElementById('nameInput').value;
localStorage.setItem('sharedName', name);
window.location.reload();
}

function getSharedName() {
const sharedName = localStorage.getItem('sharedName');
return sharedName || 'No name submitted yet.';
}

document.addEventListener('DOMContentLoaded', function () {
const displayedNameElements = document.querySelectorAll('#displayedName');
displayedNameElements.forEach(function (element) {

25
NAME: ROHITHA S USN:21BTRCL132

element.textContent = getSharedName();
});
});

</script>
</body>
</html>

OUTPUT:

26
NAME: ROHITHA S USN:21BTRCL132

27
NAME: ROHITHA S USN:21BTRCL132

EXPERIMENT 8

Aim:
Create a website that collects the first name, last name, email, user id, and
password and confirms password from the user. All the inputs are mandatory and the
email address entered should be incorrect format. Also, the values entered in the
password and confirm password text boxes should be the same. After validating
using JavaScript, In output display proper error messages in red color just next to the
textbox where there is an error.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color:black;

form,h1 {
width: 300px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
color:black;
}

label {
display: block;
margin-bottom: 8px;
}

input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}

28
NAME: ROHITHA S USN:21BTRCL132

.error {
color: red;
font-size: 14px;
margin-top: -8px;
margin-bottom: 16px;
}

button {
background-color: #4caf50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1> User Registration Form</h1>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>

<label for="lastName">Last Name:</label>


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

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="userId">User ID:</label>


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

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword" name="confirmPassword"
required>

<button type="submit">Register</button><br><br>
</form>

<script>
function validateForm() {

clearErrors();

29
NAME: ROHITHA S USN:21BTRCL132

let isValid = true;

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


if (!isValidName(firstName)) {
displayError('firstName', 'Invalid first name');
isValid = false;
}

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


if (!isValidName(lastName)) {
displayError('lastName', 'Invalid last name');
isValid = false;
}

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


if (!isValidEmail(email)) {
displayError('email', 'Invalid email address');
isValid = false;
}

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


if (!isValidUserId(userId)) {
displayError('userId', 'Invalid user ID');
isValid = false;
}

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


if (!isValidPassword(password)) {
displayError('password', 'Invalid password');
isValid = false;
}

const confirmPassword =
document.getElementById('confirmPassword').value;
if (password !== confirmPassword) {
displayError('confirmPassword', 'Passwords do not match');
isValid = false;
}

return isValid;
}

function isValidName(name) {
return /^[a-zA-Z]+$/.test(name);
}

function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

30
NAME: ROHITHA S USN:21BTRCL132

function isValidUserId(userId) {
return /^[a-zA-Z0-9]+$/.test(userId);
}

function isValidPassword(password) {
return password.length >= 8;
}

function displayError(elementId, errorMessage) {


const errorElement = document.createElement('p');
errorElement.className = 'error';
errorElement.textContent = errorMessage;
document.getElementById(elementId).parentNode.appendChild(errorEle
ment);
}

function clearErrors() {
const errorElements = document.querySelectorAll('.error');
errorElements.forEach(element =>
element.parentNode.removeChild(element));
}
</script>
</body>
</html>

OUTPUT:

31
NAME: ROHITHA S USN:21BTRCL132

32
NAME: ROHITHA S USN:21BTRCL132

EXPERIMENT 9

Aim: Design an XML document to store information about a student in Jain University.
Create a CSS style sheet and use it to display the document.

XML:

<?xml version="1.0" encoding="UTF-8"?>


<?xml-stylesheet type="text/css" href="info.css"?>
<student>
<s1>
<name>Rohitha S</name>
<age>20</age>
<gender>Male</gender>
<university>Jain University</university>
<course>CSE AIML</course>
<semester>5</semester>
</s1>
</student>

CSS:

s1{
display:block;
border: 1px solid silver;
margin:0.5em;
padding:0.5em;
background-color:whitesmoke;
}
name,course{
font-weight:bold;
color:rgb(27, 27, 27);
}
name,age,gender,university,course,semester {
display:block;
text-align:center;
font-size:50px;
}

33
NAME: ROHITHA S USN:21BTRCL132

OUTPUT:

34
NAME: ROHITHA S USN:21BTRCL132

EXPERIMENT 10

Aim: Perform Form Handling using PHP and front end using React on the webpage.

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Josefin+Sans:wght@400;600&family=Poppins&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Home | Digimobi</title>
</head>

<body>
<header>
<h1><a href="./index.html">Digimobi</a></h1>
<nav>
<ul>
<li><a class="nav-links" href="./index.html">Home</a></li>
<li><a class="nav-links" href="./all-mobiles.html">Allmobiles</a></li>
<li><a class="nav-links" href="./contact-us.php">Contact us</a></li>
<li><a class="nav-links" href="./about-us.html">About</a></li>
</ul>
</nav>
</header>

<main>

<section class="popular">
<h2><u>Popular right now</u></h2>
<video src="./assets/popular.mp4" autoplay loop muted></video>
</section>

<div class="featured-products-container">
<section class="featured-products">
<h2>Featured products</h2>
<div>

35
NAME: ROHITHA S USN:21BTRCL132

<article class="product">
<img src="./assets/galaxym02s.webp" alt="Samsung Galaxy M02s">
<h4>Samsung Galaxy M02s</h4>
<button class="buy-btn">Buy Now</button>
</article>
<article class="product">
<img src="./assets/oneplus9.webp" alt="OnePlus 9 5G">
<h4>OnePlus 9 5G</h4>
<button class="buy-btn">Buy Now</button>
</article>
<article class="product">
<img src="./assets/oppoa31.webp" alt="Oppo A31">
<h4>Oppo A31</h4>
<button class="buy-btn">Buy Now</button>
</article>
<article class="product">
<img src="./assets/redmi9a.webp" alt="Redmi 9A">
<h4>Redmi 9A</h4>
<button class="buy-btn">Buy Now</button>
</article>
<article class="product">
<img src="./assets/iphone11.webp" alt="Apple iPhone 11">
<h4>Apple iPhone 11</h4>
<button class="buy-btn">Buy Now</button>
</article>
<article class="product">
<img src="./assets/galaxym31.webp" alt="Samsung Galaxy M31">
<h4>Samsung Galaxy M31</h4>
<button class="buy-btn">Buy Now</button>
</article>
</div>
</section>

<aside>
<h3>Today's pick</h3>
<article class="product">
<img src="./assets/iphone12.webp" alt="Apple iPhone 12">
<h4>Apple iPhone 12</h4>
<button class="buy-btn special">Buy Now</button>
</article>
</aside>
</div>
</main>

<footer>
<h5>Digimobi</h5>
<address>4184 Saint Marys Avenue,<br> Vernon, New York, <br>
13476, USA

36
NAME: ROHITHA S USN:21BTRCL132

</address>
<p>Build by Snigdha V &copy; 2023 Digimobi, Inc</p>
</footer>
</body>
</html>

Contact-us.php

<?php
$errors = ["name" => "", "email" => "", "number" => "", "gender" => "",
"model" => "", "complaint" => "", "agree" => ""];
$name = $email = $number = $gender = $model = $complaint = $agree = "";
$models = [
"Apple iPhone 12", "Samsung Galaxy M02s", "OnePlus 9 5G", "Oppo A31",
"Redmi 9A", "Apple iPhone 11", "Samsung Galaxy M31",
"Samsung Galaxy 10+", "Realme C31", "Redmi 9A prime", "Redmi note 10"
];

function input_data($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}

if (isset($_POST['submit']))
{
if (empty($_POST["name"])) {
$errors["name"] = "Name is required";
}
else {
$name = input_data($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/", $name))
{
$errors["name"] = "Only alphabets and white space are
allowed";
}
}

// email validation
if (empty($_POST['email'])) {
$errors["email"] = 'An email is required';
}
else {
$email = input_data($_POST['email']);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors["email"] = "Email must be a valid email address";

37
NAME: ROHITHA S USN:21BTRCL132

}
}

// mobile number validation


if (empty($_POST["number"])){
$errors["number"] = "Mobile no is required";
}
else {
$number = input_data($_POST["number"]);
// check if mobile no is well-formed
if (!preg_match("/^[0-9]*$/", $number)) {
$errors["number"] = "Only numeric value is allowed.";
}
//check mobile no length should not be less and greator than 10
if (strlen($number) != 10) {
$errors["number"] = "Mobile no must contain 10 digits.";
}
}

// gender validation
if (empty($_POST["gender"])) {
$errors["gender"] = "Gender is required";
}
else {
$gender = input_data($_POST["gender"]);

if (!$gender == "male" || !$gender == "female") {


$errors["gender"] = "Gender is male or female";
}
}

// model validation
if (empty($_POST["model"])) {
$errors["model"] = "Choose a phone model";
}
else {
$model = input_data($_POST["model"]);

if (!in_array($model, $models)) {
$errors["model"] = "Choose the correct model from thecatalog";
}
}

// complaint validation
if (empty($_POST["complaint"])) {
$errors["complaint"] = "Complaint is required";
}

38
NAME: ROHITHA S USN:21BTRCL132

else {
$complaint = input_data($_POST["complaint"]);
}

// agree validation
if (!isset($_POST['agree'])) {
$errors["agree"] = "Accept terms of services before submit.";
}
else {
$agree = input_data($_POST["agree"]);
}
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Josefin+Sans:wght@400;600&family=Poppins&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Contact Us | Digimobi</title>
</head>

<body>
<header>
<h1><a href="./index.html">Digimobi</a></h1>
<nav>
<ul>
<li><a class="nav-links" href="./index.html">Home</a></li>
<li><a class="nav-links" href="./all-mobiles.html">Allmobiles</a></li>
<li><a class="nav-links" href="./contact-us.php">Contact us</a></li>
<li><a class="nav-links" href="./about-us.html">About</a></li>
</ul>
</nav>
</header>

<main>

<?php
if (isset($_POST['submit']) && !array_filter($errors)) {
?>
<h2>Success!</h2>

39
NAME: ROHITHA S USN:21BTRCL132

<h3>Report</h3>
<p><strong>Name:</strong> <?php echo $name ?></p>
<p><strong>Email:</strong> <?php echo $email ?></p>
<p><strong>Number:</strong> <?php echo $number ?></p>
<p><strong>Gender:</strong> <?php echo $gender ?></p>
<p><strong>Phone </strong>Model: <?php echo $model ?></p>
<p><strong>Complaint:</strong> <?php echo $complaint ?></p>
<?php
} else {
?>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>">
<fieldset>
<legend>Fill the following form to for complaints</legend>

<label for="name">Name</label>
<input type="text" name="name" id="name" class="input-text">
<span class="error"><?php echo $errors["name"]; ?></span>

<label for="email">Email</label>
<input type="email" name="email" id="email" class="input-text">
<span class="error"><?php echo $errors["email"]; ?></span>

<label for="number">Phone no.</label>


<input type="text" name="number" id="number" class="input-text"
maxlength="10">
<span class="error"><?php echo $errors["number"]; ?></span>

<p>Select gender</p>
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>
<span class="error"><?php echo $errors["gender"]; ?></span>

<label for="model">Which phone model is the complainton?</label>


<input list="phone-model" name="model" id="model"class="input-text"
/>
<span class="error"><?php echo $errors["model"]; ?></span>

<datalist id="phone-model">
<option value="Apple iPhone 12"></option>
<option value="Samsung Galaxy M02s"></option>
<option value="OnePlus 9 5G"></option>
<option value="OppoA31"></option>
<option value="Redmi9A"></option>
<option value="Apple iPhone 11"></option>
<option value="Samsung GalaxyM31"></option>
<option value="Samsung Galaxy10+"></option>

40
NAME: ROHITHA S USN:21BTRCL132

<option value="Realme C31"></option>


<option value="Redmi 9A"></option>
<option value="Redmi 9A prime"></option>
<option value="Redmi note 10"></option>
</datalist>

<label for="complaint">Complaint</label>
<textarea name="complaint" id="complaint"></textarea>
<span class="error"><?php echo $errors["complaint"]; ?></span>

<label for="agree" class="choice">Agree to T&C</label>


<input type="checkbox" name="agree" id="agree">
<span class="error"><?php echo $errors["agree"]; ?></span>

<button name="submit" type="submit">Submit</button>


</fieldset>
</form>
<?php } ?>
</main>
<footer>
>

41
NAME: ROHITHA S USN:21BTRCL132

Output:

42
NAME: ROHITHA S USN:21BTRCL132

Experiment 11

Aim: Implement sessions and cookies to store information to be used across multiple Web Pages
for website using PHP.
Cookies.php
<!DOCTYPE html>
<?php
$cookie_name = "user";
$cookie_value = "Rohitha";
setcookie($cookie_name, $cookie_value);
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}
echo("<br>Above is implementation of cookies using PHP");
?>
</body>
</html>

Session.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
$_SESSION["favcolor"] = "purple";
$_SESSION["favanimal"] = "dog";
echo "Session variables are set.";
?>
</body>
</html>

Session1.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>

43
NAME: ROHITHA S USN:21BTRCL132

<body>
<?php
echo "Favorite color is
" . $_SESSION["favcolor"] . ".<br>";
echo "Favorite animal is
" . $_SESSION["favanimal"] . ".";
?>
</body>
</html>

OUTPUT:

44

You might also like