Desktop UI & Features Ready

MustakAbsarKhan · Aug 31, 2022 · 16ca203 · 16ca203
1 parent 688487b
commit 16ca203
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 78 deletions.
diff --git a/dist/css/style.css b/dist/css/style.css
@@ -33,6 +33,9 @@ body {
   justify-content: center;
   text-align: left;
 }
+.main-body .search-bar > input {
+  padding-left: 20px;
+}
 .main-body .search-bar #searchbox {
   height: 6.5843621399vh;
   width: 34.0277777778vw;
@@ -73,8 +76,8 @@ body {
 }
 .main-body .main-container .content-bar .line {
   border-left: 0.1388888889vw solid hsl(0deg, 0%, 59%);
-  height: 10.7983539095vh;
-  margin-top: 2%;
+  height: 11.8518518519vh;
+  margin-top: 1%;
 }
 .main-body .main-container .content-bar > div > label {
   font-size: 0.9722222222vw;
@@ -115,12 +118,7 @@ body {
 .main-body .main-container #map {
   z-index: 2;
   position: relative;
-  height: calc(618px - 20vw);
+  height: calc(656px - 20vw);
   width: 100%;
   margin-top: 4.6%;
-}
-.main-body .dev-info {
-  margin: 5px;
-  color: #FFFFFF;
-  font-size: 0.8333333333vw;
 }/*# sourceMappingURL=style.css.map */
diff --git a/dist/css/style.css.map b/dist/css/style.css.map
diff --git a/index.html b/index.html
@@ -21,8 +21,8 @@
     <p class="ip-header">IP Address Tracker</p>
 
     <div class="search-bar">
-      <input type="text" id="searchbox" placeholder="     Search for any IP address or domain">
-      <button class="searchbox-button"><img class="searchbox-button-img" src="./images/icon-arrow.svg"></button>
+      <input type="text" id="searchbox" placeholder="&nbsp; Search for any IP address">
+      <button class="searchbox-button button"><img class="searchbox-button-img" src="./images/icon-arrow.svg"></button>
     </div>
 
     <div class="main-container">
@@ -63,7 +63,7 @@
       <div class="sub-content-bar">
         <div class="sub-content-bar-content">
           <div class="currency-code">
-            <label for="currency-data">CURRENCY</label><br>
+            <label >CURRENCY</label><br>
             <p class="currency-data">BDT</p>
           </div>
           <div class="flags">
@@ -80,10 +80,6 @@
       </div>
 
       </div>
-
-      <div class="dev-info">
-        <p>&#169;&nbsp;Developed By&nbsp;<strong>Mohammad Mustak Absar Khan</strong></br>To Visit Repo,&nbsp;<a target="_blank" href="https://github.com/MustakAbsarKhan">Click Here</a></p>
-      </div>
   </main>
 
   <script src="index.js" defer></script>

diff --git a/index.js b/index.js
@@ -1,4 +1,7 @@
+"use strict";
 window.addEventListener('load',()=>{
+    let searchbox = document.querySelector("#searchbox");
+    let button = document.querySelector('.button');
     let ipAddress = document.querySelector(".ip-address");
     let cityData = document.querySelector(".city-data");
     let countryData = document.querySelector(".country-data");    
@@ -9,15 +12,37 @@ window.addEventListener('load',()=>{
     let currencyData = document.querySelector(".currency-data");
     let flagIcon = document.querySelector(".flag-icon");
     let currencyconvertData = document.querySelector(".currency-convert-data");
+    let flag = "green";
+    let count = 0;
+    let params = new URLSearchParams({
+        apiKey:`7235e1cf346f494dad14d474a9a0e006`
+    });
 
-    let ipgeolocationAPI = `https://api.ipgeolocation.io/ipgeo?apiKey=038933b9d1e74176ba6c610f65af08a6&ip=`;//change api key with own key
+
+    let ipgeolocationAPI = `https://api.ipgeolocation.io/ipgeo?${params}&ip=`;//change api key with own key
     ipgeolocationapiCALL(ipgeolocationAPI);
 
     let geopluginAPI = `http://www.geoplugin.net/json.gp?`;
     geopluginapiCALL(geopluginAPI);
 
-    function ipgeolocationapiCALL(api){//returns "ip": "103.145.74.149","continent_code": "AS","continent_name": "Asia","country_code2": "BD","country_code3": "BGD","country_name": "Bangladesh","country_capital": "Dhaka","state_prov": "Dhaka Division","district": "Savar Upazila","city": "Savar Union","zipcode": "","latitude": "23.86170","longitude": "90.25649","is_eu": false,"calling_code": "+880","country_tld": ".bd","languages": "bn-BD,en","country_flag": "https://ipgeolocation.io/static/flags/bd_64.png","geoname_id": "1200292","isp": "Master Net","connection_type": "","organization": "Master Net","currency": {"code": "BDT","name": "Bangladeshi Taka","symbol": "৳"},"time_zone": {"name": "Asia/Dhaka","offset": 6,"current_time": "2022-08-28 15:24:16.540+0600","current_time_unix": 1661678656.54,"is_dst": false,"dst_savings": 0
+    //if user clicks on the button
+    button.addEventListener('click',function(){
+        if(searchbox.value==""){
+            ipgeolocationapiCALL(ipgeolocationAPI);
+            geopluginapiCALL(geopluginAPI);
+        }else{
+            ipgeolocationAPI = `https://api.ipgeolocation.io/ipgeo?${params}&ip=`+searchbox.value;
+            geopluginAPI = `http://www.geoplugin.net/json.gp?ip=`+searchbox.value;
+
+            flag = "red";
+            count++;
+            console.log(`current count in listenr is ${count}`)
+            ipgeolocationapiCALL(ipgeolocationAPI);
+            geopluginapiCALL(geopluginAPI);
+        };
+    });
 
+    function ipgeolocationapiCALL(api){//returns "ip": "103.145.74.149","continent_code": "AS","continent_name": "Asia","country_code2": "BD","country_code3": "BGD","country_name": "Bangladesh","country_capital": "Dhaka","state_prov": "Dhaka Division","district": "Savar Upazila","city": "Savar Union","zipcode": "","latitude": "23.86170","longitude": "90.25649","is_eu": false,"calling_code": "+880","country_tld": ".bd","languages": "bn-BD,en","country_flag": "https://ipgeolocation.io/static/flags/bd_64.png","geoname_id": "1200292","isp": "Master Net","connection_type": "","organization": "Master Net","currency": {"code": "BDT","name": "Bangladeshi Taka","symbol": "৳"},"time_zone": {"name": "Asia/Dhaka","offset": 6,"current_time": "2022-08-28 15:24:16.540+0600","current_time_unix": 1661678656.54,"is_dst": false,"dst_savings": 0
         fetch(api)
         .then((response)=>response.json())//collects data as json
         .then((data)=>{
@@ -27,7 +52,6 @@ window.addEventListener('load',()=>{
             const {city,country_name,isp,country_flag,latitude,longitude} = data;//Dhaka, Bangladesh,Master Net
             const {current_time,name} = data.time_zone;//"2022-08-27 23:25:49.527+0600";
             const {code,symbol} = data.currency;//BDT,TAKA SYMBOL
-            //const currencyNAME = data.currency.name;//Bangladeshi Taka
 
             let timezone = current_time.slice(current_time.length-5); //+0600
             let date = current_time.slice(0,current_time.search(" "));// 2022-08-27
@@ -42,67 +66,92 @@ window.addEventListener('load',()=>{
             timeData.textContent = time+",";
             dateData.textContent = date;
             ispData.textContent = isp;
-            currencyData.textContent = code+`(${symbol})`;
+            currencyData.textContent = code+` (${symbol})`;
             flagIcon.src = country_flag;
 
-            //map initiation
-            var map = L.map('map').setView([latitude, longitude], 13);
-
-            //maptile setup
-            L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=Kiarb32YtKIgXk1i9lL1',{
-                tileSize: 512,
-                zoomOffset: -1,
-                minZoom: 1,
-                attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
-                crossOrigin: true
-            }).addTo(map); 
-
-            //map icon
-            var blackIcon = L.icon({
-                iconUrl: 'images/icon-location.svg',
-                iconSize: [30, 40]
-            });
-
-            //marker & popup on marker
-            L.marker([latitude, longitude],{icon: blackIcon}).addTo(map)
-            .bindPopup('Your IP Shows You Here')
-            .openPopup();
-
-            //popup on map click
-            var popup = L.popup();
-
-            function onMapClick(e) {
-                popup
-                    .setLatLng(e.latlng)
-                    .setContent("You clicked the map at " + e.latlng.toString())
-                    .openOn(map);
-            }
-            map.on('click', onMapClick);
-
-            //leaflet-locatecontrol plugin
-            var lc = L.control.locate({
-                position: 'topleft',
-                tap: false,
-                strings: {
-                    title: "Click here, to get your device's current location"
-                },
-                locateOptions: {
-                    enableHighAccuracy: true
+            mapload ();
+
+            function mapload (){
+                count++;
+                if(count===1){
+                    //map initiation
+                    var map = L.map('map').setView([latitude, longitude], 13);
+                    console.log(`count ${count} of if initialized`)
+                }else if(count === 2){
+                    console.log(`count is now ${count} and else if running`);
+                    var map = L.map('map').setView([latitude, longitude], 13);
+                    count --;
                 }
-            }).addTo(map);
 
+                //maptile setup
+                L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=Kiarb32YtKIgXk1i9lL1',{
+                    tileSize: 512,
+                    zoomOffset: -1,
+                    minZoom: 1,
+                    attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
+                    crossOrigin: true
+                }).addTo(map); 
+
+                //map icon
+                var blackIcon = L.icon({
+                    iconUrl: 'images/icon-location.svg',
+                    iconSize: [30, 40]
+                });
+
+                //marker & popup on marker
+                L.marker([latitude, longitude],{icon: blackIcon}).addTo(map)
+                .bindPopup('Your IP Shows You Here')
+                .openPopup();
+
+                //popup on map click
+                var popup = L.popup();
+
+                function onMapClick(e) {
+                    popup
+                        .setLatLng(e.latlng)
+                        .setContent("You clicked the map at " + e.latlng.toString())
+                        .openOn(map);
+                }
+                map.on('click', onMapClick);
+
+                //leaflet-locatecontrol plugin
+                var lc = L.control.locate({
+                    position: 'topleft',
+                    tap: false,
+                    strings: {
+                        title: "Click here, to get your device's current location"
+                    },
+                    locateOptions: {
+                        enableHighAccuracy: true
+                    }
+                }).addTo(map);
+                //console.log(map);
+                //console.log(flag);
+
+                count--;
+                console.log(`count has returned to 0 ${count}`)
+
+                function mapOff(){
+                    map.off();
+                    map.remove();
+                    console.log(` mapoff running using event listener`);
+                };
+
+                button.addEventListener('click',mapOff);
+            };
+
         });
-    };
+    }
 
     //Uses geopluginAPI for fetching currency value and conversion rate
     function geopluginapiCALL(api){//returns "geoplugin_request": "103.145.74.136","geoplugin_status": 200,"geoplugin_delay": "2ms","geoplugin_credit": "Some of the returned data includes GeoLite data created by MaxMind, available from <a href='http://www.maxmind.com'>http://www.maxmind.com</a>.","geoplugin_city": "Dhaka","geoplugin_region": "Dhaka Division","geoplugin_regionCode": "13","geoplugin_regionName": "Dhaka","geoplugin_areaCode": "","geoplugin_dmaCode": "","geoplugin_countryCode": "BD","geoplugin_countryName": "Bangladesh","geoplugin_inEU": 0,"geoplugin_euVATrate": false,"geoplugin_continentCode": "AS","geoplugin_continentName": "Asia","geoplugin_latitude": "23.7272","geoplugin_longitude": "90.4093","geoplugin_locationAccuracyRadius": "100","geoplugin_timezone": "Asia/Dhaka","geoplugin_currencyCode": "BDT","geoplugin_currencySymbol": "Tk","geoplugin_currencySymbol_UTF8": "Tk","geoplugin_currencyConverter": 95.0836
         fetch(api)
         .then((response)=>response.json())
         .then((data)=>{
-            console.log(data)
+            //console.log(data)
             const {geoplugin_currencyCode,geoplugin_currencyConverter}=data;
-            console.log(geoplugin_currencyCode,geoplugin_currencyConverter);
-            currencyconvertData.textContent = ("$1 = "+geoplugin_currencyCode+geoplugin_currencyConverter);
+            //console.log(geoplugin_currencyCode,geoplugin_currencyConverter);
+            currencyconvertData.textContent = ("$ 1 = "+`${geoplugin_currencyCode} ${geoplugin_currencyConverter}`);
         })
     };
 });
diff --git a/sass-files/style.scss b/sass-files/style.scss
@@ -16,6 +16,9 @@
         justify-content: center;
         text-align: left;
 
+        & >input{
+            padding-left: 20px;
+        };
         & #searchbox{
             height: p.pxtovh(50);
             width: p.pxtovw(490);
@@ -60,8 +63,8 @@
 
             & .line{
                 border-left: p.pxtovw(2) solid p.color(dark-grey);
-                height: p.pxtovh(82);
-                margin-top: 2%;
+                height: p.pxtovh(90);
+                margin-top: 1%;
             };
 
             & >div>label{
@@ -108,16 +111,9 @@
         & #map { 
             z-index: 2;
             position: relative;
-            height: calc(618px - 20vw);
-            //height: 44vh;
+            height: calc(656px - 20vw);
             width: 100%;
             margin-top: 4.6%;
         };
     };
-    & .dev-info{
-        margin: 5px;
-        color:p.color(simple-white);
-        font-size: p.pxtovw(12);
-    };
-
 };