Project Weather App

Project Weather app
Day 16
Created by Aditya kshirsagar : Imprenable Automation Training Module
Project Preview & Setup :

To provide a preview and set up your weather app project, follow these steps:
1. Project Structure: Create a project folder on your computer to store all the files related to
your weather app. Organize the files into appropriate directories, such as "css" for CSS
files, "js" for JavaScript files, and "images" for any image assets you may have.
2. HTML File: Create an HTML file, let's call it "index.html", in the project folder. This file will
serve as the main entry point for your weather app. Add the basic structure of an HTML
document:
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<script src="js/app.js"></script>
</body>
</html>
Make sure to link the CSS file and JavaScript file in the <head> and <body> sections,
respectively. Adjust the paths in the href and src attributes to match the directory structure of
your project.
3. CSS Styling: Create a CSS file, let's call it "style.css", in the "css" directory. This is where
you'll define the styles for your weather app. Add the necessary CSS rules to style the
HTML elements based on your design. You can customize the styles as per your
preferences.
4. JavaScript Code: Create a JavaScript file, let's call it "app.js", in the "js" directory. This is
where you'll write the JavaScript code to make your app interactive and handle weather
data. Start by adding the necessary JavaScript code to interact with the HTML elements
and set up event listeners:
// Wait for the HTML document to load

document.addEventListener('DOMContentLoaded', function() {
// Add your JavaScript code here
});
This ensures that your JavaScript code runs after the HTML document has finished loading, so
you can safely access and manipulate the HTML elements.
5. Static Assets: If you have any static assets like icons or images that you want to include in
your weather app, place them in the "images" directory. Make sure to reference these
assets correctly in your HTML or CSS files.
6. Preview: To preview your weather app, you can simply open the "index.html" file in a web
browser. Double-click on the file, and it should open in your default browser, displaying the
HTML content and applying the CSS styles.
As you make changes to your HTML, CSS, and JavaScript files, save them and refresh the
browser to see the updated version of your weather app.
This setup allows you to start developing your weather app. You can now begin adding the
necessary HTML markup, styling it with CSS, and writing JavaScript code to fetch and display
weather data.
Remember to test your app frequently during development to ensure everything is functioning
as expected.
HTML & CSS Template

Certainly! Here's a basic HTML and CSS template to get you started with your weather app:
HTML (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Weather App</h1>
</header>
<main>
<div class="search-container">
<input type="text" id="location-input" placeholder="Enter location">
<button id="search-button">Search</button>
</div>
<div id="weather-info">

</div>
</main>
<script src="js/app.js"></script>
</body>
</html>
CSS (style.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.search-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
input[type="text"] {
padding: 8px;
width: 300px;
margin-right: 10px;
}
button {
padding: 8px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#weather-info {
text-align: center;
}
#weather-info h2 {
margin-top: 0;
}
#weather-info p {
font-size: 18px;
}
This template provides a basic structure for your weather app. It includes a header with the
app's title, a main section with a search input and a weather info container, and links to the CSS
and JavaScript files.
The CSS styles define a minimal design for the app, including the header background color,
input and button styles, and the layout for the main section.
You can customize and enhance this template further based on your specific design and
functionality requirements. Add more HTML elements, modify the CSS styles, and incorporate
additional JavaScript code to handle the weather data and update the UI dynamically.
Remember to link the CSS file ( style.css ) and JavaScript file ( app.js ) correctly in the <head>
and <body> sections of your HTML file.
With this HTML and CSS template, you have a starting point for building the user interface of
your weather app. You can now focus on implementing the JavaScript code to handle the
weather data retrieval, updating the UI, and adding any additional features you want.
AccuWeather AP
The AccuWeather API is a service provided by AccuWeather, a leading weather forecasting
company. It allows developers to access various weather data and forecast information
programmatically. To use the AccuWeather API, follow these steps:
1. Sign up: Visit the AccuWeather developer portal at https://developer.accuweather.com and

sign up for an account. You'll need to provide some basic information and agree to their
terms of use.
2. Create an App: After signing up and logging into your account, create a new app in the
developer portal. Provide a name for your app and select the desired permissions and
access levels for the API.
3. Obtain an API Key: Once you've created your app, you'll receive an API key. This key is
necessary to authenticate your requests and access the AccuWeather API.
4. API Documentation: Familiarize yourself with the AccuWeather API documentation, which
provides details on the available endpoints, request parameters, and response formats.
The documentation will guide you on how to construct API requests and interpret the
returned data.
5. API Requests: Use HTTP requests to interact with the AccuWeather API and retrieve
weather data. You can use any programming language or tool that supports making HTTP
requests, such as JavaScript with Fetch or Axios, Python with the requests library, or cURL
from the command line.
6. Endpoint Usage: Depending on your requirements, you can utilize different endpoints
provided by the AccuWeather API. Common endpoints include:
Current Conditions: Retrieve the current weather conditions for a specific location.
Forecasts: Fetch daily or hourly weather forecasts for a given location.
Locations: Obtain information about specific locations, including their unique
AccuWeather location keys.
7. Handle API Responses: Once you receive a response from the AccuWeather API, parse
and process the data according to your application's needs. Extract the relevant weather
information, such as temperature, precipitation, wind speed, and more, from the API
response and display it in your weather app's user interface.
Remember to handle errors and implement appropriate error handling mechanisms when
working with the AccuWeather API. This includes checking for valid API responses, handling
network errors, and providing user-friendly error messages when necessary.
Please note that the usage terms, pricing, and available endpoints of the AccuWeather API may
change over time. It's essential to refer to the official AccuWeather developer portal and API
documentation for the most up-to-date information.
Happy coding, and enjoy building your weather app with the AccuWeather API!
Get City API Call

To retrieve weather information for a specific city using the AccuWeather API, you need to make
an API call to the appropriate endpoint. Here's an example of how you can make a "Get City"
API call using JavaScript:
const apiKey = 'YOUR_API_KEY';

const cityName = 'New York'; // Replace with the desired city name
// Make the API call to get the city details

fetch(`http://dataservice.accuweather.com/locations/v1/cities/search?
apikey=${apiKey}&q=${cityName}`)
.then(response => response.json())
.then(data => {
// Handle the API response here
console.log(data);
})
.catch(error => {
// Handle any errors that occur during the API call
console.log('Error:', error);
});
In this example, replace 'YOUR_API_KEY' with your actual AccuWeather API key, which you
obtained from the AccuWeather developer portal. Also, set cityName to the desired city for
which you want to retrieve weather information.
The API call is made using the fetch function, which is a built-in JavaScript function for making
HTTP requests. The API endpoint URL includes the AccuWeather API key ( apikey ) and the city
name ( q ) as query parameters.
The response from the API call is a JSON object containing an array of city details. You can
access and process this data within the second .then callback function. In this example, the
data is simply logged to the console for demonstration purposes. You can customize the
handling of the response based on your specific requirements, such as extracting the city's
unique identifier (location key) for further API calls.
If any errors occur during the API call, they will be caught in the .catch block, allowing you to
handle them appropriately.
Note: Ensure that you have CORS (Cross-Origin Resource Sharing) enabled on your server or
use a proxy server if you encounter any CORS-related issues while making the API call from a
web browser.
Remember to refer to the AccuWeather API documentation for the specific endpoint and
request parameters related to the "Get City" API call, as the actual endpoint URL or query
parameters might differ based on the version and implementation of the API.
Make sure to handle errors, implement proper error handling and response validation, and
adapt the API call to fit the requirements of your weather app.
Get Weather API Call

To retrieve weather information for a specific location using the AccuWeather API, you need to
make an API call to the appropriate endpoint. Here's an example of how you can make a "Get
Weather" API call using JavaScript:

const locationKey = 'LOCATION_KEY'; // Replace with the location key for the
desired location
// Make the API call to get the weather details

fetch(`http://dataservice.accuweather.com/currentconditions/v1/${locationKey}?
apikey=${apiKey}`)
.then(data => {
console.log(data);
})
.catch(error => {
});
In this example, replace 'YOUR_API_KEY' with your actual AccuWeather API key, which you
obtained from the AccuWeather developer portal. Also, replace 'LOCATION_KEY' with the
location key for the desired location.
The API call is made using the fetch function, which is a built-in JavaScript function for making
HTTP requests. The API endpoint URL includes the AccuWeather API key ( apikey ) and the
location key as part of the URL path.
The response from the API call is a JSON array containing the current weather conditions for
the specified location. You can access and process this data within the second .then callback
function. In this example, the data is simply logged to the console for demonstration purposes.
You can customize the handling of the response based on your specific requirements, such as
extracting and displaying the temperature, weather description, or other relevant information.
If any errors occur during the API call, they will be caught in the .catch block, allowing you to
handle them appropriately.
Note: Ensure that you have CORS (Cross-Origin Resource Sharing) enabled on your server or
use a proxy server if you encounter any CORS-related issues while making the API call from a
web browser.
Remember to refer to the AccuWeather API documentation for the specific endpoint and
request parameters related to the "Get Weather" API call, as the actual endpoint URL or query
parameters might differ based on the version and implementation of the API.
Make sure to handle errors, implement proper error handling and response validation, and
adapt the API call to fit the requirements of your weather app.
Updating the Location.

To update the location in your weather app and retrieve weather information for the new
location, you'll need to modify your existing code to include a location update functionality.
Here's an example of how you can update the location and make a new API call to fetch
weather data:
// Function to fetch weather data for a given location key

const fetchWeatherData = (locationKey) => {
fetch(`http://dataservice.accuweather.com/currentconditions/v1/${locationKey}?
apikey=${apiKey}`)
.then(data => {
console.log(data);
// Update the UI with the weather data for the new location
updateWeatherUI(data);
})
.catch(error => {
});
};
// Function to update the location and fetch weather data
const updateLocation = () => {
const locationInput = document.getElementById('location-input');
const newLocation = locationInput.value.trim();
// Clear the input field

locationInput.value = '';
// Perform input validation

if (newLocation === '') {
alert('Please enter a valid location.');
return;
}
// Make the API call to get the location details

fetch(`http://dataservice.accuweather.com/locations/v1/cities/search?
apikey=${apiKey}&q=${newLocation}`)
.then(data => {
if (data.length > 0) {
const locationKey = data[0].Key;
// Fetch weather data for the new location
fetchWeatherData(locationKey);
} else {
alert('Location not found. Please enter a valid location.');
}
})
.catch(error => {
});
};
// Function to update the UI with weather data

const updateWeatherUI = (data) => {
// Update the UI elements with the weather data for the new location
// Example: document.getElementById('temperature').textContent =
data[0].Temperature;
};
// Event listener for the search button click

const searchButton = document.getElementById('search-button');
searchButton.addEventListener('click', updateLocation);
In this example, the updateLocation function is called when the search button is clicked. It
retrieves the new location entered by the user from the input field, performs basic validation,
and then makes an API call to get the location details using the AccuWeather API. If a valid
location is found, it fetches the weather data for the new location using the fetchWeatherData
function.
The fetchWeatherData function makes an API call to fetch the current weather conditions for
the specified location key. It handles the API response and calls the updateWeatherUI function
to update the UI with the weather data for the new location.
You can customize the updateWeatherUI function to update the UI elements of your weather
app with the retrieved weather data. For example, you can update the temperature, weather
description, or any other relevant information based on the response data.
Remember to replace 'YOUR_API_KEY' with your actual AccuWeather API key, and update the
UI update logic ( updateWeatherUI ) based on your specific UI structure and requirements.
With this updated code, your weather app will be able to handle location updates and fetch
weather data for the new location entered by the user.
Object Shorthand Notation

Object shorthand notation, also known as object property value shorthand, is a convenient
syntax in JavaScript for creating and defining objects. It allows you to create object properties
and assign values to them in a concise and simplified way. Instead of explicitly specifying both
the property name and value, you can use shorthand notation to assign a value to a property
with the same name as the variable containing the value.
Here's an example to illustrate the usage of object shorthand notation:
const name = 'John';

const age = 30;
// Using object shorthand notation

const person = {
name,
age,
};
console.log(person);
// Output: { name: 'John', age: 30 }
In the example above, instead of explicitly specifying name: name and age: age , we can use
the shorthand notation to directly assign the values to properties with the same names as the
variables.
Object shorthand notation is particularly useful when you have variables with the same name as
the desired object properties. It helps reduce repetition and makes the code more concise and
readable.
It's important to note that object shorthand notation only works when the variable name
matches the property name exactly. If the variable and property names differ, you'll need to use
the traditional syntax for defining object properties.
Here's an example to demonstrate the difference:
const firstName = 'John';

const lastName = 'Doe';
// Using object shorthand notation

const person1 = {
firstName,
lastName,
};
// Using traditional syntax

const person2 = {
first: firstName,
last: lastName,
};
console.log(person1);
// Output: { firstName: 'John', lastName: 'Doe' }
console.log(person2);
// Output: { first: 'John', last: 'Doe' }
In this example, firstName and lastName are used as variables, and we create two objects,
person1 and person2 . With object shorthand notation, person1 has properties named
firstName and lastName that directly correspond to the variable names. In contrast, person2
uses the traditional syntax, where we explicitly specify different property names.
Object shorthand notation is a convenient and widely used feature in JavaScript for creating
objects with properties assigned using existing variables. It helps streamline object creation and
improves code readability.
Updating the UI
To update the user interface (UI) in JavaScript, you need to manipulate the DOM (Document
Object Model) elements. There are several methods and techniques you can use to update the
UI based on data or user interactions. Here are a few common approaches:
1. innerHTML: You can use the innerHTML property to set the HTML content of an element.
For example, to update the text content of a <div> element with an ID of "result", you can
do the following:
const resultDiv = document.getElementById('result');

resultDiv.innerHTML = 'New content';
2. textContent: If you only need to update the text content of an element without interpreting
any HTML tags, you can use the textContent property. For example:
const resultDiv = document.getElementById('result');

resultDiv.textContent = 'New text content';
3. setAttribute: To update an attribute of an element, such as src , href , or class , you can
use the setAttribute method. For example:
const imageElement = document.getElementById('myImage');

imageElement.setAttribute('src', 'new-image.jpg');
4. classList: When working with CSS classes, you can use the classList property to add,
remove, or toggle classes on an element. For example, to add a class to an element:
const element = document.getElementById('myElement');

element.classList.add('new-class');
To remove a class:
element.classList.remove('old-class');
To toggle a class:
element.classList.toggle('active');
5. Creating elements: If you need to dynamically create new elements, you can use the
createElement method to create a new element, set its properties, and append it to the
DOM. For example:
const newElement = document.createElement('div');
newElement.textContent = 'New element';
document.body.appendChild(newElement);
These are just a few examples of how you can update the UI in JavaScript. Depending on your
specific requirements and the structure of your HTML, you may need to use different methods
or combine multiple techniques to achieve the desired UI updates. Remember to select the
appropriate elements using methods like getElementById , querySelector , or
querySelectorAll before applying any updates.
It's also important to consider performance and best practices when updating the UI, especially
if you're making frequent updates or manipulating a large number of elements. Minimizing
unnecessary DOM manipulations and using efficient techniques can help optimize the
performance of your UI updates.
Destructuring
Destructuring is a feature introduced in JavaScript that allows you to extract values from objects
or arrays and assign them to variables in a more concise and intuitive way. It provides a
convenient syntax for accessing and unpacking values, making code more readable and
expressive. Destructuring can be used with objects, arrays, and function parameters.
Destructuring Objects:
To destructure an object, you use curly braces {} and specify the variable names that
correspond to the object's property names. Here's an example:
const person = {
name: 'John',
age: 30,
city: 'New York',
};
// Destructuring object
const { name, age, city } = person;
console.log(name); // Output: John

console.log(age); // Output: 30
console.log(city); // Output: New York
In the example above, we have an object person with properties name , age , and city . We
destructure the object and assign the values to variables with the same names. Now, we can
directly use the variables name , age , and city to access the corresponding values from the
person object.
Destructuring Arrays:
To destructure an array, you use square brackets [] and specify the variable names to hold the
array elements. Here's an example:
const numbers = [1, 2, 3, 4, 5];
// Destructuring array
const [a, b, c, d, e] = numbers;
console.log(a); // Output: 1
console.log(b); // Output: 2
console.log(c); // Output: 3
console.log(d); // Output: 4
console.log(e); // Output: 5
In this example, we have an array numbers with elements 1 to 5. By destructuring the array, we
assign each element to a separate variable a , b , c , d , and e .
Default Values and Renaming:

You can also provide default values and rename variables during the destructuring process.
Here's an example using objects:
const person = {
name: 'John',
age: 30,
};
// Destructuring object with default value and renaming

const { name, age, city = 'New York', job: occupation = 'Engineer' } = person;
console.log(name); // Output: John

console.log(age); // Output: 30
console.log(city); // Output: New York (default value)
console.log(occupation); // Output: Engineer (renamed property)
In this example, we assign a default value of 'New York' to the city variable. We also rename
the job property to occupation during the destructuring process and assign a default value of
'Engineer' to it.
Destructuring can be a powerful and convenient feature in JavaScript, enabling you to extract
values from objects and arrays in a concise and readable manner. It simplifies code and
reduces the need for repetitive property or index access, making your code more expressive
and easier to understand.
Weather Icons & images

