Added indexDb support

index.html

@@ -91,7 +91,13 @@
 </body>
 <script>
     "use strict";
+    var CurrentPokemon = new Object();
+    var LoadedSuccessfully = false;
+
     document.getElementById('main').onload = function () {
+        loadNewPokemon();
+    }
+    function loadNewPokemon(){
         //We will need to load an image from the pokeAPI with his description and a random name/age
         fetch("https://pokeapi.co/api/v2/pokemon/" + Math.floor(Math.random() * 905))
             .then((response) => {
@@ -106,13 +112,22 @@
                                                 response.json()
                                                     .then((pokemonInfo) => {
                                                         console.log(pokemonData.id);
+                                                        LoadedSuccessfully = true;
+                                                        var age = (Math.floor(Math.random() * (65 - 18)) + 18);
+
+                                                        CurrentPokemon.name = randomName[0].name;
+                                                        CurrentPokemon.id = uniqid();
+                                                        CurrentPokemon.pokemonId = pokemonData.id;
+                                                        CurrentPokemon.pp = pokemonData.sprites.front_shiny;
+                                                        CurrentPokemon.age = age;
+                                                        CurrentPokemon.description = pokemonInfo.flavor_text_entries[0].flavor_text;
+
                                                         document.getElementById("pokemonName").innerHTML = randomName[0].name;
                                                         document.getElementById("pokemonImage").src = pokemonData.sprites.front_shiny;
-                                                        document.getElementById("pokemonAge").innerHTML = (Math.floor(Math.random() * (65 - 18)) + 18);
+                                                        document.getElementById("pokemonAge").innerHTML = age;
                                                         document.getElementById("pokemonDescription").innerHTML = pokemonInfo.flavor_text_entries[0].flavor_text;
 
                                                         window.navigator.geolocation.getCurrentPosition(function (pos) {
-                                                            console.log(pos);
                                                             var lat = pos.coords.latitude;
                                                             var lon = pos.coords.longitude;
 
@@ -122,6 +137,7 @@
                                                             let dist = distance(lon, lat, pokemonLongitude, pokemonLatitude);
                                                             document.getElementById("pokemonDistance").innerHTML = Math.floor(dist) + " Km away";
                                                         })
+
                                                     })
                                             }).catch((response) => {
                                                 alert("Bouhouuuuu could not get any further infos on that dumbass");
@@ -143,15 +159,23 @@
             })
     }
     document.getElementById('likeButton').onclick = function () {
-        alert("You want to like");
+        if(LoadedSuccessfully){
+            saveToIndexedDB("likes",CurrentPokemon);
+            loadNewPokemon();
+        }
     };
     document.getElementById('nopeButton').onclick = function () {
-        alert("You want to nope");
+        if(LoadedSuccessfully){
+            saveToIndexedDB("nopes",CurrentPokemon);
+            loadNewPokemon();
+        }
     }
     document.getElementById('favoriteButton').onclick = function () {
-        alert("You want to fav");
+        if(LoadedSuccessfully){
+            saveToIndexedDB("favorites",CurrentPokemon);
+            loadNewPokemon();
+        }
     }
-
     // !! THIS METHOD IS NOT MINE, ITS FROM STACK OVERFLOW : https://stackoverflow.com/questions/13840516/how-to-find-my-distance-to-a-known-location-in-javascript
     function distance(lon1, lat1, lon2, lat2) {
         var R = 6371; // Radius of the earth in km
@@ -173,11 +197,49 @@
     }
 
     window.navigator.geolocation.getCurrentPosition(function (pos) {
-        console.log(pos);
-        console.log(
-            distance(pos.coords.longitude, pos.coords.latitude, 42.37, 71.03)
-        );
+        //console.log(pos);
+        //console.log(
+            //distance(pos.coords.longitude, pos.coords.latitude, 42.37, 71.03)
+        //);
     });
+
+    // THIS FUNCTION IS ALSO NOT MINE AND ITS FROM STACK OVERFLOW TOO : https://stackoverflow.com/questions/4872380/uniqid-in-javascript-jquery
+    function uniqid(prefix = "", random = false) {
+        const sec = Date.now() * 1000 + Math.random() * 1000;
+        const id = sec.toString(16).replace(/\./g, "").padEnd(14, "0");
+        return `${prefix}${id}${random ? `.${Math.trunc(Math.random() * 100000000)}` : ""}`;
+    };
+
+    //Wow again, not my function almost seems like I did nothing in that code
+    function saveToIndexedDB(storeName, object) {
+        return new Promise(
+            function (resolve, reject) {
+                if (object.id === undefined) reject(Error('object has no id.'));
+                var dbRequest = indexedDB.open(storeName);
+                dbRequest.onerror = function (event) {
+                    reject(Error("IndexedDB database error"));
+                };
+                dbRequest.onupgradeneeded = function (event) {
+                    var database = event.target.result;
+                    var objectStore = database.createObjectStore(storeName, { keyPath: "id" });
+                };
+                dbRequest.onsuccess = function (event) {
+                    var database = event.target.result;
+                    var transaction = database.transaction([storeName], 'readwrite');
+                    var objectStore = transaction.objectStore(storeName);
+                    var objectRequest = objectStore.put(object); // Overwrite if exists
+                    objectRequest.onerror = function (event) {
+                        reject(Error('Error text'));
+                    };
+                    objectRequest.onsuccess = function (event) {
+                        resolve('Data saved OK');
+                        console.log("Data saved successfully");
+                    };
+                };
+            }
+        );
+    }
+
 </script>
 
 </html>