Use JavaScript for doing client-side validation of the pages implemented in experiment 1 and experiment 2.
☛ 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
- 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.
- Once logged in, navigate to your account dashboard.
- From the dashboard, locate my API Keys section and click on "Create Key" or "API Keys" to generate a new API key.
- Provide a name for your API key (e.g., "WeatherApp") and click on the "Generate" or "Create" button.
- Your API key will be generated and displayed on the screen. Make sure to copy it as we will need it later.
Output :
☛ Locate API key
Initially It look Like:
Then, by entering the city then click update chart then