When working with weather data in a web application, you may want to display weather icons or
images to represent different weather conditions. These icons or images provide visual cues to
users about the current weather conditions, such as sunny, cloudy, rainy, etc. Here are a few
approaches you can take to include weather icons or images in your project:
1. Weather Icon Libraries: There are several popular weather icon libraries available that
provide a set of pre-designed weather icons you can use in your application. These
libraries typically provide a wide range of icons representing different weather conditions.
Some popular weather icon libraries include:
Weather Icons
Weather Icons by Erik Flowers
Weather Underground Icons
To use these libraries, you can include the necessary CSS and font files in your project and
use the corresponding CSS class or HTML element to display the appropriate weather
icon. Refer to the documentation of the specific library for implementation details.
2. Custom Weather Icons: If you prefer to create your own custom weather icons, you can
design them using graphic design software or vector editing tools like Adobe Illustrator or
Inkscape. Once you have your custom icons, you can export them as image files (such as
PNG or SVG) and include them in your project. You can then use HTML <img> tags or
CSS background images to display the weather icons at the appropriate locations in your
UI.
3. Weather API Image URLs: Some weather APIs provide image URLs for different weather
conditions. When fetching weather data from the API, you can extract the weather
condition code or identifier and map it to the corresponding image URL provided by the
API. You can then dynamically insert the image URL into your HTML or CSS to display the
weather icon. The image URLs may be specific to the weather API you are using, so refer
to the API documentation for details on how to retrieve and use the image URLs.
4. Third-Party Weather Widgets: Another option is to use third-party weather widgets or
embeddable weather components that already include weather icons or images. These
widgets often come with pre-designed UI elements that display weather information along
with appropriate icons. You can find such widgets by searching for weather widget
providers or exploring weather-related APIs that offer embeddable components.
When choosing the approach for displaying weather icons or images, consider factors such as
the design requirements of your project, the level of customization needed, and the availability
of weather data and icon resources. Select an approach that best suits your project's needs
and integrates well with your chosen weather data source or API.
Ternary Operator
The ternary operator, also known as the conditional operator, is a concise way to write
conditional expressions in JavaScript. It provides a shorthand syntax for an if...else
statement.
The syntax of the ternary operator is as follows:
condition ? expressionIfTrue : expressionIfFalse
Here's how it works:
1. The condition is evaluated. If the condition is truthy, the expression before the ? is
executed. If the condition is falsy, the expression after the : is executed.
2. If the condition is true, the value of expressionIfTrue is returned. If the condition is false,
the value of expressionIfFalse is returned.
Here's an example to demonstrate the usage of the ternary operator:
const age = 20;

const message = age >= 18 ? 'You are an adult' : 'You are a minor';
console.log(message);
In this example, we have a variable age with a value of 20 . The ternary operator is used to
check if age is greater than or equal to 18 . If the condition is true, the string 'You are an
adult' is assigned to the message variable. If the condition is false, the string 'You are a
minor' is assigned to the message variable. In this case, since age is 20 , the condition is true,
and 'You are an adult' is assigned to message . The output of console.log(message) will be
'You are an adult' .
The ternary operator can be useful when you need to assign a value based on a condition in a
concise and readable way. However, it's important to use it judiciously and consider readability.
In some cases, an if...else statement or a separate function might be more appropriate,
especially when the condition and expressions are more complex.

Project Weather App

Uploaded by

Copyright:

Available Formats

Project Weather App

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Project Weather App

Uploaded by

Copyright:

Available Formats

Project Weather app

Project Preview & Setup :

// Wait for the HTML document to load

HTML & CSS Template

1. Sign up: Visit the AccuWeather developer portal at https://developer.accuweather.com and

Get City API Call

const apiKey = 'YOUR_API_KEY';

// Make the API call to get the city details

Get Weather API Call

const apiKey = 'YOUR_API_KEY';

// Make the API call to get the weather details

Updating the Location.

const apiKey = 'YOUR_API_KEY';

// Function to fetch weather data for a given location key

// Clear the input field

// Perform input validation

// Make the API call to get the location details

// Function to update the UI with weather data

// Event listener for the search button click

Object Shorthand Notation

Here's an example to illustrate the usage of object shorthand notation:

const name = 'John';

// Using object shorthand notation

Here's an example to demonstrate the difference:

const firstName = 'John';

// Using object shorthand notation

// Using traditional syntax

const resultDiv = document.getElementById('result');

const resultDiv = document.getElementById('result');

const imageElement = document.getElementById('myImage');

const element = document.getElementById('myElement');

console.log(name); // Output: John

const numbers = [1, 2, 3, 4, 5];

Default Values and Renaming:

// Destructuring object with default value and renaming

console.log(name); // Output: John

Weather Icons & images

The syntax of the ternary operator is as follows:

condition ? expressionIfTrue : expressionIfFalse

Here's how it works:

Here's an example to demonstrate the usage of the ternary operator:

const age = 20;

You might also like