All done

lesson-08/device-apis/main.js

@@ -1,5 +1,60 @@
-for (const button of document.querySelectorAll("button[id]")) {
-  button.addEventListener("click", () => {
-    alert("Not implemented yet.");
-  });
+async function fetchLocation() {
+  if ("geolocation" in navigator) {
+    navigator.geolocation.getCurrentPosition(async (position) => {
+      console.log(position.coords.latitude, position.coords.longitude);
+      const latitude = position.coords.latitude;
+      const longtitude = position.coords.longitude;
+      const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longtitude}&key=AIzaSyCU98cOt9Pe0XzfCAoI5bH-D6ZQB8a1ktw`;
+      console.log(url);
+      const response = await fetch(url);
+      data = await response.json();
+      document.getElementById("geolocation").innerHTML =
+        data.results[0].formatted_address;
+    });
+  } else {
+    throw new error("geolocation not avlible");
+  }
+}
+
+const locateMeButton = document.getElementById("locate-me");
+locateMeButton.addEventListener("click", async () => {
+  await fetchLocation();
+});
+
+if (navigator.onLine) {
+  document.getElementById("network-status").innerHTML = "Online";
+} else {
+  document.getElementById("network-status").innerHTML = "Offline";
 }
+
+document.getElementById("share").addEventListener("click", async () => {
+  const text = document.getElementById("text-content").value;
+  await navigator.share({
+    title: "MDN",
+    text: text,
+  });
+});
+
+document.getElementById("copy-to-clipboard").addEventListener("click", () => {
+  const text = document.getElementById("text-content").value;
+  navigator.clipboard.writeText(text);
+});
+
+document.getElementById("read-from-file").addEventListener("click", () => {
+  const text = document.getElementById("text-content").value;
+  var json_string = JSON.stringify(text, undefined, 2);
+  var link = document.createElement("a");
+  link.download = "text.json";
+  var blob = new Blob([json_string], { type: "text/plain" });
+  link.href = window.URL.createObjectURL(blob);
+  link.click();
+});
+
+document.getElementById("speak").addEventListener("click", () => {
+  var msg = new SpeechSynthesisUtterance();
+  msg.pitch = 5;
+  msg.rate = 8;
+  const text = document.getElementById("text-content").value;
+  msg.text = text;
+  window.speechSynthesis.speak(msg);
+});

lesson-08/device-apis/style.css

@@ -572,11 +572,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(240 249 255 / var(--tw-bg-opacity));
 }
 
-.bg-purple-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
-}
-
 .p-3 {
   padding: 0.75rem;
 }