Scribd
Upload
20 views9 pages

Practical 4

The document describes three JavaScript practical implementations: 1) Using the Geolocation API to retrieve a user's location, 2) Using local storage to build a student management system, and 3) Demonstrating drag and drop functionality with a fruit matching game.

Uploaded by

nidz2245
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

Practical 4

The document describes three JavaScript practical implementations: 1) Using the Geolocation API to retrieve a user's location, 2) Using local storage to build a student management system, and 3) Demonstrating drag and drop functionality with a fruit matching game.

Uploaded by

nidz2245
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

PRACTICAL-4

NAME: - Nidhi Bangar


ROLL NO.: - 22bcm044
COURSE CODE & NAME: - 2CS201 FSWD
AIM: -
1. Implement Geolocation API to retrieve the
user’s current location.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geolocation</title>
<style>
#loc-info{
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Geolocation</h1>
<div id="loc-info">
<strong>Latitude</strong><span id="latitude"></span><br>
<strong>Longitude</strong><span id="longitude"></span>
</div>
<script>
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);
}
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;
}
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>Student Management System</title>
</head>
<body>
<h1>Student Management System</h1>

<button onclick="addStudent()">Add Student</button>


<button onclick="getStudent()">Get Student</button>
<button onclick="removeStudent()">Remove Student</button>
<button onclick="clearStorage()">Clear Storage</button>

<script>
function addStudent() {
var name = prompt("Enter student's name:");
var rollNo = prompt("Enter student's roll number:");
var gender = prompt("Enter student's gender:");
var student = { name: name, rollNo: rollNo, gender: gender };
var existingStudents =
JSON.parse(localStorage.getItem('students')) || [];
existingStudents.push(student);
localStorage.setItem('students',
JSON.stringify(existingStudents));
console.log("Student added:", student);
alert("Student added successfully!");
}

function getStudent() {
var rollNo = prompt("Enter student's roll number to retrieve
information:");
var existingStudents =
JSON.parse(localStorage.getItem('students')) || [];
var foundStudent = existingStudents.find(function(student) {
return student.rollNo === rollNo;
});

if (foundStudent) {
console.log("Student information:");
console.log("Name: " + foundStudent.name);
console.log("Roll No: " + foundStudent.rollNo);
console.log("Gender: " + foundStudent.gender);
alert("Student information retrieved successfully!");
} else {
console.log("Student not found.");
alert("Student not found.");
}
}

function removeStudent() {
var rollNo = prompt("Enter student's roll number to remove:");
var existingStudents =
JSON.parse(localStorage.getItem('students')) || [];
var updatedStudents = existingStudents.filter(function(student) {
return student.rollNo !== rollNo;
});
localStorage.setItem('students', JSON.stringify(updatedStudents));
console.log("Student with roll number '" + rollNo + "' removed
from storage.");
alert("Student removed successfully!");
}

function clearStorage() {
localStorage.removeItem('students');
console.log("Student data cleared from local storage.");
alert("Student data cleared successfully!");
}
</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>Fruit Color Matching Game</title>
<style>
.draggable {
width: 100px;
height: 50px;
background-color: lightblue;
border: 2px solid darkblue;
margin: 10px;
padding: 10px;
cursor: move;
display: inline-block;
}

.dropZone {
width: 150px;
height: 100px;
margin: 10px;
padding: 10px;
display: inline-block;
}

#redDropZone {
background-color: rgb(247, 31, 31);

#yellowDropZone {
background-color: rgb(255, 255, 5);

#orangeDropZone {
background-color: rgb(255, 136, 1);

#message {
margin-top: 10px;
font-weight: bold;
color: darkgreen;
}
</style>
</head>
<body>
<h1>Fruit Color Matching Game</h1>

<div id="apple" class="draggable" draggable="true"


ondragstart="dragStart(event)">Apple</div>
<div id="banana" class="draggable" draggable="true"
ondragstart="dragStart(event)">Banana</div>
<div id="orange" class="draggable" draggable="true"
ondragstart="dragStart(event)">Orange</div>
<div id="redDropZone" class="dropZone" ondragover="allowDrop(event)"
ondrop="drop(event)">Red</div>
<div id="yellowDropZone" class="dropZone" ondragover="allowDrop(event)"
ondrop="drop(event)">Yellow</div>
<div id="orangeDropZone" class="dropZone" ondragover="allowDrop(event)"
ondrop="drop(event)">Orange</div>

<div id="message"></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");


var draggedElement = document.getElementById(draggedElementId);
var dropZone = event.target;

dropZone.appendChild(draggedElement);

var messageElement = document.getElementById("message");


if (checkMatch(draggedElementId, dropZone.id)) {
messageElement.textContent = "Correct match!";
} else {
messageElement.textContent = "Incorrect match. Try again!";
}
}

function checkMatch(fruitId, colorDropZoneId) {

var correctMatches = {
"apple": "redDropZone",
"banana": "yellowDropZone",
"orange": "orangeDropZone"
};

return correctMatches[fruitId] === colorDropZoneId;


}
</script>
</body>
</html>

You might also like