Full Stack Mid Term

PRACTICAL-1
1. Write a program to Send data to server using XMLHttpRequest Object.

Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Simulate Sending Data</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest();
var url = "data.json"; // Replace with the path to your local JSON file
xhr.open("GET", url, true);
xhr.onload = function () {
if (xhr.status === 200) {
var responseData = JSON.parse(xhr.responseText);
console.log("Data loaded successfully:", responseData);
} else {
console.error("Request failed with status:", xhr.status);
}
};
xhr.onerror = function () {
console.error("Network error occurred");
};
xhr.send();
</script>
</body>
</html>
Data.json file :
{
"name": "John Doe",
"email": "john@example.com",
"age": 30,
"isStudent": false,
"address": {
"street": "123 Main St",
"city": "Cityville",
"zipcode": "12345"
},
"hobbies": ["reading", "hiking", "gaming"]
}
OUTPUT
PRACTICAL-2
2.Print a²+b2-√ab+ x/y =0 using HTML5 code.

Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mathml</title>
</head>
<body>
<math>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<msqrt>
<mi>ab</mi>
</msqrt>
<mo>+</mo>
</mrow>
<mfrac bevelled="true">
<mi>x</mi>
<mi>y</mi>
</mfrac>
<mo>=</mo>
<mn>0</mn>
</math>
</body>
</html>
OUTPUT
PRACTICAL-3
3.Design a website and use the geolocation API to track the user current
location.
Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get User Location</title>
</head>
<body>
<button onclick="getLocation()">Click Here</button>
<p id="p1">Coordinates Are : </p>
<script>
var x = document.getElementById("p1");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " +
position.coords.longitude;
}
</script>
</body>
</html>
OUTPUT
PRACTICAL-4
4.Write a program to drag an image from one location and drop into some other
location in the web page.
Source Code :
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid rgb(8, 233, 249);
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("image", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("image");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>

<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

<img src="sun.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88"
height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>
OUTPUT
PRACTICAL-5
5.Write a program to set up a canvas on a HTML page and using JavaScript

create a 300 pixel by 300 pixel square with (red, yellow and green colors) and a
circle of 10 pixels radius, that appears in the top-left and bottom right corner on
the canvas respectively.
Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);
ctx.fillStyle = 'yellow';
ctx.fillRect(100, 0, 100, 100);
ctx.fillStyle = 'green';
ctx.fillRect(0, 100, 100, 100);
ctx.beginPath();
ctx.arc(10, 10, 10, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.beginPath();
ctx.arc(290, 290, 10, 0, 2 * Math.PI);
ctx.fillStyle = 'orange';
ctx.fill();
</script>
</body></html>
OUTPUT
PRACTICAL-6
6.Write a program to group circle and rectangle and render 3 times at different
positions inside SVG area.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>SVG Grouping Example</title>
</head>
<body>
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<g id="shapeGroup">

<circle cx="50" cy="50" r="20" fill="blue" />
<circle cx="100" cy="50" r="20" fill="green" />
<circle cx="150" cy="50" r="20" fill="red" />
<rect x="200" y="20" width="40" height="40" fill="orange" />

<rect x="250" y="20" width="40" height="40" fill="purple" />
<rect x="300" y="20" width="40" height="40" fill="pink" />
</g>
</svg>
<script>
const shapeGroup = document.getElementById("shapeGroup");
const group1 = shapeGroup.cloneNode(true);
group1.setAttribute("transform", "translate(50, 100)");


const svg = document.querySelector("svg");
svg.appendChild(group1);
</script>
</body>
</html>
OUTPUT
PRACTICAL-7
7.Write a program to binds the "sample" animation to the <div> element. The
animation will last for 4 seconds, and it will gradually change the background-
color of the <div> element from "red to green and “green to yellow", and it
retain the style values from the last keyframe when the animation ends.
Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.color-changing-div {
width: 200px;
height: 200px;
background-color: red;
animation: colorChange 10s forwards;
}
@keyframes colorChange {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: yellow;
}
}
</style>
</head>
<body>
<div class="color-changing-div" id="sample"></div>
<script>
const sampleDiv = document.getElementById("sample");
sampleDiv.addEventListener("animationend", () => {
sampleDiv.style.backgroundColor = "yellow";
});
</script>
</body>
</html>
OUTPUT
PRACTICAL-8
8.Write a program to 2d Transform an element into 60 degrees and move

horizontally and vertically by 200px, and 300px from the original position when
mouse hover it.
Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.transform-element {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 0.5s ease, left 0.5s ease, top 0.5s ease;
}
.transformed {
transform: rotate(60deg);
left: 200px;
top: 300px;
}
</style>
</head>
<body>
<div class="transform-element" id="element"></div>
<script>
const element = document.getElementById("element");
element.addEventListener("mouseover", () => {
element.classList.add("transformed");
});
element.addEventListener("mouseout", () => {
element.classList.remove("transformed");
});
</script>
</body>
</html>
OUTPUT

Full Stack Mid Term

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Full Stack Mid Term

Uploaded by

Copyright:

Available Formats

PRACTICAL-1

1. Write a program to Send data to server using XMLHttpRequest Object.

2.Print a²+b2-√ab+ x/y =0 using HTML5 code.

<h2>Drag and Drop</h2>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

5.Write a program to set up a canvas on a HTML page and using JavaScript

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<canvas id="myCanvas" width="300" height="300"></canvas>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

ctx.fillRect(0, 0, 100, 100);

ctx.fillRect(100, 0, 100, 100);

ctx.fillRect(0, 100, 100, 100);

ctx.arc(290, 290, 10, 0, 2 * Math.PI);

<rect x="200" y="20" width="40" height="40" fill="orange" />

const group2 = shapeGroup.cloneNode(true);

const group3 = shapeGroup.cloneNode(true);

8.Write a program to 2d Transform an element into 60 degrees and move

You might also like