Question

For this assignment, You will create a NodeJS application which takes a city name as an input in its pug template. using openweathermap API, you should get the weather of that particular city and displays that information to a new pug template. You should also store the results in a file in your directory. Following are the detailed requirements.

Your application should start with a pug template (similar to HTML page) which has a form with an input field and label to accept the city name and a button on clicking which we can send a GET request to the server.

Your server code (Back-end) should be able to take this city name, make an API call to the openweathermap API.

You should be able successfully to establish the API call and retrieve data from it.

You should also be able to display this data in a new pug template.

This same pug template will also have a form in which we should be able to enter the data you that we received from openweathermap.

On entering and submitting that data, You should be able to make a POST request to your back-end.

Your back-end code should write those values to a file in your local directory using async and fs.

Openweathermap API documentation: https://openweathermap.org/api

Answer 1

CODE:

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//telling app to use inde.js for routes
app.use('/', index);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

index.js file

var express = require('express');
var router = express.Router();
var request=require('request');
const fs = require('fs')

//function to write in a file
const writeFile = (path, data, opts = 'utf8') =>
    new Promise((res, rej) => {
        fs.writeFile(path, data, opts, (err) => {
            if (err) rej(err);
            else res()
        })
    });

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/city',function (req,res,next) {
   console.log(req.query.city);
   //get request
    request.get('https://samples.openweathermap.org/data/2.5/weather?q='+req.query.city+'&appid=b6907d289e10d714a6e88b30761fae22',function(err,res2){
        if(err)
          throw new Error(err);
        else {
            //sending data to the new pug template named post.jade
          res.render('post', {data: res2.body});
          //console.log(res2.body)
        }
    });
});

router.post('/write',function (req,res,next) {
    console.log(req.body.write);
    async function write(data) {
        await writeFile('/home/sys1108/Desktop/weather.json',data,)
        res.render('index',{title:"data write success"})
    }
    write(req.body.write)
});

module.exports = router;

index.jade

extends layout

block content
  h1= title
  form(name="weather-report", method="get", action="/city")
    div.input
      span.label City Name:
      input(type="text", name="city")
    div.actions
      input(type="submit", value="Submit")

post.jade

extends layout

block content
    h2="Response from the Api"
    p #{data}

    h2="copy the above response and paste in below box to make a post request"

    form(name="weather-report", method="post", action="/write")
        div.input
            span.label
            textarea(name="write", cols="40", rows="5")
        div.actions
            input(type="submit", value="Submit")

layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

error.jade

extends layout

block content
  h1= message
  h2= error.status
  pre #{error.stack}

============================================

project structure and files:

app.js file

index.js file

index.jade

post.jade

layout.jade

error.jade

output: