Home View
++ This is the home content. Notice the URL has changed to include + #home. +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ Browser API Demos
++ Modern browsers come packed with powerful JavaScript APIs that can + give your static site capabilities that once required a native + application. These often require user permission for security and + privacy reasons. +
+Here are a few examples of what you can do.
++ + +
1. Geolocation API
++ Get the user's geographical location. This requires user permission. +
+ + +Code
+const geoBtn = document.getElementById('geo-btn');
+const geoOutput = document.getElementById('geo-output');
+
+geoBtn.addEventListener('click', () => {
+ if ('geolocation' in navigator) {
+ navigator.geolocation.getCurrentPosition((position) => {
+ const lat = position.coords.latitude;
+ const lon = position.coords.longitude;
+ geoOutput.textContent = `Latitude: ${lat}, Longitude: ${lon}`;
+ }, (error) => {
+ geoOutput.textContent = `Error: ${error.message}`;
+ });
+ } else {
+ geoOutput.textContent = 'Geolocation is not available.';
+ }
+});+ + +
2. Notifications API
++ Display desktop notifications to the user. This also requires + permission. +
+ + +Code
+const notifyBtn = document.getElementById('notify-btn');
+
+notifyBtn.addEventListener('click', () => {
+ if (!("Notification" in window)) {
+ alert("This browser does not support desktop notification");
+ } else if (Notification.permission === "granted") {
+ new Notification("Hi there!", { body: "This is a notification." });
+ } else if (Notification.permission !== "denied") {
+ Notification.requestPermission().then((permission) => {
+ if (permission === "granted") {
+ new Notification("Hi there!", { body: "This is a notification." });
+ }
+ });
+ }
+});+ + +
3. Web Speech API (Synthesis)
+Convert text to speech right in the browser.
+ + + +Code
+const speakBtn = document.getElementById('speak-btn');
+const speechText = document.getElementById('speech-text');
+
+speakBtn.addEventListener('click', () => {
+ if ('speechSynthesis' in window) {
+ const utterance = new SpeechSynthesisUtterance(speechText.value);
+ window.speechSynthesis.speak(utterance);
+ } else {
+ alert('Speech synthesis is not available.');
+ }
+});