Geolocation API
The Geolocation API allows users to share their location with websites.
Getting User Location
<button onclick="getLocation()">Get Location</button>
<p id="location"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("location").innerHTML = "Geolocation is not supported.";
}
}
function showPosition(position) {
document.getElementById("location").innerHTML = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
}
</script>Drag-and-Drop API
Allows users to drag and drop elements within a webpage.
<div id="dragItem" draggable="true">Drag me</div>
<script>
let item = document.getElementById("dragItem");
item.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text", event.target.id);
});
</script>Web Storage (LocalStorage, SessionStorage)
Web Storage enables storing data in a user’s browser.
LocalStorage Example
<input type="text" id="name">
<button onclick="saveName()">Save</button>
<script>
function saveName() {
localStorage.setItem("username", document.getElementById("name").value);
}
</script>APIs enhance interactivity in web applications. Next, we’ll explore HTML5 features.