Adv WT Exp
Adv WT Exp
Adv WT Exp
Lab Experiments
Submitted by
Submitted to
2024
Experiment 1
<body>
</body>
</html>
Output:
(Right-click disabled)
<head>
<title>Scroll to top</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></
script>
<script>
$(document).ready(function () {
$('img').click(function () {
$('html, body').animate({ scrollTop: 0 }, 'slow');
return false;
});
});
</script>
</head>
<body>
<br><br><br><br><br><br><br><br>
<h1 style="text-align: center;"><u>Click on image to scroll to
the top!</u></h1>
<br><br><br><br><br><br><br><br><br><br>
<img width="850px" height="600px" src="1.jpg" alt="">
</body>
</html>
Output:
3. Write a jQuery to change the color of any paragraph to red on mouseover
event.
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>
<script>
$(document).ready(function () {
$("#p1").hover(
function () {
$(this).css("color", "red");
}
)
}
);
</script>
</head>
<body>
<h1>WELCOME</h1>
<p id="p1">jQuery</p>
<p>Selectors</p>
<p>Example of Selectors</p>
<p>"*" Selector</p>
</body>
</html>
Output:
4. Display and hide message shown in the div tag on click of the buttons.
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#message").show();
});
$("#hide").click(function(){
$("#message").hide();
});
});
</script>
</head>
<body>
<h2>Show/Hide Example</h2>
<button id="show">Show Message</button>
<button id="hide">Hide Message</button>
</body>
</html>
Output:
Experiment 2
<head>
<title>Add class to element</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").addClass("class");
})
})
</script>
<style>
.class {
background-color: blueviolet;
font-style: italic;
font-size: larger;
}
</style>
</head>
<body>
<p>Add class to the element!</p>
<button>Add class</button>
</body>
</html>
Output:
<head>
<title>Access position of element</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></
script>
<script>
$(document).ready(function () {
$("button").click(function () {
let left = $("p").position().left;
let top = $("p").position().top;
alert(`Left: ${left}, top: ${top}`);
});
})
</script>
</head>
<body>
<p>Birds are flying high</p>
<button>Access position</button>
</body>
</html>
Output:
<head>
<title>Manipulate CSS properties</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></
script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").animate({
padding: '50px',
marginLeft: '60px',
opacity: 0.5,
}, 1000);
});
})
</script>
</head>
<body>
<p style="font-size: 40px; font-style: italic;">Animate the
element</p>
<button>Animate</button>
</body>
</html>
Output:
Experiment 3
• Display a Table
<head>
<title>Table</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js
"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.leaders = [{ sap: "1", name: "A" }, { sap: "2", name:
"B" }, { sap: "3", name: "C" }, { sap: "4", name: "D" }]
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table style="background-color: antiquewhite;">
<tr>
<th>Sap Id</th>
<th>Name</th>
</tr>
<tr ng-repeat="l in leaders">
<td>{{l.sap}}</td>
<td>{{l.name}}</td>
</tr>
</table>
<br><br>
<table style="background-color: antiquewhite;">
<tr>
<th>Sap Id</th>
<th>Name</th>
</tr>
<tr ng-repeat="l in leaders" ng-if="l.sap > 2">
<td>{{l.sap}}</td>
<td>{{l.name}}</td>
</tr>
</table>
<br><br>
<table style="background-color: antiquewhite;">
<tr>
<th>Sap Id</th>
<th>Name</th>
</tr>
<tr ng-repeat="l in leaders" ng-if="l.sap % 2 != 0">
<td>{{l.sap}}</td>
<td>{{l.name}}</td>
</tr>
</table>
</div>
</body>
</html>
Output:
Experiment 4
1. Create a user registration form and perform input validation using angular
JS.
<html ng-app="myApp">
<head>
<title>Registration Form</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
"></script>
<script>
var app = angular.module("myApp", []);
app.controller("Myctrl", function ($scope) {
$scope.name = "";
$scope.email = "";
$scope.contact = "";
});
</script>
</head>
<body>
<div ng-controller="Myctrl">
<form name="myForm">
<h2><u>Registration form</u></h2><br>
Name: <input type="text" name="name" ng-model="name"
required><br>
<label ng-if="!myForm.name.$valid" style="color:
brown;">Insert name!</label><br><br>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Output:
2. Create an application for Bill Payment Record using AngularJS.
<html ng-app="ngApp">
<head>
<title>Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js
"></script>
<script>
var app = angular.module("ngApp", []);
app.controller("myCtrl", function ($scope) {
$scope.list = [];
$scope.add = function () {
$scope.list.push({
name: $scope.name,
amount: $scope.amount,
date: $scope.date
});
}
</head>
<body ng-controller="myCtrl">
<div>
<input class="inp" type="text" placeholder="Name" ng-
model="name">
<input class="inp" type="number" placeholder="Amount" ng-
model="amount">
<input class="inp" type="date" placeholder="Date" ng-
model="date">
<button class="inp" ng-click="add()">Add</button>
</div><br><br>
</html>
Output:
Experiment 5 & 6
app.listen(8080, ()=> {
console.log("Listening on port 8080");
});
Output:
2. Write a node.js program to replace two or more a’s with the letter b on the
given string using Regular Expression.
const express = require('express');
const app = express();
Output:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://127.0.0.1:8080/operation" method="POST">
Number 1: <input type="number" name="num1"> <br><br>
Number 2: <input type="number" name="num2"> <br><br>
</form>
</body>
</html>
Node.js
const express = require('express');
const bodyparser = require('body-parser');
switch (operator) {
case '+':
res.send(`<h1>Sum is ${num1 + num2}<h1>`);
break;
case '-':
res.send(`<h1>Difference is ${num1 - num2}<h1>`);
break;
case '*':
res.send(`<h1>Product is ${num1 * num2}<h1>`);
break;
case '/':
res.send(`Dividend is ${num1 / num2}<h1>`);
break;
}
});
app.listen(8080, () => {
console.log(`Server running on port 8080`);
});
Output:
4. Write a node.js code to iterate over the given array.
var arr = [1, 2, 3, 4, 5];
Output:
Experiment 7
app.use(coookieParser());
app.use(session({
secret: "Das ist eine password",
saveUninitialized: true,
resave: true
}));
Output:
2. Write code to show methods for creating and destroying a session.
const express = require("express");
const session = require("express-session");
app.use(
session({
secret: "Password",
resave: false,
saveUninitialized: false,
cookie: {
maxAge: 600000000,
},
})
);
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
Output:
app.use(cookieParser());
res.clearCookie('myCookie');
res.send('<h1>Cookie has been deleted!<h1>');
});
if (req.cookies.myCookie) {
res.send(`<h1>Cookie found: ${req.cookies.myCookie}<h1>`);
} else {
res.send('<h1>No cookie found.<h1>');
}
});
Output:
Experiment 8
mongoose.connect(uri);
const db = mongoose.connection;
db.on('connected', () => {
console.log('Connected to MongoDB successfully!');
});
Output:
3. Create a search application for finding the students based on given search
criteria.
const mongoose = require("mongoose");
const express = require("express");
mongoose
.connect(uri)
.then(() => {
console.log("Connected to MongoDB successfully!");
})
.catch((error) => {
console.error("Unable to connect to MongoDB:", error);
});
students = mongoose.connection.collection("students");
app.listen(3000, () => {
console.log("Sever is running on port 3000");
});
Output:
4. Write a program to create an application for a shopping center with all the
facilities like add an item, delete an item, update an item detail, stock report,
sale etc.
if (!name) {
return res.send(`<h1>Provide 'name' as a parameter in the URL</h1>`);
}
if (result.matchedCount === 0) {
return res.send("<h1>Item not found!</h1>");
}
if (!name || !quantity) {
return res.send(`<h1>Provide 'name' and 'quantity' as parameters in
the URL</h1>`);
}
if (!item) {
return res.send("<h1>Item not found!</h1>");
}
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});
Output:
Experiment 9&10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>D3.js Bar Chart</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: orange;
}
.axis text {
font-size: 12px;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<h1>D3.js Bar Chart Example</h1>
<svg id="chart" width="600" height="400"></svg>
<script>
const data = [25, 30, 45, 60, 20, 65, 75];
const svg = d3
.select("#chart")
.attr("width", width)
.attr("height", height);
const xScale = d3
.scaleBand()
.domain(data.map((d, i) => i))
.range([margin.left, width - margin.right])
.padding(0.1);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(data)])
.nice()
.range([height - margin.bottom, margin.top]);
svg
.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(xAxis);
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(yAxis);
svg
.selectAll(".bar")
.data(data)
.join("rect")
.attr("class", "bar")
.attr("x", (d, i) => xScale(i))
.attr("y", (d) => yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", (d) => yScale(0) - yScale(d));
</script>
</body>
</html>
Output:
2. Create circles and rectangles into interactive controls using SVG and D3.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Simple Interactive SVG</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.shape {
cursor: pointer;
stroke: black;
stroke-width: 2px;
}
.circle {
fill: lightblue;
}
.rectangle {
fill: lightgreen;
}
</style>
</head>
<body>
<h1>Interactive SVG Shapes</h1>
<svg
id="svg-canvas"
width="600"
height="400"
style="border: 1px solid black"
></svg>
<script>
const svg = d3.select("#svg-canvas");
const shapes = [
{ type: "circle", cx: 100, cy: 100, r: 30 },
{ type: "rectangle", x: 200, y: 150, width: 80, height: 60 },
];
shapes.forEach((shape) => {
if (shape.type === "circle") {
svg
.append("circle")
.attr("class", "shape circle")
.attr("cx", shape.cx)
.attr("cy", shape.cy)
.attr("r", shape.r)
.call(
d3.drag().on("drag", function (event) {
d3.select(this)
.attr("cx", (shape.cx = event.x))
.attr("cy", (shape.cy = event.y));
})
);
} else if (shape.type === "rectangle") {
svg
.append("rect")
.attr("class", "shape rectangle")
.attr("x", shape.x)
.attr("y", shape.y)
.attr("width", shape.width)
.attr("height", shape.height)
.call(
d3.drag().on("drag", function (event) {
d3.select(this)
.attr("x", (shape.x = event.x - shape.width / 2))
.attr("y", (shape.y = event.y - shape.height / 2));
})
);
}
});
</script>
</body>
</html>
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Modify SVG Element with D3</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.shape {
stroke: black;
stroke-width: 2px;
}
</style>
</head>
<body>
<h1>Modify SVG Element Using D3.js</h1>
<button id="modify-circle">Change Circle</button>
<button id="modify-rect">Change Rectangle</button>
<svg id="svg-canvas" width="400" height="300" style="border: 1px
solid black;">
<circle class="shape" id="my-circle" cx="100" cy="100" r="50"
fill="lightblue"></circle>
<rect class="shape" id="my-rect" x="200" y="50" width="80"
height="60" fill="lightgreen"></rect>
</svg>
<script>
d3.select("#modify-circle").on("click", () => {
d3.select("#my-circle")
.attr("fill", "orange")
.attr("r", 70)
.attr("cx", 150);
});
d3.select("#modify-rect").on("click", () => {
d3.select("#my-rect")
.attr("fill", "purple")
.attr("width", 100)
.attr("x", 250);
});
</script>
</body>
</html>
Output:
4. Create an application to fetch data from csv file and populate a graph
using SVG and D3.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSV Data to Graph</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: orange;
}
.axis path,
.axis line {
stroke: black;
}
</style>
</head>
<body>
<h1>CSV to Bar Graph</h1>
<svg id="chart" width="600" height="400"></svg>
<script>
const width = 600;
const height = 400;
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
d3.csv("data.csv").then(data => {
data.forEach(d => {
d.value = +d.value;
});
svg.selectAll(".bar")
.data(data)
.join("rect")
.attr("class", "bar")
.attr("x", d => xScale(d.category))
.attr("y", d => yScale(d.value))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(0) - yScale(d.value));
svg.append("g")
.attr("transform", `translate(0,${height -
margin.bottom})`)
.call(d3.axisBottom(xScale));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale));
}).catch(error => {
console.error("Error loading the CSV data:", error);
});
</script>
</body>
</html>
Output:
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: