app.css

@font-face {
    font-family: OS-Regular;
    src: url('fonts/OpenSans-Regular.ttf');
}
@font-face {
    font-family: OS-Light;
    src: url('fonts/OpenSans-Light.ttf');
}
@font-face {
    font-family: OS-Bold;
    src: url('fonts/OpenSans-Bold.ttf');
}

body {
    font-size: 12px;
    font-family: OS-Light;
}
#app {
    width: inherit;
    height: inherit;
}
#count {
    margin-top:50px;
}
header {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
}
.center > h3 {
    color: #ffffff;
    letter-spacing: 2px;
    font-family: OS-Light;
    font-size: 1.5em;
}
.center > h3 > small {
    color: #ffffff;
    letter-spacing: 2px;
    font-family: OS-Light;
}
.header-footer-bg {
    background-color: orange;
}
footer {
    position: fixed;
    bottom:0;
    left: 0;
    width: 100%;
    height: 5%;
    color: #ffffff;
}
footer > div > small {
    padding-top: 8px;
    padding-right: 10px;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}
.center {
    text-align: center;
}


/*
 *  CUSTOM STYLING
 */

#description {
    text-align: justify;
    position: relative;
    padding-top: 40px;
    font-size: 1.5em;
}
.input-group {
    display: block;
}

.cloudResponse {
    font-size: 2em;

    font-weight: bold;
    text-align: center;
}

.say-hello-button {
    width: 100%;

    margin: 5px 0px 5px 0px;
    padding: 5px 5px 5px 5px;
    font-size: 1.6em;
    background-color: #4a87ee;
    border: 1px solid #216CEC;
    color: #fff;
}

.input-text{
    width: 100%;

    font-size: 2em;
    margin: 0px;
    padding: 0px 0px 0px 5px;
    border: 1px solid #000000;
    box-sizing: border-box;
}

.input-div {
    width: 100%;

    padding: 5px 0px 5px 0px;
}

p.weather {
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 12px 0px;
    font-size: 0.5em;
    width: 200px;
    float: left;
    display: inline-block;
    margin: 10px;
}

hello.js

document.getElementById('say_hello').onclick = function () {
  document.getElementById('cloudResponse').innerHTML = "<p>Calling Cloud.....</p>";
  $fh.cloud(
      {
        path: 'weather',
        data: {
          location: document.getElementById('hello_to').value
        }
      },
      function (res) {
        /*
         {
            "temp": "13.920000000000016c",
            "desc": "broken clouds",
            "windSpeed": 5.63
          },
        */
        var  html = "<h3>Todays Forecast</h3>";
        res.forEach(function(w){
          html += "<p class=\"weather\">";
          html += "<strong>Temp: </strong> " + w.temp + "<br>";
          html += "<strong>Wind: </strong> " + w.windSpeed + "kph" + "<br>";
          html += w.desc;
          html += "</p>";
        });
        document.getElementById('cloudResponse').innerHTML = html;
        
      },
      function (code, errorprops, params) {
        alert('An error occured: ' + code + ' : ' + errorprops);
      }
  );
};

weather.js

var express = require('express');
var bodyParser = require('body-parser');
var cors = require('cors');
var request = require('request');

function helloRoute() {
  var hello = new express.Router();
  hello.use(cors());
  hello.use(bodyParser());


  // GET REST endpoint - query params may or may not be populated
  hello.all('/', function(req, res) {
    var location = req.query.location || req.body.location || "Dublin, Ireland";
    var url = "http://api.openweathermap.org/data/2.5/forecast?appid=51c2771f3721a9452df8d2fd74f6ede3&q=" + location;
    request({
      json : true,
      url : url
    }, function(err, response, body){
      if (err || !body.list){
        return res.status(500).json(err || "No weather found");
      }
      var weatherFriendly = [];
      body.list.forEach(function(w){
        weatherFriendly.push({
          temp : w.main.temp - 273.15 + "c",
          desc : w.weather[0].description,
          windSpeed : w.wind.speed
        });
      });
      return res.json(weatherFriendly);
    });
  });

  

  return hello;
}

module.exports = helloRoute;