FILENAME:FRAME.
HTML
<html>
<head>
<title>Three Frames Layout</title>
</head>
<frameset rows="20%, 80%">
<frame src="top.html" name="topFrame">
<frameset cols="30%, 70%">
<frame src="left.html" name="leftFrame">
<frame src="right.html" name="rightFrame">
</frameset>
</frameset>
</html>
FILE:LEFT.HTML
<!DOCTYPE html>
<html>
<head>
<title>Leftframe</title>
</head>
<body>
<ul>
<li><a href="cse.html">CSE</a></li>
<li><a href="ece.html">ECE</a></li>
<li><a href="mech.html">MECH</a></li>
<li><a href="civil.html">CIVIL</a></li>
</ul>
</body>
</html>
FILE: Right.html
<html >
<head>
<title>Welcome to Book Store</title>
<h2>About Us</h2>
<p>At Book Haven, we believe that books are windows to new worlds.
Our bookstore offers a wide selection of books across various genres, from
timeless classics to the latest bestsellers. Whether you're a passionate reader
or just looking for your next great adventure, you'll find something that suits
your taste. Our team is dedicated to providing you with an exceptional
shopping experience and offering expert recommendations to help you
discover your next favorite read. Explore our collection and get lost in the
pages of your next great book!</p>
</body>
</html>
FILE:home.html
<!DOCTYPE html>
<html lang="en">
<head>
<h1>Welcome to Our Engineering Departments</h1>
<p>Discover our diverse range of engineering disciplines, each designed
to equip students with the knowledge and skills to excel in their chosen
fields.</p>
<div class="section" id="cse">
<h2>Computer Science and Engineering (CSE)</h2>
<p>The CSE department focuses on cutting-edge technologies,
programming, and software development. Our students explore artificial
intelligence, machine learning, data science, and cloud computing, preparing
them for the digital future.</p>
</div>
<div class="section" id="ece">
<h2>Electronics and Communication Engineering (ECE)</h2>
<p>The ECE department emphasizes electronics, communication
systems, and embedded technologies. Students gain expertise in signal
processing, IoT, and VLSI design, building a foundation for innovation in
modern electronics.</p>
</div>
<div class="section" id="mech">
<h2>Mechanical Engineering</h2>
<p>The Mechanical Engineering department delves into the principles
of mechanics, thermodynamics, and robotics. With a focus on manufacturing,
automation, and energy systems, students are ready to tackle challenges in the
industrial sector.</p>
</div>
<div class="section" id="civil">
<h2>Civil Engineering</h2>
<p>The Civil Engineering department prepares students to design and
build infrastructure that shapes the world. With expertise in structural
engineering, environmental systems, and sustainable development, graduates
contribute to society's growth.</p>
</div>
</div>
</body>
</html>
FILE:Login.html
<!DOCTYPE html>
<html >
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login Page</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Sign In</button>
<button type="reset">Clear</button><br><br>
<a href="#">Forgot Password</a><br>
<a href="#">Registration Page</a>
</form>
</body>
</html>
File:Registartion.html
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<style>
body {
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form action="submit_registration.php" method="post">
<label for="name">Name:</label></br>
<input type="text" id="name" name="name" placeholder="Enter your
full name" required></br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Enter your password" required></br>
<label for="email">Email:</label></br>
<input type="email" id="email" name="email" placeholder="Enter your
email" required></br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="Enter your
phone number" required></br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required></br>
<label for="language">Language Known:</label>
<select id="language" name="language" required>
<option value="">Select a language</option>
<option value="English">English</option>
<option value="Hindi">Hindi</option>
<option value="Telugu">Telugu</option>
<option value="Other">Other</option>
</select></br>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" placeholder="Enter
your address" required></textarea>
<div class="button-group">
<button type="submit">Submit</button></br>
<button type="reset" class="reset">Reset</button>
</div>
</form>
</div>
</body>
</html>
File:catalog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookstore</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
table {
width: 90%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: left;
vertical-align: middle;
}
th {
background-color: #e0e0e0;
}
h2 {
text-align: center;
margin-top: 30px;
}
button {
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.book-image {
width: 50px;
height: auto;
}
</style>
</head>
<body>
<h2>Computer Science and Engineering</h2>
<table id="cs-table">
<tr>
<th>Image</th>
<th>Details</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> xml bible<br>
<strong>Author:</strong> winston<br>
<strong>Publication:</strong> wiely
</td>
<td>$40.5</td>
<td><button onclick="addToCart('xml bible', 40.5)">Add to
cart</button></td>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> ai<br>
<strong>Author:</strong> s.russel<br>
<strong>Publication:</strong> princeton hall
</td>
<td>$63</td>
<td><button onclick="addToCart('ai', 63)">Add to cart</button></td>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> java 2<br>
<strong>Author:</strong> watson<br>
<strong>Publication:</strong> bpb publications
</td>
<td>$35.5</td>
<td><button onclick="addToCart('java 2', 35.5)">Add to
cart</button></td>
</tr>
</table>
<h2>Electrical and Electronics Engineering</h2>
<table id="ee-table">
<tr>
<th>Image</th>
<th>Details</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> edc<br>
<strong>Author:</strong> winston<br>
<strong>Publication:</strong> wiely
</td>
<td>$40.5</td>
<td><button onclick="addToCart('edc', 40.5)">Add to cart</button></td>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> satellite communication<br>
<strong>Author:</strong> sat<br>
<strong>Publication:</strong> Princeton hall
</td>
<td>$63</td>
<td><button onclick="addToCart('satellite communication', 63)">Add to
cart</button></td>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> antennas<br>
<strong>Author:</strong> watson<br>
<strong>Publication:</strong> bpb publications
</td>
<td>$35.5</td>
<td><button onclick="addToCart('antennas', 35.5)">Add to
cart</button></td>
</tr>
</table>
<h2>Civil Engineering</h2>
<table id="ce-table">
<tr>
<th>Image</th>
<th>Details</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> federals of civil procedure<br>
<strong>Author:</strong> winston<br>
<strong>Publication:</strong> wiely
</td>
<td>$40.5</td>
<td><button onclick="addToCart('federals of civil procedure', 40.5)">Add
to cart</button></td>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> civil procedure<br>
<strong>Author:</strong> s.Russel<br>
<strong>Publication:</strong> princeton hall
</td>
<td>$63</td>
<td><button onclick="addToCart('civil procedure', 63)">Add to
cart</button></td>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> building materials<br>
<strong>Author:</strong> watson<br>
<strong>Publication:</strong> bpb publications
</td>
<td>$35.5</td>
<td><button onclick="addToCart('building materials', 35.5)">Add to
cart</button></td>
</tr>
</table>
<h2>Electronics and Communication Engineering</h2>
<table id="ece-table">
<tr>
<th>Image</th>
<th>Details</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> java 2<br>
<strong>Author:</strong> winston<br>
<strong>Publication:</strong> wiely
</td>
<td>$40.5</td>
<td><button onclick="addToCart('java 2', 40.5)">Add to
cart</button></td>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> satellite communications<br>
<strong>Author:</strong> s.russel<br>
<strong>Publication:</strong> princeton hall
</td>
<td>$63</td>
<td><button onclick="addToCart('satellite communications', 63)">Add to
cart</button></td>
</tr>
<tr>
<td><img src="book.jpeg" alt="Book Image" class="book-image"></td>
<td>
<strong>Book:</strong> telephonic communications<br>
<strong>Author:</strong> watson<br>
<strong>Publication:</strong> bpb publications
</td>
<td>$35.5</td>
<td><button onclick="addToCart('telephonic communications',
35.5)">Add to cart</button></td>
</tr>
</table>
<h2>Cart</h2>
<table id="cart">
<tr>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</table>
<script>
let cart = [];
function addToCart(bookName, price) {
let bookIndex = cart.findIndex(item => item.bookName === bookName);
if (bookIndex > -1) {
cart[bookIndex].quantity++;
cart[bookIndex].amount = cart[bookIndex].quantity *
cart[bookIndex].price;
} else {
cart.push({
bookName: bookName,
price: price,
quantity: 1,
amount: price
});
}
updateCart();
}
function updateCart() {
const cartTable = document.getElementById("cart");
let cartHTML = `
<tr>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
`;
cart.forEach(item => {
cartHTML += `
<tr>
<td>${item.bookName}</td>
<td>$${item.price}</td>
<td>${item.quantity}</td>
<td>$${item.amount}</td>
</tr>
`;
});
cartTable.innerHTML = cartHTML;
}
</script>
</body>
</html>
fILE:Cart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f9f9f9;
height: 100vh;
}
.cart-page {
width: 80%;
padding: 20px;
background-color: white;
border: 1px solid #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: left;
}
th {
background-color: #f1f1f1;
}
.total {
font-weight: bold;
}
</style>
</head>
<body>
<div class="cart-page">
<h1>Cart.html</h1>
<table>
<thead>
<tr>
<th>BOOK NAME</th>
<th>PRICE</th>
<th>QUANTITY</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td>JAVA 2</td>
<td>$35.5</td>
<td>2</td>
<td>$71</td>
</tr>
<tr>
<td>XML BIBLE</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
OUTPUT:
LEFT PAGE:
CSE(COMPUTER SCIENCE ENGINNERING):
File:cse.html
<html>
<head>
<title>Computer Science Engineering</title>
</head>
<body>
<h1>Computer Science Engineering</h1>
<p>Computer science engineering is about programming, artificial
intelligence, and software development. This field combines electrical
engineering, electronics, and computer science to develop both hardware and
software systems.</p>
<p>Computer engineers are trained in areas like hardware-software
integration, software design, and electrical engineering. They work on
designing microprocessors, personal computers, supercomputers, and
circuits. This field focuses not only on how computer systems work but also on
how to integrate them into larger systems.</p>
<h2>Key Areas</h2>
<table border="1">
<thead>
<tr>
<th>Area</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Artificial Intelligence</td>
<td>Develops smart systems capable of learning and decision-
making.</td>
</tr>
<tr>
<td>Computer Networks</td>
<td>Focuses on communication between computer systems.</td>
</tr>
</tbody>
</table>
<img src="com.jpeg" alt="Image of a computer science project" />
</body>
</html>
ECE(ELECTRICAL COMPUTER ENGINEERING):
File:ece.html
<html>
<head>
<title>Electrical Engineering</title>
</head>
<body>
<h1>Electrical Engineering</h1>
<p>Electrical engineering is about power systems, circuits, and
electromagnetics. It focuses on the study, design, and use of equipment and
systems involving electricity and electronics. This field started in the 19th
century with innovations like the telegraph and telephone.</p>
<p>It includes areas like power engineering, telecommunications, signal
processing, and renewable energy. Electrical engineers work on a wide range
of technologies, from microelectronics to power grids.</p>
<h2>Fields of Electrical Engineering</h2>
<table border="1">
<tr>
<th>Field</th>
<th>Description</th>
</tr>
<tr>
<td>Power Engineering</td>
<td>Focuses on electricity generation, transmission, and
distribution.</td>
</tr>
<tr>
<td>Telecommunications</td>
<td>Deals with communication systems like telephones and the
internet.</td>
</tr>
</table>
<img src="elec.jpeg" alt="Image of an electrical engineering project" />
</body>
</html>
• MECH (MECHANICAL ENGINEERING):
File:mech.html
<html>
<head>
<title>Mechanical Engineering</title>
</head>
<body>
<h1>Mechanical Engineering</h1>
<p>Mechanical engineering involves the design, analysis, and
manufacturing of mechanical systems. It focuses on the principles of
mechanics, energy, and materials to develop machines and tools. This
field has its roots in ancient innovations such as the wheel and
lever.</p>
<p>It includes areas like thermodynamics, robotics, automotive
engineering, and materials science. Mechanical engineers work on a
variety of technologies, from small components to large industrial
machines.</p>
<h2>Fields of Mechanical Engineering</h2>
<table border="1">
<tr>
<th>Field</th>
<th>Description</th>
</tr>
<tr>
<td>Thermodynamics</td>
<td>Focuses on energy systems, heat transfer, and engines.</td>
</tr>
<tr>
<td>Robotics</td>
<td>Involves the design and creation of robotic systems and
automation.</td>
</tr>
<tr>
<td>Automotive Engineering</td>
<td>Deals with the design and manufacturing of vehicles and
transportation systems.</td>
</tr>
</table>
<img src="mech.jpeg" alt="Image of a mechanical engineering project"
/>
</body>
</html>
• CIVIL(CIVIL ENGINNERING):
file:civil.html
<html>
<head>
<title>Civil Engineering</title>
</head>
<body>
<h1>Civil Engineering</h1>
<p>Civil engineering is about designing, building, and maintaining
structures like roads, bridges, and buildings. It also includes public works like
canals, dams, airports, and railways.</p>
<p>This field is one of the oldest engineering disciplines, divided into
smaller areas of focus. Civil engineers work on projects for both government
and private companies.
Since ancient times, civil engineering has been essential. Examples include
the pyramids in Egypt and Roman aqueducts. Today, it includes modern
construction and city planning.</p>
<img src="civil.jpg" alt="Image of a civil engineering project" />
<h2>Types of Civil Engineering</h2>
<table border="1">
<thead>
<tr>
<th>Type</th>
<th>What It Does</th>
</tr>
</thead>
<tbody>
<tr>
<td>Structural Engineering</td>
<td>Designs buildings, bridges, and other structures.</td>
</tr>
<tr>
<td>Transportation Engineering</td>
<td>Plans and manages transportation systems like roads and
railways.</td>
</tr>
</tbody>
</table>
</body>
</html>
Experiment 2:
<!DOCTYPE html>
<html>
<head>
<title>Student Portal</title>
<style>
body {
background-image: url('th.jpg');
background-size: cover;
font-family: 'Verdana', sans-serif;
color: black;
text-align: center;
}
h1, h2, h3, h4, h5 {
font-style: italic;
font-weight: lighter;
font-size: 24pt;
}
h1 {
font-family: 'Times New Roman';
color: pink;
font-variant: small-caps;
}
h2 {
font-family: 'Arial';
color: red;
font-variant: lower-alpha;
}
h3 {
font-family: 'Algerian';
color: maroon;
font-variant: lower-alpha;
}
h4 {
font-family: 'Cambrian';
color: yellow;
font-variant: upper-alpha;
}
h5 {
font-family: 'Arial Black';
color: maroon;
font-variant: lower-alpha;
font-style: bold;
}
.form-container {
max-width: 400px;
margin: auto;
padding: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input[type="text"],
.form-group input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
}
.form-actions input[type="submit"],
.form-actions input[type="reset"] {
padding: 10px 15px;
}
.r {
font-size: 10pt;
color: red;
}
</style>
</head>
<body>
<h1>College of Engineering</h1>
<h2>Welcome to Gitam</h2>
<h3>COMPUTER SCIENCE ENGINEERING</h3>
<h4>3RD YEAR</h4>
<h4>STUDENT PORTAL</h4>
<p>Information</p>
<div class="form-container">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username"
placeholder="Enter your username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password"
placeholder="Enter your password" required>
</div>
<div class="form-actions">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>
</div>
<p>Upload <span class="r">more</span> details</p>
</body>
</html>
experiment 3
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<script type="text/javascript">
function fun() {
var userv = document.forms[0].user.value;
var pwdv = document.forms[0].pwd.value;
var emailv = document.forms[0].email.value;
var phv = document.forms[0].ph.value;
var userreg = new RegExp("^[a-zA-Z][a-zA-Z0-9]*$");
var emailreg = new RegExp("^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-
])+\.)+([a-zA-Z0-9]{2,4})+$");
var phreg = new RegExp("^[0-9]{10}$");
var ruser = userreg.exec(userv);
var remail = emailreg.exec(emailv);
var rph = phreg.exec(phv);
if (ruser && remail && rph && (pwdv.length > 6)) {
alert("All values are valid");
return true;
} else {
if (!(ruser && userv.length > 6)) {
alert("Username invalid");
document.forms[0].user.focus();
}
if (!remail) {
alert("Email ID invalid");
document.forms[0].email.focus();
}
if (!rph) {
alert("Phone number invalid");
document.forms[0].ph.focus();
}
if (pwdv.length < 6) {
alert("Password is invalid");
document.forms[0].pwd.focus();
}
return false;
}
}
</script>
</head>
<body>
<center>
<h3>Registration</h3>
<form action="" method="get" onsubmit="return fun();">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="user" size="10"><br></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pwd" size="10"><br></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="email" size="10"><br></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="ph" size="10"><br></td>
</tr>
<tr>
<td><input type="submit" value="Register"></td>
<td><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Experiment 4:
A. Moving the image from one place to another position in the page
html
Copy
<html>
<head>
<title>Moving Elements</title>
<script type="text/javascript">
function moveIt(movee, newTop, newLeft) {
const dom = document.getElementById(movee).style;
dom.top = newTop + "px";
dom.left = newLeft + "px";
}
</script>
</head>
<body>
<form action="">
<p>
<label>
x-coordinate:
<input type="text" id="leftCoord" size="3" />
</label>
<br/>
<label>
y-coordinate:
<input type="text" id="topCoord" size="3" />
</label>
<br />
<input type="button" value="Move it" onclick="moveIt('even',
document.getElementById('topCoord').value,
document.getElementById('leftCoord').value)" />
</p>
</form>
<br/>
<div id="even" style="position:absolute; top:115px; left:20px;">
<img src="2.jpg" height="300" width="200" alt="(Picture of evening)" />
</div>
</body>
</html>
B. Find the cursor position in the web page
html
Copy
<html>
<head>
<title>Where is the Cursor?</title>
<script type="text/javascript">
function findIt(evt) {
document.getElementById("xcoor1").value = evt.clientX;
document.getElementById("ycoor1").value = evt.clientY;
document.getElementById("xcoor2").value = evt.screenX;
document.getElementById("ycoor2").value = evt.screenY;
}
</script>
</head>
<body onclick="findIt(event)">
<form action="">
<p>
Within the client area: <br />
X:
<input type="text" id="xcoor1" size="4" />
Y:
<input type="text" id="ycoor1" size="4" />
<br /><br />
Relative to the origin of the screen coordinate system:<br />
X:
<input type="text" id="xcoor2" size="4" />
Y:
<input type="text" id="ycoor2" size="4" />
</p>
</form>
<p>
<img src="2.jpg" height="300" alt="(Picture of an airplane)" width="450" />
</p>
</body>
</html>
C. Move the element of the page like drag and drop functionality
html
Copy
<head>
<title>Drag and Drop</title>
<script type="text/javascript" src="dragNdrop.js"></script>
</head>
<body style="font-size:20px;">
<p>
Roses are red <br />
Violets are blue <br />
<span style="position: absolute; top: 200px; left: 0px; background-color:
lightgrey;" onmousedown="grabber(event);"> candy </span>
<span style="position: absolute; top: 200px; left: 75px; background-color:
lightgrey;" onmousedown="grabber(event);"> cats </span>
<span style="position: absolute; top: 200px; left: 150px; background-color:
lightgrey;" onmousedown="grabber(event);"> cows </span>
<span style="position: absolute; top: 200px; left: 225px; background-color:
lightgrey;" onmousedown="grabber(event);"> glue </span>
<span style="position: absolute; top: 200px; left: 300px; background-color:
lightgrey;" onmousedown="grabber(event);"> glue </span>
<span style="position: absolute; top: 200px; left: 375px; background-color:
lightgrey;" onmousedown="grabber(event);"> is </span>
<span style="position: absolute; top: 200px; left: 450px; background-color:
lightgrey;" onmousedown="grabber(event);"> meow </span>
</p>
</body>
</html>
JavaScript for Drag and Drop Functionality (dragNdrop.js)
javascript
Copy
var diffx, diffy, theElement;
function grabber(event) {
theElement = event.currentTarget;
var posx = parseInt(theElement.style.left);
var posY = parseInt(theElement.style.top);
diffx = event.clientX - posx;
diffy = event.clientY - posY;
document.addEventListener("mousemove", mover, true);
document.addEventListener("mouseup", dropper, true);
event.stopPropagation();
event.preventDefault();
}
function mover(event) {
theElement.style.left = (event.clientX - diffx) + "px";
theElement.style.top = (event.clientY - diffy) + "px";
event.stopPropagation();
}
function dropper(event) {
document.removeEventListener("mousemove", mover, true);
document.removeEventListener("mouseup", dropper, true);
event.stopPropagation();
}
Experiment 5:
body {
background-color: pink;
}
heading {
display: block;
text-align: center;
font-size: 30px;
font-weight: bold;
color: yellow;
background-color: red;
}
book {
color: black;
display: block;
margin-bottom: 20px;
}
title {
display: block;
font-size: 15px;
font-weight: bold;
}
author, publisher, edition, price, semester, department {
display: block;
margin-left: 10px;
}
