add access token

package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "node src/app.js"
+    "start": "node src/app.js",
+   "dev": "nodemon src/app.js -e hbs,js"
   },
   "keywords": [],
   "author": "",

public/js/app.js

@@ -11,12 +11,14 @@ const messageFive = document.querySelector('#message-5')
 weatherForm.addEventListener('submit', (e) => {
     e.preventDefault() // prevent browser's default behaviour
     const location = search.value
+    const weatherstack = document.getElementById('weatherstack').value;
+    const mapbox = document.getElementById('mapbox').value;
     messageOne.textContent = 'Loading...'
     messageTwo.textContent = ''
     messageThree.textContent = ''; messageFoure.textContent = '';messageFive.textContent = ''
 
 
-    fetch('/weather?address="'+ location+'"').then( (res)=>{
+    fetch('/weather?address="'+ location+'"&weatherstack='+weatherstack+'&mapbox='+mapbox).then( (res)=>{
         res.json().then( (data) => {
             if (data.error)
                 messageOne.textContent = data.error  // console.log(data.error)

src/app.js

@@ -50,14 +50,20 @@ app.get('/weather', (req, res) => {
         res.send({
             error: "You must need to provide search"
         })
+    }else if(!req.query.weatherstack || !req.query.mapbox){
+        res.send({
+            error: 'Please provide Access Token'
+        })
     }else{
         const address = req.query.address
-        geocode(address, (error, {longitude, latitude, location} = {})=>{
+        const weatherstack = req.query.weatherstack
+        const mapbox = req.query.mapbox
+        geocode(address, mapbox, (error, {longitude, latitude, location} = {})=>{
             if(error)
               return res.send( {error} ) 
 
             //below code is example of callback chaining
-            forecast(longitude, latitude, (error, {weather_descriptions, temperature, feelslike} = {}) => {
+            forecast(longitude, latitude, weatherstack, (error, {weather_descriptions, temperature, feelslike} = {}) => {
                 if(error)
                     return res.send( {error} )
                 res.send({

src/utils/forecast.js

@@ -1,8 +1,8 @@
 const request = require('request')
 
-const forecast = (longitude, latitude, callback)=>{
+const forecast = (longitude, latitude, weatherstack, callback)=>{
 
-    const url = "http://api.weatherstack.com/current?access_key=0eae14fbd403f9eeb48cf57963ce9467&query="+encodeURIComponent(latitude)+","+encodeURIComponent(longitude);//  72.5714
+    const url = "http://api.weatherstack.com/current?access_key="+ encodeURIComponent(weatherstack) +"&query="+encodeURIComponent(latitude)+","+encodeURIComponent(longitude);//  72.5714
     // console.log(url)
     request({url:url, json:true}, ( error, {body} = {}) => {
         if(error)

src/utils/geocode.js

@@ -1,7 +1,7 @@
 const request = require('request')
 
-const geocode = (address, callback) => {
-    const url = 'https://api.mapbox.com/geocoding/v5/mapbox.places/'+encodeURIComponent(address) +'.json?access_token=pk.eyJ1IjoiYmhhdmVzaDI3MzYiLCJhIjoiY2txb3VpMW53MGh3bjJ6cWh5YjB5b3ZnMSJ9.7P_frelqu_UdYyxFnu9BkA';
+const geocode = (address, mapbox, callback) => {
+    const url = 'https://api.mapbox.com/geocoding/v5/mapbox.places/'+encodeURIComponent(address) +'.json?access_token='+mapbox;
     request({ url, json: true}, (error, { body } = {})=> {
         if(error)
             callback("Unable to Connect...")

templates/views/index.hbs

@@ -15,7 +15,11 @@
         <p>Use this site to get your weather!</p>
         <form action="#">
             <input type="text" placeholder="Location">
-            <button>Search</button>
+            <input type="text" placeholder="WeatherStack AcessToken" id="weatherstack">
+            <input type="text" placeholder="Mapbox AcessToken" id="mapbox">
+            <button>Search</button><br><br>
+            <span>* If you not have <b>WeatherStack Access Token</b> then get Now from</span> <a href="https://weatherstack.com/">weatherstack</a><br>
+            <span>* If you not have <b>MapBoc Access Token</b> then get Now from</span> <a href="https://www.mapbox.com/">mapbox</a>
         </form>
         <p id="message-1"></p>
         <p id="message-2"></p>