Jordan Vidrine Coding Journal

June 17th 2019

I started off the day working on the Drum Machine App I began work on last week. I implemented a click and drag volume knob, as well as the ability to hover over the knob and increase/decrease the volume with the mouse wheel.

I added audio elements to each pad, that when clicked will trigger the corresponding audio sample for the pad.

On the back end I added to the state a sound bank of 3 different kits the user will be able to choose from.

Here’s the app in action so far

Drum Machine Example

NodeJs Coursework

I also went through a couple lessons on the node js course I am taking. Getting more familiar with the way node works is pretty fun and I am eager to continue my learning. Something I worked on today was making https requests using the ‘Request’ NPM package. The lesson covered sending requests to mapboc to retrieve longitude and latitude, then sending that to darksky to request the weather data.

Example Code

/// FORECAST MODULE ///
const request = require('request');

const weatherUrl = 'https://api.darksky.net/forecast/bbc5c80a6e38213f7e85183e81ee1fa7/'

var forecast = (latitude, longitude, callback) => {
  const url = weatherUrl + + latitude +","+ longitude;
  request({url: url, json: true}, (err,res) => {
    if (err) {
      callback('Could not connect to weather API', undefined);
    } else if (res.body.error) {
      callback(res.body.error)
    } else {
      let data = res.body.currently
      callback(undefined,`${data.summary}. The current temperature is ${data.temperature} degrees, with a ${data.precipProbability}% chance of rain.`)
    }
  })
}

module.exports = forecast


/// GEOCODE MODULE ///
const request = require('request');

const mapUrlBeg = "https://api.mapbox.com/geocoding/v5/mapbox.places/"
const mapUrlEnd = ".json?access_token=pk.eyJ1Ijoiam9yZGFudmlkcmluZSIsImEiOiJjanZjdGw5NHIwMXc4NDRwbmg3cHNyM3Q0In0.EoAg-ZKQSmDqilHZQELSBA&limit=1"

var geocode = (address, callback) => {
  const url = mapUrlBeg + encodeURIComponent(address) + mapUrlEnd;
  request({url: url, json: true}, (err,res) => {
    if (err) {
      callback('Unable to connect to location services', undefined)
    } else if (res.body.features.length === 0) {
      callback('Unable to find location. Try another search.',undefined)
    } else {
      callback(undefined, {
        latitude: res.body.features[0].center[1],
        longitude: res.body.features[0].center[0],
        location: res.body.features[0].place_name,
      })
    }
  })
}

module.exports = geocode


/// MAIN APP ///
const request = require('request');
const geocode = require('./utils/geocode')
const forecast = require('./utils/forecast')

if (process.argv[2]) {
  geocode(process.argv[2], (error,data) => {
    if (error) {
      return console.log(error);
    }
    forecast(data.latitude, data.longitude, (error, forecastData) => {
      if (error) {
        return console.log(error)
      }
      console.log(data.location);
      console.log(forecastData)
    })
  });
} else {
  console.log('Please input a city to search for')
}

Other Activities

I made a daily coding todo-list for the next couple of months until I feel ready to move onto something more complex. My Daily schedule will somewhat look like this:

2 Hrs of Application/Pet Project
2 Hrs of NodeJS course work (working through this at the moment)
2 Hours of React w/ Redux course work (I feel confident in react, but want to go through another course) (here)
1 Hour of Eloquent Javascript
1 Hour of ‘Build your own Angular’

Back to blog...