Scribd
Upload
13 views

4. Explore the features of ES6 like arrow functions, callbacks, promises, asyncawait. Implement it

The document outlines the implementation of a weather application using ES6 features such as arrow functions, callbacks, promises, and async/await. It includes HTML, CSS, and JavaScript code for fetching weather data from OpenWeatherMap and displaying it in a graphical format using Chart.js. The application allows users to input a city name and view current weather information along with a 5-day forecast chart.

Uploaded by

Kore Ramesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

4. Explore the features of ES6 like arrow functions, callbacks, promises, asyncawait. Implement it

The document outlines the implementation of a weather application using ES6 features such as arrow functions, callbacks, promises, and async/await. It includes HTML, CSS, and JavaScript code for fetching weather data from OpenWeatherMap and displaying it in a graphical format using Chart.js. The application allows users to input a city name and view current weather information along with a 5-day forecast chart.

Uploaded by

Kore Ramesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

4. 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.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App with ES6 Features</title>
<link rel="stylesheet" href="styles.css">
<!-- Chart.js for data visualization -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<h1>Weather App with ES6 Features</h1>

<div class="search-container">
<input type="text" id="city-input" placeholder="Enter city name">
<button id="search-btn">Search</button>
</div>

<div class="weather-container">
<div id="current-weather" class="weather-card">
<h2>Current Weather</h2>
<div id="weather-info"></div>
</div>

<div id="weather-chart-container">
<canvas id="weather-chart"></canvas>
</div>
</div>

<div class="es6-demo-container">
<h2>ES6 Features Demo</h2>
<div class="feature-section">
<h3>Arrow Functions</h3>
<button id="arrow-demo-btn">Run Demo</button>
<div id="arrow-result" class="result"></div>
</div>
<div class="feature-section">
<h3>Callbacks</h3>
<button id="callback-demo-btn">Run Demo</button>
<div id="callback-result" class="result"></div>
</div>

<div class="feature-section">
<h3>Promises</h3>
<button id="promise-demo-btn">Run Demo</button>
<div id="promise-result" class="result"></div>
</div>

<div class="feature-section">
<h3>Async/Await</h3>
<button id="async-demo-btn">Run Demo</button>
<div id="async-result" class="result"></div>
</div>
</div>
</div>

<script src="es6Features.js"></script>
<script src="weatherApp.js"></script>
</body>
</html>

style.css

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
}

h2 {
color: #3498db;
margin-bottom: 15px;
}

h3 {
color: #2c3e50;
margin-bottom: 10px;
}

.search-container {
display: flex;
justify-content: center;
margin-bottom: 30px;
}

#city-input {
padding: 10px;
width: 300px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
font-size: 16px;
}

#search-btn {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}

#search-btn:hover {
background-color: #2980b9;
}

.weather-container {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}

.weather-card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#weather-chart-container {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
height: 300px;
}

.es6-demo-container {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.feature-section {
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}

.feature-section:last-child {
border-bottom: none;
}
button {
padding: 8px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 10px;
transition: background-color 0.3s;
}

button:hover {
background-color: #2980b9;
}

.result {
background-color: #f9f9f9;
padding: 10px;
border-radius: 4px;
border-left: 3px solid #3498db;
min-height: 40px;
white-space: pre-wrap;
}

@media (min-width: 768px) {


.weather-container {
flex-direction: row;
}

.weather-card {
flex: 1;
}

#weather-chart-container {
flex: 2;
}
}
es6Feastures.js

// ES6 Features Demonstration

// ===== Arrow Functions =====


document.getElementById('arrow-demo-btn').addEventListener('click', () => {
const resultElement = document.getElementById('arrow-result');
resultElement.innerHTML = '';

// Traditional function
function traditionalSum(a, b) {
return a + b;
}

// Arrow function
const arrowSum = (a, b) => a + b;

// Arrow function with multiple statements


const arrowMultipleStatements = (a, b) => {
const sum = a + b;
const product = a * b;
return `Sum: ${sum}, Product: ${product}`;
};

// Array methods with arrow functions


const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
const filtered = numbers.filter(num => num > 2);

resultElement.innerHTML = `
Traditional function: ${traditionalSum(5, 3)} <br>
Arrow function: ${arrowSum(5, 3)} <br>
Arrow function with multiple statements: ${arrowMultipleStatements(5, 3)}
<br>
Array.map with arrow function: [${doubled}] <br>
Array.filter with arrow function: [${filtered}]
`;
});

// ===== Callbacks =====


document.getElementById('callback-demo-btn').addEventListener('click', () => {
const resultElement = document.getElementById('callback-result');
resultElement.innerHTML = 'Processing...';

// Simulating asynchronous operation with callbacks


const fetchData = (callback) => {
setTimeout(() => {
const data = { name: 'Weather Data', temperature: 25 };
callback(null, data);
}, 1500);
};

const processData = (error, data) => {


if (error) {
resultElement.innerHTML = `Error: ${error.message}`;
} else {
resultElement.innerHTML = `
Callback received after 1.5 seconds: <br>
Name: ${data.name} <br>
Temperature: ${data.temperature}°C
`;
}
};

// Execute the callback pattern


fetchData(processData);
});

// ===== Promises =====


document.getElementById('promise-demo-btn').addEventListener('click', () => {
const resultElement = document.getElementById('promise-result');
resultElement.innerHTML = 'Processing...';

// Creating a promise
const fetchDataPromise = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // Change to false to simulate error

if (success) {
const data = { name: 'Promise Data', temperature: 28 };
resolve(data);
} else {
reject(new Error('Failed to fetch data'));
}
}, 1500);
});
};

// Using the promise


fetchDataPromise()
.then(data => {
resultElement.innerHTML = `
Promise resolved after 1.5 seconds: <br>
Name: ${data.name} <br>
Temperature: ${data.temperature}°C
`;
})
.catch(error => {
resultElement.innerHTML = `Promise rejected: ${error.message}`;
})
.finally(() => {
console.log('Promise operation completed');
});
});

// ===== Async/Await =====


document.getElementById('async-demo-btn').addEventListener('click', async () => {
const resultElement = document.getElementById('async-result');
resultElement.innerHTML = 'Processing...';

// Function that returns a promise


const fetchDataAsync = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // Change to false to simulate error

if (success) {
const data = { name: 'Async/Await Data', temperature: 30 };
resolve(data);
} else {
reject(new Error('Failed to fetch data'));
}
}, 1500);
});
};

// Using async/await
try {
const data = await fetchDataAsync();
resultElement.innerHTML = `
Async/Await resolved after 1.5 seconds: <br>
Name: ${data.name} <br>
Temperature: ${data.temperature}°C
`;
} catch (error) {
resultElement.innerHTML = `Async/Await error: ${error.message}`;
}
});

weatherApp.js

// Weather App Implementation using ES6 Features

// Constants
const API_KEY = '349e1822e8739db21980838d35c0354a'; // You need to get your API
key from OpenWeatherMap
const BASE_URL = 'https://api.openweathermap.org/data/2.5';

// DOM Elements
const cityInput = document.getElementById('city-input');
const searchBtn = document.getElementById('search-btn');
const weatherInfo = document.getElementById('weather-info');
const weatherChartCanvas = document.getElementById('weather-chart');

// Chart instance
let weatherChart = null;

// Event Listeners
searchBtn.addEventListener('click', () => {
const city = cityInput.value.trim();
if (city) {
getWeatherData(city);
} else {
alert('Please enter a city name');
}
});

cityInput.addEventListener('keypress', (e) => {


if (e.key === 'Enter') {
searchBtn.click();
}
});

// Weather API Functions using ES6 Features


