Scribd
Upload
51 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 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
We take content rights seriously. If you suspect this is your content, claim it here.
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