Scribd
Upload
34 views

Full Stack Web Development Practice - API

The document implements the Geolocation API to retrieve user location, uses local storage to save and retrieve data, and demonstrates drag and drop functionality.

Uploaded by

Roshni Rana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

Full Stack Web Development Practice - API

The document implements the Geolocation API to retrieve user location, uses local storage to save and retrieve data, and demonstrates drag and drop functionality.

Uploaded by

Roshni Rana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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>

You might also like