Lab Practical Submission
Date: 30/01/24
Roll No. and Name: 22BCE305 ROSHNI PANKAJKUMAR RANA
Course Code and Name: 2CS201 FULL STACK WEB DEVELOPMENT
Practical-4:
1. Implement Geolocation API to retrieve the user's current location.
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Weather App</title>
<style>
body {
font-family: 'Times New Roman', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #5079a2;
h1{
color:#1a3e63;
#app {
text-align: center;
background-color: #dcf6ff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
button {
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
background-color: #1a3e63;
border-radius: 10px;
color: white;
}
#location-info {
font-size: 20px;
color: #1a3e63;
margin-top: 20px;
#weather-info {
margin-top: 20px;
font-size: 20px;
color: #1a3e63;
</style>
</head>
<body>
<div id="app">
<h1>Weather App </h1>
<div id="location-info">
<strong>Latitude:</strong> <span
id="latitude"></span><br>
<strong>Longitude:</strong> <span
id="longitude"></span>
</div>
<button onclick="getWeather()">Get Weather</button>
<div id="weather-info"></div>
</div>
<script src="[Link]"></script>
</body>
</html>
[Link]
function getWeather() {
const locationInfo =
[Link]('location-info');
const weatherInfo = [Link]('weather-info');
if ([Link]) {
[Link](showPosition,
showError);
} else {
showError("Geolocation is not supported by this
browser.");
}
function showPosition(position) {
var latitude = [Link];
var longitude = [Link];
[Link]("latitude").textContent =
[Link](6);
[Link]("longitude").textContent =
[Link](6);
const apiKey = '34874834c13af08f5dd6c02d3d268c04';
const apiUrl =
`[Link]
&lon=${longitude}&appid=${apiKey}&units=metric`;
fetch(apiUrl)
.then(response => [Link]())
.then(data => {
const temperature = [Link];
const description = [Link][0].description;
[Link] = `<p>Temperature:
${temperature}°C</p><p>Description: ${description}</p>`;
})
.catch(error => {
[Link]('Error fetching weather data:',
error);
[Link] = 'An error occurred while
fetching weather data.';
});
}
function showError(error) {
[Link](error);
[Link] = 'Unable to get weather data.
Please try again later.';
}
}
OUTPUT
2. JavaScript to interact with the Local Storage
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Types of Sports</title>
<style>
body{
background-color:rgb(255, 210, 202);
#outputContainer {
text-align: center;
color: rgb(71, 28, 28);
font-size: 20px;
padding: 10px;
</style>
</head>
<body>
<div style="width: 100%; height: 60px; margin-top: 240px;">
<h1 id="output" style="text-align: center; color:
rgb(71, 28, 28); background-color: white;">DIFFERENT TYPES OF
SHAPES</h1>
<input id="input" placeholder="Square, Rectangle and
etc" style="margin-left: 440px; width: 12.5%;"/>
<button onclick="save()" style= "background-color:
rgb(71, 28, 28); color: white;">SAVE</button>
<button onclick="retrieve();" style= "background-color:
rgb(71, 28, 28); color: white">RETRIEVE</button>
<button onclick="clearLocalStorage();" style=
"background-color: rgb(71, 28, 28); color:
white">CLEAR</button>
</div>
<div id="outputContainer"></div>
<script>
function save() {
var new_data = ' ' +
[Link]('input').value;
if ([Link]('data') == null) {
[Link]('data', '[]');
}
alert("Data saved to Local Storage!");
var old_data =
[Link]([Link]('data'));
old_data.push(new_data);
[Link]('data',
[Link](old_data));
function retrieve() {
var outputContainer =
[Link]('outputContainer');
[Link] = '';
if ([Link]('data') != null) {
var data =
[Link]([Link]('data'));
for (var i = 0; i < [Link]; i++) {
var paragraph = [Link]('p');
[Link] = data[i];
[Link](paragraph);
} else {
alert("No data found in Local Storage.");
}
function clearLocalStorage() {
[Link]('data');
var outputContainer =
[Link]('outputContainer');
[Link] = '';
alert("Local Storage cleared!");
</script>
</body>
</html>
OUTPUT
Saving data
Retrieving data
Clearing data
3. Demonstrating the Drag and Drop API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Drag and Drop Game</title>
<style>
body {
background-color: aliceblue;
}
#draggableContainer {
display: flex;
justify-content: space-between;
}
#dragElement1,
#dragElement2,
#dragElement3 {
width: 50px;
height: 50px;
margin: 20px;
padding: 10px;
cursor: move;
}
#dragElement1 {
background-color: rgb(193, 239, 255);
border: 2px solid darkblue;
}
#dragElement2 {
background-color: rgb(193, 255, 200);
border: 2px solid rgb(0, 108, 36);
}
#dragElement3 {
background-color: rgb(255, 193, 193);
border: 2px solid rgb(139, 0, 0);
}
#dropZone {
width: 500px;
height: 400px;
background-color: rgb(255, 255, 255);
border: 2px solid rgb(0, 0, 0);
margin-top: 20px;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: rgb(18, 18, 74);">Drag
and Drop Game</h1>
<h3 style="text-align: center; color: rgb(18, 18, 74);">Drag
and drop all the blue objects.</h3>
<div id="draggableContainer">
<div id="dragElement1" draggable="true"
ondragstart="dragStart(event)">
Drag me!
</div>
<div id="dragElement2" draggable="true"
ondragstart="dragStart(event)">
Drag me!
</div>
<div id="dragElement1" draggable="true"
ondragstart="dragStart(event)">
Drag me!
</div>
<div id="dragElement3" draggable="true"
ondragstart="dragStart(event)">
Drag me!
</div>
<div id="dragElement1" draggable="true"
ondragstart="dragStart(event)">
Drag me!
</div>
</div>
<div id="dropZone" ondragover="allowDrop(event)"
ondrop="drop(event)">
Drop here!
</div>
<script>
function dragStart(event) {
[Link]("text/plain",
[Link]);
}
function allowDrop(event) {
[Link]();
}
function drop(event) {
[Link]();
var draggedElementId =
[Link]("text/plain");
if (draggedElementId === "dragElement1") {
var draggedElement =
[Link](draggedElementId);
[Link]("dropZone").appendChild(draggedElement);
var dragElement1Count =
[Link]("#draggableContainer
#dragElement1").length;
if (dragElement1Count === 0) {
alert("Finish!");
}
} else {
alert("Are you sure that is blue?");
}
}
</script>
</body>
</html>