// Fetch current weather data using async/await
const getWeatherData = async (city) => {
try {
weatherInfo.innerHTML = 'Loading...';

// Using template literals for URL construction


const currentWeatherUrl =
`${BASE_URL}/weather?q=${city}&units=metric&appid=${API_KEY}`;
const forecastUrl =
`${BASE_URL}/forecast?q=${city}&units=metric&appid=${API_KEY}`;

// Using Promise.all to fetch multiple resources in parallel


const [currentResponse, forecastResponse] = await Promise.all([
fetch(currentWeatherUrl),
fetch(forecastUrl)
]);

// Check if responses are ok


if (!currentResponse.ok || !forecastResponse.ok) {
throw new Error('City not found or API error');
}

// Parse JSON responses using arrow functions and await


const currentData = await currentResponse.json();
const forecastData = await forecastResponse.json();

// Display the data


displayCurrentWeather(currentData);
displayWeatherChart(forecastData);

} catch (error) {
weatherInfo.innerHTML = `Error: ${error.message}`;
clearChart();
}
};

// Display current weather information


const displayCurrentWeather = (data) => {
// Destructuring assignment to extract properties
const { name, main, weather, wind, sys } = data;
const { temp, feels_like, humidity, pressure } = main;
const { description, icon } = weather[0];

// Template literals for HTML construction


const html = `
<div class="weather-details">
<h3>${name}, ${sys.country}</h3>
<div class="weather-icon">
<img src="https://openweathermap.org/img/wn/${icon}@2x.png"
alt="${description}">
</div>
<div class="temperature">${Math.round(temp)}°C</div>
<div class="description">${description}</div>
<div class="details">
<p>Feels like: ${Math.round(feels_like)}°C</p>
<p>Humidity: ${humidity}%</p>
<p>Pressure: ${pressure} hPa</p>
<p>Wind: ${wind.speed} m/s</p>
</div>
</div>
`;

weatherInfo.innerHTML = html;
};

// Display weather forecast chart


const displayWeatherChart = (data) => {
// Clear previous chart
clearChart();

// Process forecast data


// Using array methods (map, filter) with arrow functions
const forecastList = data.list;

// Get the next 5 days data at the same time of day


const filteredForecast = forecastList.filter((item, index) => index % 8 ===
0);

// Extract dates and temperatures using destructuring and map


const labels = filteredForecast.map(item => {
const date = new Date(item.dt * 1000);
return date.toLocaleDateString('en-US', { weekday: 'short' });
});

const temperatures = filteredForecast.map(item => item.main.temp);


const minTemps = filteredForecast.map(item => item.main.temp_min);
const maxTemps = filteredForecast.map(item => item.main.temp_max);

// Create chart using Chart.js


weatherChart = new Chart(weatherChartCanvas, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Temperature (°C)',
data: temperatures,
borderColor: '#3498db',
backgroundColor: 'rgba(52, 152, 219, 0.2)',
tension: 0.3,
fill: true
},
{
label: 'Min Temperature (°C)',
data: minTemps,
borderColor: '#2980b9',
backgroundColor: 'rgba(41, 128, 185, 0.1)',
borderDash: [5, 5],
tension: 0.3,
fill: false
},
{
label: 'Max Temperature (°C)',
data: maxTemps,
borderColor: '#e74c3c',
backgroundColor: 'rgba(231, 76, 60, 0.1)',
borderDash: [5, 5],
tension: 0.3,
fill: false
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: '5-Day Weather Forecast',
font: {
size: 16
}
},
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
y: {
title: {
display: true,
text: 'Temperature (°C)'
}
}
}
}
});
};

// Clear the chart


const clearChart = () => {
if (weatherChart) {
weatherChart.destroy();
weatherChart = null;
}
};

// Initial instructions
weatherInfo.innerHTML = `
<div class="initial-message">
<p>Enter a city name and click "Search" to get weather information.</p>
<p>You'll need to add your OpenWeatherMap API key in the weatherApp.js
file.</p>
</div>
`;

// Display a message about getting an API key


console.log('Remember to get your API key from https://openweathermap.org/api and
add it to the weatherApp.js file.');
Output:

Open Index.html page with Browser

file:///C:/Users/rames/OneDrive/1.PEC/2-2/LabPrograms/4/index.html
Type Hyderabad Search
Demo

You might also like