Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    Practical 4

    Uploaded by

    nidz2245
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Practical 4

    Uploaded by

    nidz2245
    6 views9 pages
    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.

    Original Description:

    this is a practical of fswd

    Original Title

    PRACTICAL 4

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    6 views9 pages

    Practical 4

    Uploaded by

    nidz2245
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 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