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.
geolocationapi.html
<!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="geolocationapi.js"></script>
</body>
</html>
geolocationapi.js
function getWeather() {
const locationInfo =
document.getElementById('location-info');
const weatherInfo = document.getElementById('weather-info');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,
showError);
} else {
showError("Geolocation is not supported by this
browser.");
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("latitude").textContent =
latitude.toFixed(6);
document.getElementById("longitude").textContent =
longitude.toFixed(6);
const apiKey = '34874834c13af08f5dd6c02d3d268c04';
const apiUrl =
`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}
&lon=${longitude}&appid=${apiKey}&units=metric`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const temperature = data.main.temp;
const description = data.weather[0].description;
weatherInfo.innerHTML = `<p>Temperature:
${temperature}°C</p><p>Description: ${description}</p>`;
})
.catch(error => {
console.error('Error fetching weather data:',
error);
weatherInfo.innerHTML = 'An error occurred while
fetching weather data.';
});
}
function showError(error) {
console.error(error);
weatherInfo.innerHTML = 'Unable to get weather data.
Please try again later.';
}
}
OUTPUT
2. JavaScript to interact with the Local Storage
locationstorage.html
<!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 = ' ' +
document.getElementById('input').value;
if (localStorage.getItem('data') == null) {
localStorage.setItem('data', '[]');
}
alert("Data saved to Local Storage!");
var old_data =
JSON.parse(localStorage.getItem('data'));
old_data.push(new_data);
localStorage.setItem('data',
JSON.stringify(old_data));
function retrieve() {
var outputContainer =
document.getElementById('outputContainer');
outputContainer.innerHTML = '';
if (localStorage.getItem('data') != null) {
var data =
JSON.parse(localStorage.getItem('data'));
for (var i = 0; i < data.length; i++) {
var paragraph = document.createElement('p');
paragraph.textContent = data[i];
outputContainer.appendChild(paragraph);
} else {
alert("No data found in Local Storage.");
}
function clearLocalStorage() {
localStorage.removeItem('data');
var outputContainer =
document.getElementById('outputContainer');
outputContainer.innerHTML = '';
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) {
event.dataTransfer.setData("text/plain",
event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var draggedElementId =
event.dataTransfer.getData("text/plain");
if (draggedElementId === "dragElement1") {
var draggedElement =
document.getElementById(draggedElementId);
document.getElementById("dropZone").appendChild(draggedElement);
var dragElement1Count =
document.querySelectorAll("#draggableContainer
#dragElement1").length;
if (dragElement1Count === 0) {
alert("Finish!");
}
} else {
alert("Are you sure that is blue?");
}
}
</script>
</body>
</html>
