June 19th 2019
Spent the first part of the day working through Eloquent Javascript chapters 8-9 on error handling and the dreaded regex. Not a huge fan of working with regex as it is pretty confusing but I do understand it and its purposes.
Continued working on Node.js Course
In the course today I went through more of using express inside of node. It is starting to get a little complex, which I like because it causes me to stretch my thinking and helps me to not get bored.
The task was to create a basic app front end and backend. In the backend we created a .get(‘/weather’) route where we send a search query and we are returned the weather info in JSON for what we entered in. Here’s what that looked like.
app.get('/weather', (req,res) => {
if (!req.query.address) {
return res.send({
error: "You must provide an address!"
})
}
//run geocode function, passing in the address from the browser
geocode(req.query.address, (error,data = {}) => {
if (error) {
//return error message if no address was entered
return res.send({error})
}
//if geocode worked correctly, then use the data from it to
//invoke the forecast function
forecast(data.latitude, data.longitude, (forecastError, forecastData = {}) => {
if (forecastError) {
return res.send({error})
}
res.send({
city: data.location,
forecast:forecastData,
'Search Provided': req.query.address,
})
})
});
})
For the front-end we use fetch to make a call to that get route we established with express on the backend. Here is how that looks.
function getWeather(address) {
fetch('http://localhost:3000/weather?address='+address).then((response)=>{
let infoHtml = document.getElementById('weatherInfo')
response.json().then((data) => {
if (data.error) {
infoHtml.innerHTML = data.error;
return;
} else {
infoHtml.innerHTML = `The weather in ${data['Search Provided']} is: ${data.forecast}`
}
})
});
}
const weatherForm = document.querySelector('form')
const search = document.querySelector('input')
weatherForm.addEventListener('submit', (e) => {
e.preventDefault();
let location = search.value;
let data = getWeather(location);
search.value = '';
})
I also played around a bit further and discovered a pretty great API World Trading Data.
Here’s something I am playing around with with that.
const app = express();
//path names
const publicDirectoryPath = path.join(__dirname, '../public')
const viewsPath = path.join(__dirname, '../templates/views')
const partialsPath = path.join(__dirname, '../templates/partials')
//specifies what directory to use for "/" get path
app.use(express.static(publicDirectoryPath))
app.set('view engine', 'hbs');
app.set('views', viewsPath);
hbs.registerPartials(partialsPath)
app.get('/',(req,res) => {
res.render('index', {
title: 'Stocks Info App'
})
})
function getStock(symbol, callback) {
request({url: STOCK_URL + symbol + STOCK_KEY, json: true}, (err,res) => {
if (err) {
callback('ERROR', undefined)
} else {
let data = res.body;
callback(undefined, data)
}
})
}
app.get('/stock', (req,res) => {
if (!req.query.stock) return res.send({error:'You must provide a stock symbol!'})
getStock(req.query.stock, (error, data) => {
if (error) return res.send('error');
res.send({
data: data.data[0],
})
})
})