Menu

Skill Development Course - NodeJs Lab Manual - (LAB PROGRAMS)


Aim:

 Explore the features of ES6 like arrow functions, callbacks, promises, async/await. Implement an application for reading the weather information from openweathermap.org and display the information in the form of a graph on the web page.

Solution :

EXP-03

 First, install the required npm packages:


    npm install express axios

    npm install express --save

 Create a file named server.js for the backend:

server.js


// server.js

constexpress = require('express');
constaxios = require('axios');

constapp = express();
constport = 3000;

app.use(express.static('public'));

app.get('/weather/:city', async (req, res) => {
  const{ city } = req.params;

  try {
    constapiKey = 'c97c0c1086d42990e89d64d76f50bb61';
    constresponse = awaitaxios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
    consttemperature = response.data.main.temp;
    res.json({ temperature });
  } catch (error) {
    console.error('Error fetching weather data:', error);
    res.status(500).json({ error:'Internal Server Error' });
  }
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

 Create a folder named public and create an index.html file for the frontend:

index.html


<!DOCTYPE html>

<html lang="en">
<head>
    <link rel="stylesheet" href="./style.css">
    <title>Home - FBS</title>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <header>
                <table width="100%" align="center" cellpadding="0" cellspacing="2">
                <tr>
                <th width="20%"><img src="fbs.png" alt="FBS LOGO"  width="130" height="100"/></th>
                <th colspan=4>
                <h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS WEBSITE</h1>
                </th>
                </tr>
                </table>
            </header>
            <nav>
                <table width="100%" align="center" cellpadding="0" cellspacing="2">
                <tbody align="center"  style="font-weight:bold;font-size:18px;"">
                <tr>
                <td width="20%"><hr><a href="index.html">Home</a><hr></td>
                <td width="20%"><hr><a href="login.html">Login</a><hr></td>
                <td width="20%"><hr><a href="registration.html">Registration</a><hr></td>
                <td width="20%"><hr><a href="cart.html" >Cart</a><hr></td>
                </tr>
                </tbody>
                </table>
            </nav>
        </div>
        <div class="container1">
            <div class="sidebar1"></div>
            <div class="container2">
                <main>
                    <center>
                    <h2>Welcome to FBS e-Book's Website</h2>
                        <p>Shopping at <font size=5>FBS</font> can be both <font size=5>fun</font>
                        and <font size=5>savings</font>.</br>Shop with us in this special <font
                        size=5>discount</font> season and save upto <font size=5>90%</font> on all your
                        purchases.</br></p>
                    <br/><br/><br/><br/><br/><br/><br/><br/>
                </main>
            </div>
            <div class="sidebar2"></div>
        </div> 
        <footer><font color="white">(C) 2024 All rights reserved by FBS ebooks</font></footer>
    </div>
</body>
</html>

 Now, you can run your Node.js server:


	node server.js
	

 Visit http://localhost:3000 in your web browser.

Create an OpenWeatherMap Account and Generate API Key

  1. Visit the OpenWeatherMap website (https://openweathermap.org/) and click on "Sign Up" or "Log In" to create an account or log into your existing account.
  2. Once logged in, navigate to your account dashboard.
  3. From the dashboard, locate my API Keys section and click on "Create Key" or "API Keys" to generate a new API key.
  4. Provide a name for your API key (e.g., "WeatherApp") and click on the "Generate" or "Create" button.
  5. Your API key will be generated and displayed on the screen. Make sure to copy it as we will need it later.

Output :

image

 Locate API key

Initially It look Like:

image

Then, by entering the city then click update chart then

image

Related Content :

Skill Development Course - NodeJs Lab Programs

1) Build a responsive web application for shopping cart with registration, login, catalog and cart pages using CSS3 features, flex and grid.   View Solution

2) Use JavaScript for doing client – side validation of the pages implemented in the experiment   View Solution

3) Explore the features of ES6 like arrow functions, callbacks, promises, async/await. Implement an application for reading the weather information from openweathermap.org and display the information in the form of a graph on the web page.   View Solution

4) Develop a java stand alone application that connects with the database (Oracle / mySql) and perform the CRUD operation on the database tables.   View Solution

5) Create an xml for the bookstore. Validate the same using both DTD and XSD.   View Solution

6) Create a custom server using http module and explore the other modules of Node JS like OS, path, event.   View Solution

7) Develop an express web application that can interact with REST API to perform CRUD operations on student data. (Use Postman)   View Solution

8) Create a service in react that fetches the weather information from open weathermap.org and the display the current and historical weather information using graphical representation using chart.js   View Solution

9) Create a TODO application in react with necessary components and deploy it into github.   View Solution