ASSIGNMENT
REPORT
DEPARTMENT OF INFORMATION
TECHNOLOGY
MARKS EVALUATION
Content Originality Presentation Timely TOTAL
Quality / Submission
5 MARKS 20 MARKS
Organization
20 MARKS 5 MARKS
10 MARKS
NAME:RITHICK P
REGISTER
NO: 713623149028
SUBJECT:WEB TECHNOLOGY
CLASS:BE(CYBER)
DATE OF
SUBMISSION:18/08/2025
ASSIGNMENT : 1
STAFF SIGNATURE
1) Build a photo gallery using HTML5 and CSS3:
Add drag and drop to rearrange photos-+
Add shadow and transform scale effects on hover
Add a fade-in animation when the page loads
PROGRAM:
program 1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-
scale=1" />
<title>HTML5 Photo Gallery — Drag & Drop</title>
<style>
:root{
--gap:16px;
--bg:#0f1724;
--card:#0b1220;
--accent:#06b6d4;
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-
system, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial;color:#e6eef6;background:linear-gradient(180deg,var(--
bg),#071025);}
.wrap{max-width:1100px;margin:48px
auto;padding:24px;background:linear-
gradient(180deg,rgba(255,255,255,0.02),transparent);border-
radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.6);}
header{display:flex;align-items:center;justify-content:space-
between;margin-bottom:18px}
header h1{font-size:20px;margin:0}
header p{margin:0;opacity:0.8;font-size:13px}
.gallery{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
gap:var(--gap);
align-items:start;
animation:fadeIn 600ms ease both;
.photo{
background:linear-gradient(180deg, rgba(255,255,255,0.02),
rgba(255,255,255,0.01));
border-radius:10px;
overflow:hidden;
cursor:grab;
user-select:none;
transition:transform 220ms ease, box-shadow 220ms ease;
transform-origin:center;
border:1px solid rgba(255,255,255,0.03);
position:relative;
.photo:active{cursor:grabbing}
.photo:hover{
transform:scale(1.03);
box-shadow:0 14px 30px rgba(2,6,23,0.6), 0 6px 12px
rgba(6,182,212,0.06);
z-index:2;
.[Link]{opacity:0.6;transform:scale(1.02);box-shadow:0 20px
30px rgba(0,0,0,0.5);}
.[Link]{outline:3px dashed rgba(6,182,212,0.25);}
.photo img{display:block;width:100%;height:140px;object-fit:cover}
.meta{padding:12px;font-size:13px;display:flex;justify-content:space-
between;align-items:center}
.meta .title{font-weight:600}
.meta .idx{opacity:0.6;font-size:12px}
@keyframes fadeIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
@media (max-width:420px){
.photo img{height:120px}
.controls{display:flex;gap:8px}
.btn{background:transparent;border:1px solid
rgba(255,255,255,0.06);padding:8px 12px;border-
radius:8px;color:inherit;font-size:13px;cursor:pointer}
</style>
</head>
<body>
<div class="wrap">
<header>
<div>
<h1>Photo Gallery — Drag & Drop</h1>
<p>Rearrange photos by dragging. Hover to see shadow & scale.
Gallery fades in on load.</p>
</div>
<div class="controls">
<button id="shuffle" class="btn">Shuffle</button>
<button id="reset" class="btn">Reset</button>
</div>
</header>
<main>
<div id="gallery" class="gallery" aria-live="polite"></div>
</main>
</div>
<script>
const initialPhotos = [Link]({length:9}).map((_,i)=>({
id: i+1,
title: `Photo ${i+1}`,
src: `[Link]
}));
const gallery = [Link]('gallery');
let photos = structuredClone(initialPhotos);
let draggedEl = null;
function render(){
[Link] = '';
[Link]((p, idx)=>{
const card = [Link]('article');
[Link] = 'photo';
[Link]('draggable','true');
[Link]('data-id',[Link]);
[Link] = `
<img alt="${[Link]}" src="${[Link]}">
<div class="meta">
<div class="title">${[Link]}</div>
<div class="idx">${idx+1}</div>
</div>`;
addDragHandlers(card);
[Link](card);
});
function addDragHandlers(card){
[Link]('dragstart', (e)=>{
draggedEl = card;
[Link]('dragging');
[Link] = 'move';
try{ [Link]('text/plain', [Link]); }catch(err)
{}
});
[Link]('dragend', ()=>{
if(draggedEl) [Link]('dragging');
draggedEl = null;
[Link]('.[Link]').forEach(el=>[Link].r
emove('placeholder'));
});
[Link]('dragover', (e)=>{
[Link]();
[Link] = 'move';
const target = [Link];
if(target !== draggedEl){
[Link]('.[Link]').forEach(el=>[Link].r
emove('placeholder'));
[Link]('placeholder');
});
[Link]('dragleave', (e)=>{
[Link]('placeholder');
});
[Link]('drop', (e)=>{
[Link]();
const target = [Link];
if(!draggedEl || target === draggedEl) return;
const draggedId = Number([Link]);
const targetId = Number([Link]);
const fromIndex = [Link](p=>[Link]===draggedId);
const toIndex = [Link](p=>[Link]===targetId);
const [moved] = [Link](fromIndex,1);
[Link](toIndex,0,moved);
render();
});
[Link]('shuffle').addEventListener('click', ()=>{
for(let i=[Link]-1;i>0;i--){
const j = [Link]([Link]()*(i+1));
[photos[i],photos[j]] = [photos[j],photos[i]];
render();
});
[Link]('reset').addEventListener('click', ()=>{
photos = structuredClone(initialPhotos);
render();
});
[Link]('DOMContentLoaded', ()=>{
render();
});
</script>
</body>
</html>
OUTPUT:
2) Develop an HTML5 music player interface:
Use <audio> tag
Include play, pause, volume, and loop controls
Style it with CSS and place it in a card using Bootstrap
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>HTML5 Music Player</title>
<!-- Bootstrap CSS -->
<link
href="[Link]
css"
rel="stylesheet"
/>
<style>
body {
background: #121826;
font-family: Arial, sans-serif;
color: #fff;
.music-card {
max-width: 400px;
margin: 50px auto;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
.music-cover {
height: 220px;
object-fit: cover;
.btn {
border-radius: 50px;
.volume-control {
width: 100%;
</style>
</head>
<body>
<div class="card bg-dark text-white music-card">
<img
src="[Link]
class="card-img-top music-cover"
alt="Album Cover"
/>
<div class="card-body text-center">
<h5 class="card-title">Sample Song</h5>
<p class="card-text">Artist Name</p>
<audio id="audio"
src="[Link]
1.mp3"></audio>
<div class="d-flex justify-content-center gap-3 my-3">
<button id="playBtn" class="btn btn-success px-3">▶️
Play</button>
<button id="pauseBtn" class="btn btn-warning px-3">⏸
Pause</button>
<button id="loopBtn" class="btn btn-info px-3">🔁 Loop</button>
</div>
<label class="form-label mt-2">Volume</label>
<input
type="range"
id="volumeControl"
min="0"
max="1"
step="0.1"
value="1"
class="form-range volume-control"
/>
</div>
</div>
<!-- Bootstrap JS (optional, for better styling behavior) -->
<script
src="[Link]
.[Link]"></script>
<script>
const audio = [Link]("audio");
const playBtn = [Link]("playBtn");
const pauseBtn = [Link]("pauseBtn");
const loopBtn = [Link]("loopBtn");
const volumeControl = [Link]("volumeControl");
[Link]("click", () => [Link]());
[Link]("click", () => [Link]());
[Link]("click", () => {
[Link] = ![Link];
[Link]("btn-danger", [Link]);
});
[Link]("input", () => {
[Link] = [Link];
});
</script>
</body>
</html>
OUTPUT:
3) Create an interactive page using event handlers:
onmouseover to enlarge an image
onmouseout to shrink it back
onclick to display a thank-you message
PROGRAM:
program3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Interactive Image Event Handlers</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background: #121826;
color: #fff;
img {
width: 200px;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
transition: transform 0.3s ease;
cursor: pointer;
#message {
margin-top: 20px;
font-size: 18px;
color: #0ff;
font-weight: bold;
</style>
</head>
<body>
<h1>Interactive Image Demo</h1>
<p>Hover to enlarge, move out to shrink, click to see a message.</p>
<img id="myImage"
src="[Link]
alt="Random"
onmouseover="enlargeImage()"
onmouseout="shrinkImage()"
onclick="showMessage()" />
<div id="message"></div>
<script>
const img = [Link]('myImage');
const messageDiv = [Link]('message');
function enlargeImage() {
[Link] = "scale(1.2)";
function shrinkImage() {
[Link] = "scale(1)";
function showMessage() {
[Link] = "Thank you for clicking the image!";
</script>
</body>
</html>
OUTPUT:
4) Build a DHTML page that:
Uses JavaScript to animate an image moving left to right
Changes styles dynamically (font size, color) using buttons
PROGRAM:
program 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>DHTML Animation & Dynamic Styles</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 40px;
background: #121826;
color: #fff;
#myImage {
position: relative;
left: 0;
width: 120px;
height: auto;
transition: transform 0.3s ease;
.btn {
padding: 8px 16px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
.btn-blue { background-color: #007bff; color: #fff; }
.btn-red { background-color: #dc3545; color: #fff; }
.btn-green { background-color: #28a745; color: #fff; }
#text {
margin-top: 30px;
font-size: 20px;
transition: all 0.3s ease;
</style>
</head>
<body>
<h1>DHTML Animation & Dynamic Styling</h1>
<!-- Animated Image -->
<img id="myImage" src="[Link] alt="Moving
Image" />
<br><br>
<button class="btn btn-green" onclick="startAnimation()">Start
Animation</button>
<button class="btn btn-red" onclick="stopAnimation()">Stop
Animation</button>
<!-- Dynamic Style Controls -->
<div id="text">Watch me change dynamically!</div>
<button class="btn btn-blue" onclick="increaseFont()">Increase
Font</button>
<button class="btn btn-blue" onclick="decreaseFont()">Decrease
Font</button>
<button class="btn btn-green" onclick="changeColor()">Change
Color</button>
<script>
let img = [Link]("myImage");
let text = [Link]("text");
let pos = 0;
let animationId;
let colors = ["#ff4757", "#1e90ff", "#2ed573", "#ffa502", "#a29bfe"];
let colorIndex = 0;
// Animate image left to right
function startAnimation() {
stopAnimation();
animationId = setInterval(() => {
pos += 2;
if (pos > [Link] - 150) pos = 0;
[Link] = pos + "px";
}, 20);
function stopAnimation() {
clearInterval(animationId);
// Dynamic style changes
function increaseFont() {
let currentSize = parseInt([Link](text).fontSize);
[Link] = (currentSize + 2) + "px";
function decreaseFont() {
let currentSize = parseInt([Link](text).fontSize);
[Link] = (currentSize - 2) + "px";
function changeColor() {
colorIndex = (colorIndex + 1) % [Link];
[Link] = colors[colorIndex];
</script>
</body>
</html>
OUTPUT:
5) Create a simple servlet program that:
1) Accepts name and age from a form using the GET method
2) Displays a greeting with the name and age in the browser.
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Servlet GET Example</title>
</head>
<body>
<h2>Enter Your Details</h2>
<form action="GreetServlet" method="GET">
Name: <input type="text" name="name" required><br><br>
Age: <input type="number" name="age" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT: