Scribd
Upload
20 views9 pages

FSPR4

The document discusses implementing the Geolocation API to retrieve a user's location, using JavaScript to interact with local storage, and demonstrating the Drag and Drop API.

Uploaded by

Aayush Sarda
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
20 views9 pages

FSPR4

The document discusses implementing the Geolocation API to retrieve a user's location, using JavaScript to interact with local storage, and demonstrating the Drag and Drop API.

Uploaded by

Aayush Sarda
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/ 9

‭ AME: YANA JOSEPH‬

N
‭ROLL NUMBER: 22BCM066‬
‭DIVISION:F4‬
‭COURSE: FULL STACK WEB DEVELOPMENT‬
‭COURSE CODE:2CS201‬

‭PRACTICAL 4‬
‭1. Implement‬‭Geolocation API‬‭to retrieve the user's current location.‬

‭<!DOCTYPE html>ml lang="en">‬

‭<head>‬

‭<meta charset="UTF-8">‬

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

‭<titl‬

‭e>Geolocation Example</title>‬

‭<style>‬

‭#location-info {‬

‭font-size: 18px;‬
‭margin-top: 20px;‬

‭}‬

‭</style>‬

‭</head>‬

‭<body>‬

‭<h1>Geolocation Example</h1>‬

‭<div id="location-info">‬

‭<strong>Latitude:</strong> <span id="latitude"></span><br>‬

‭<strong>Longitude:</strong> <span id="longitude"></span>‬

‭</div>‬

‭<script>‬

‭// Check if the browser supports the Geolocation API‬

‭if (navigator.geolocation) {‬

‭// Request the user's current location‬

‭navigator.geolocation.getCurrentPosition(showPosition, showError);‬

‭} else {‬

‭// Display an error message if the Geolocation API is not supported‬

‭showError("Geolocation is not supported by this browser.");‬

‭}‬

‭// Callback function to handle the successful retrieval of the user's location‬

‭function showPosition(position) {‬

‭// Extract latitude and longitude from the position object‬

‭var latitude = position.coords.latitude;‬


‭var longitude = position.coords.longitude;‬

‭// Display the latitude and longitude on the web page‬

‭document.getElementById("latitude").textContent = latitude.toFixed(6);‬

‭document.getElementById("longitude").textContent = longitude.toFixed(6);‬

‭}‬

‭// Callback function to handle errors during the retrieval of the user's location‬

‭function showError(error) {‬

‭var errorMessage;‬

‭switch (error.code) {‬

‭case error.PERMISSION_DENIED:‬

‭errorMessage = "User denied the request for Geolocation.";‬

‭break;‬

‭case error.POSITION_UNAVAILABLE:‬

‭errorMessage = "Location information is unavailable.";‬

‭break;‬

‭case error.TIMEOUT:‬

‭errorMessage = "The request to get user location timed out.";‬

‭break;‬

‭case error.UNKNOWN_ERROR:‬

‭errorMessage = "An unknown error occurred.";‬

‭break;‬

‭default:‬

‭errorMessage = "An unspecified error occurred.";‬

‭break;‬
‭}‬

‭// Display the error message on the web page‬

‭alert(errorMessage);‬

‭}‬

‭</script>‬

‭</body>‬

‭</html>‬

‭2. JavaScript to interact with the Local Storage‬

‭<!DOCTYPE html>‬

‭<html lang="en">‬

‭<head>‬

‭<meta charset="UTF-8">‬

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

‭<title>Local Storage Example</title>‬

‭</head>‬

‭<body>‬

‭<h1>Local Storage Example</h1>‬

‭<button onclick="saveData()">Save Data</button>‬

‭<button onclick="retrieveData()">Retrieve Data</button>‬

‭<script>‬

‭// Function to save data to Local Storage‬

‭function saveData() {‬
‭// Get data from user (for simplicity, we're using a prompt here)‬

‭var userInput = prompt("Enter some data:");‬

‭// Check if the user entered something‬

‭if (userInput) {‬

‭// Save data to Local Storage with a specific key‬

‭localStorage.setItem("userData", userInput);‬

‭alert("Data saved to Local Storage!");‬

‭} else {‬

‭alert("Please enter some data.");‬

‭}‬

‭}‬

‭// Function to retrieve data from Local Storage‬

‭function retrieveData() {‬

‭// Retrieve data from Local Storage using the key‬

‭var storedData = localStorage.getItem("userData");‬

‭// Check if there is any stored data‬

‭if (storedData) {‬

‭alert("Data retrieved from Local Storage: " + storedData);‬

‭} else {‬

‭alert("No data found in Local Storage.");‬

‭}‬

‭}‬

‭</script>‬

‭</body>‬
‭</html>‬

‭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 Example</title>‬

‭<style>‬

‭#dragElement {‬

‭width: 100px;‬

‭height: 100px;‬
‭background-color: lightblue;‬

‭border: 2px solid darkblue;‬

‭margin: 10px;‬

‭padding: 10px;‬

‭cursor: move;‬

‭}‬

‭#dropZone {‬

‭width: 300px;‬

‭height: 200px;‬

‭background-color: lightgreen;‬

‭border: 2px dashed darkgreen;‬

‭margin-top: 20px;‬

‭padding: 10px;‬

‭}‬

‭</style>‬

‭</head>‬

‭<body>‬

‭<h1>Drag and Drop Example</h1>‬

‭<div id="dragElement" draggable="true" ondragstart="dragStart(event)">‬

‭Drag me!‬

‭</div>‬

‭<div id="dropZone" ondragover="allowDrop(event)" ondrop="drop(event)">‬

‭Drop here!‬
‭</div>‬

‭<script>‬

‭// Function to handle the drag start event‬

‭function dragStart(event) {‬

‭// Set data to be transferred during drag‬

‭event.dataTransfer.setData("text/plain", event.target.id);‬

‭}‬

‭// Function to allow dropping on the drop zone‬

‭function allowDrop(event) {‬

‭event.preventDefault();‬

‭}‬

‭// Function to handle the drop event‬

‭function drop(event) {‬

‭event.preventDefault();‬

‭// Get the dragged element's id from the data transfer‬

‭var draggedElementId = event.dataTransfer.getData("text/plain");‬

‭// Get the dragged element by id‬

‭var draggedElement = document.getElementById(draggedElementId);‬

‭// Append the dragged element to the drop zone‬

‭document.getElementById("dropZone").appendChild(draggedElement);‬

‭}‬

‭</script>‬

‭</body>‬

‭</html>‬

You might also like