Build with Node.js Web Servers Please answer as soon as possible Follow the inst
ID: 3731968 • Letter: B
Question
Build with Node.js
Web Servers
Please answer as soon as possible
Follow the instructions bellow for a good rate
Starting Code below:
. You should create a web application that will display: main page with links to the pages below static info page about you (please add basic html/css) - REST controller that will display weather in fixed place - it means that you can directly use the address property in your code (the same logic as before - first find latitude and longitude, then check for the weather; it can be returned as a String or JSON Two points for all hre feetures, one point f one of the features is missingExplanation / Answer
style.css
body {
width: 800px;
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 600px;
margin: 0 auto;
}
fieldset {
display: block;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-before: 0em;
-webkit-padding-start: 0em;
-webkit-padding-end: 0em;
-webkit-padding-after: 0em;
border: 0px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
min-width: -webkit-min-content;
padding: 30px;
}
.weather-input, p {
display: block;
font-weight:300;
width: 100%;
font-size: 25px;
border:0px;
outline: none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #4b545f;
background: #fff;
font-family: Open Sans,Verdana;
padding: 10px 15px;
margin: 30px 0px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.weather-input:focus {
border-bottom:1px solid #ddd;
}
.weather-button {
background-color: transparent;
border:2px solid #ddd;
padding:10px 30px;
width: 100%;
min-width: 350px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.weather-button:hover {
border:2px solid #515151;
}
p {
color: #E64A19;
}
index.ejs
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<fieldset>
<form action="/" method="post">
<input name="city" type="text" class="weather-input" placeholder="Enter a City" required>
<input type="submit" class="weather-button" value="Get Weather">
</form>
<% if(weather !== null){ %>
<p><%= weather %></p>
<% } %>
<% if(error !== null){ %>
<p><%= error %></p>
<% } %>
</fieldset>
</div>
</body>
</html>
There are three possible scenarios that we have in our code:
server.js
const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');
const app = express()
const apiKey = '*****************';
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs')
app.get('/', function (req, res) {
res.render('index', {weather: null, error: null});
})
app.post('/', function (req, res) {
let city = req.body.city;
let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=${apiKey}`
request(url, function (err, response, body) {
if(err){
res.render('index', {weather: null, error: 'Error, please try again'});
} else {
let weather = JSON.parse(body)
if(weather.main == undefined){
res.render('index', {weather: null, error: 'Error, please try again'});
} else {
let weatherText = `It's ${weather.main.temp} degrees in ${weather.name}!`;
res.render('index', {weather: weatherText, error: null});
}
}
});
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
Using OpenWeatherMap API, it is an online service that provides weather data, including current weather data, forecasts, and historical data to the developers of web services and mobile applications.