Assignments Of Class 19: Introduction to HTML5 APIs

Rashmi Mishra
personRashmi Mishra
January 13, 20257 minute read
0

 

Assignments  Of Class 19: Introduction to HTML5 APIs

Assignments on HTML5 Geolocation API and Canvas API

Here are 10 assignments based on the concepts of the HTML5 Geolocation API and Canvas API, each with step-by-step solutions and detailed explanations.

Assignment 1: Display the User’s Location Using Geolocation API

Objective: Use the Geolocation API to get the user's geographical coordinates and display them on the webpage.

Step-by-Step Solution:

1.   Create an HTML file with a placeholder to display the latitude and longitude.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Geolocation Example</title>
</head>
<body>
  <h1>Geolocation Test</h1>
  <p>Latitude: <span id="latitude"></span></p>
  <p>Longitude: <span id="longitude"></span></p>
  <script src="geolocation.js"></script>
</body>
</html>

2.   Create a JavaScript file (geolocation.js) that fetches and displays the user’s location.

javascript
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    document.getElementById('latitude').textContent = position.coords.latitude;
    document.getElementById('longitude').textContent = position.coords.longitude;
  }, function(error) {
    alert('Error: ' + error.message);
  });
} else {
  alert('Geolocation is not supported by this browser.');
}

3.   Test: Open the HTML file in the browser. The latitude and longitude of the user’s current location should be displayed.

Assignment 2: Create a Google Map Using Geolocation API

Objective: Use the Geolocation API to retrieve the user’s location and display it on an embedded Google Map.

Step-by-Step Solution:

1.   Create the HTML file with a <div> for displaying the map.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Google Map with Geolocation</title>
</head>
<body>
  <h1>Your Location on Google Map</h1>
  <div id="map" style="width: 600px; height: 400px;"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  <script src="geolocationMap.js"></script>
</body>
</html>

2.   Create a JavaScript file (geolocationMap.js) to fetch the user's location and display it on the map.

javascript
function initMap() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var userLat = position.coords.latitude;
      var userLon = position.coords.longitude;
 
      var mapOptions = {
        center: { lat: userLat, lng: userLon },
        zoom: 15
      };
 
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      var marker = new google.maps.Marker({
        position: { lat: userLat, lng: userLon },
        map: map
      });
    }, function(error) {
      alert('Error: ' + error.message);
    });
  } else {
    alert('Geolocation is not supported by this browser.');
  }
}

3.   Test: Replace YOUR_API_KEY with your actual Google Maps API key and test the functionality in the browser.

Assignment 3: Create a Circle on Canvas

Objective: Use the Canvas API to draw a circle on a webpage.

Step-by-Step Solution:

1.   Create the HTML file with a canvas element.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Circle</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="circle.js"></script>
</body>
</html>

2.   Create a JavaScript file (circle.js) to draw a circle on the canvas.

javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
ctx.beginPath();
ctx.arc(250, 250, 100, 0, 2 * Math.PI); // Draw a circle with radius 100 at (250, 250)
ctx.fillStyle = 'blue'; // Set fill color to blue
ctx.fill(); // Fill the circle

3.   Test: The page should display a blue circle on the canvas element.

Assignment 4: Draw a Rectangle Using Canvas API

Objective: Draw a rectangle on the canvas using JavaScript.

Step-by-Step Solution:

1.   Create the HTML file with a canvas element.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Rectangle</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="rectangle.js"></script>
</body>
</html>

2.   Create a JavaScript file (rectangle.js) to draw a rectangle on the canvas.

javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
ctx.fillStyle = 'green'; // Set fill color to green
ctx.fillRect(50, 50, 300, 150); // Draw a rectangle at (50, 50) with width 300px and height 150px

3.   Test: The page should display a green rectangle on the canvas.

Assignment 5: Animate a Moving Rectangle on Canvas

Objective: Animate a rectangle moving across the canvas.

Step-by-Step Solution:

1.   Create the HTML file with a canvas element.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Animation</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="animation.js"></script>
</body>
</html>

2.   Create a JavaScript file (animation.js) to animate the rectangle.

javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
var x = 0;
var y = 50;
var width = 100;
var height = 50;
 
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
  ctx.fillStyle = 'red'; // Set fill color to red
  ctx.fillRect(x, y, width, height); // Draw the rectangle
 
  x += 5; // Move the rectangle horizontally
  if (x > canvas.width) x = 0; // Reset the rectangle to the start when it reaches the edge
 
  requestAnimationFrame(animate); // Call animate function repeatedly for animation
}
 
animate(); // Start the animation

3.   Test: The rectangle should move across the canvas from left to right.

Assignment 6: Draw a Line on Canvas

Objective: Use the Canvas API to draw a line from one point to another.

Step-by-Step Solution:

1.   Create the HTML file with a canvas element.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Line</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="line.js"></script>
</body>
</html>

2.   Create a JavaScript file (line.js) to draw a line.

javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
ctx.beginPath();
ctx.moveTo(50, 50); // Start point (50, 50)
ctx.lineTo(450, 450); // End point (450, 450)
ctx.stroke(); // Draw the line

3.   Test: The page should display a line drawn from the top-left to the bottom-right of the canvas.

Assignment 7: Combine Geolocation and Canvas to Place a Marker on Map

Objective: Use the Geolocation API to get the user's position and place a marker on a map drawn with the Canvas API.

Step-by-Step Solution:

1.   Create the HTML file with a canvas element.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Marker</title>
</head>
<body>
  <h1>Your Location on Canvas</h1>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="geolocationCanvas.js"></script>
</body>
</html>

2.   Create a JavaScript file (geolocationCanvas.js) to draw a map and a marker at the user’s location.

javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var userLat = position.coords.latitude;
    var userLon = position.coords.longitude;
 
    // Normalize the coordinates to fit the canvas (simple mapping)
    var x = (userLon + 180) * (canvas.width / 360); // Convert longitude to x position
    var y = (90 - userLat) * (canvas.height / 180); // Convert latitude to y position
 
    // Draw the map (basic representation)
    ctx.fillStyle = 'lightblue';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
 
    // Draw the marker
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, 2 * Math.PI); // Draw a red marker
    ctx.fill();
  }, function(error) {
    alert('Error: ' + error.message);
  });
} else {
  alert('Geolocation is not supported by this browser.');
}

3.   Test: The user’s location should be represented by a red marker on the canvas map.

Assignment 8: Draw a Gradient on Canvas

Objective: Use the Canvas API to draw a linear gradient.

Step-by-Step Solution:

1.   Create the HTML file with a canvas element.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Gradient</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="gradient.js"></script>
</body>
</html>

2.   Create a JavaScript file (gradient.js) to draw a gradient.

javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(1, 'yellow');
 
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill the entire canvas with the gradient

3.   Test: The canvas should be filled with a gradient transitioning from blue to yellow.

Assignment 9: Track User's Movement on the Map

Objective: Track the user’s movement using the Geolocation API and update their position on a canvas map.

Step-by-Step Solution:

1.   Create the HTML file with a canvas element.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tracking User Movement</title>
</head>
<body>
  <h1>Track User Movement</h1>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="trackMovement.js"></script>
</body>
</html>

2.   Create a JavaScript file (trackMovement.js) to track the user's position and update the canvas.

javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
var userLat, userLon;
 
function updatePosition(position) {
  userLat = position.coords.latitude;
  userLon = position.coords.longitude;
 
  var x = (userLon + 180) * (canvas.width / 360);
  var y = (90 - userLat) * (canvas.height / 180);
 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'lightblue';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
 
  ctx.fillStyle = 'red';
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fill();
}
 
if (navigator.geolocation) {
  navigator.geolocation.watchPosition(updatePosition, function(error) {
    alert('Error: ' + error.message);
  });
} else {
  alert('Geolocation is not supported by this browser.');
}

3.   Test: The user's position should be tracked and updated in real-time on the canvas.

Assignment 10: Use Geolocation to Display a Custom Message Based on Location

Objective: Use the Geolocation API to display a message based on the user's location.

Step-by-Step Solution:

1.   Create the HTML file to display the message.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Location Message</title>
</head>
<body>
  <h1>Location Message</h1>
  <p id="message"></p>
  <script src="locationMessage.js"></script>
</body>
</html>

2.   Create a JavaScript file (locationMessage.js) to fetch the location and display a message.

javascript
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var userLat = position.coords.latitude;
    var userLon = position.coords.longitude;
 
    var message = 'You are currently at latitude: ' + userLat + ' and longitude: ' + userLon;
 
    if (userLat > 40) {
      message += ' - You are in the Northern Hemisphere!';
    } else {
      message += ' - You are in the Southern Hemisphere!';
    }
 
    document.getElementById('message').textContent = message;
  }, function(error) {
    alert('Error: ' + error.message);
  });
} else {
  alert('Geolocation is not supported by this browser.');
}

3.   Test: The page should display a message about the user's location.

These assignments cover a range of basic to intermediate concepts for both the Geolocation API and Canvas API, offering hands-on experience to practice these essential web development features.

You said:

WRITE 50 no of MCQs only FROM ABOVE CONCEPT with explanation

ChatGPT said:

ChatGPT

Tags

You Might Like

Show more
assignments

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post link