Added a weather app to fetch and display weather by city name #328

ArshadShaik07 · 2025-10-04T20:14:42Z

This PR adds a simple weather app that allows users to check the weather based on a city name input.

Features:

Users can enter a city name to fetch weather details
Displays temperature, humidity, wind speed, and conditions
Simple and responsive UI with basic styling

This project demonstrates API fetching, DOM manipulation, and basic JavaScript usage.

vercel · 2025-10-04T20:14:47Z

@ArshadShaik07 is attempting to deploy a commit to the Suman Kunwar's projects Team on Vercel.

A member of the Team first needs to authorize it.

sumn2u · 2025-10-04T20:23:24Z

@ArshadShaik07 The solution looks great! Would it be possible to place it inside a folder (weather app)? That way, we can easily add more examples later.

ArshadShaik07 · 2025-10-04T20:29:44Z

yeah sure.

ArshadShaik07 · 2025-10-04T20:32:48Z

What about now?

sumn2u · 2025-10-04T20:41:56Z

What about now?

Looks good.

vercel · 2025-10-04T20:42:37Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
learn-javascript	Ready	Preview	Comment	Oct 4, 2025 8:43pm

Copilot

Pull Request Overview

This PR adds a weather application that allows users to fetch and display weather information by entering a city name. The app uses the OpenWeatherMap API to retrieve weather data and presents it in a responsive web interface.

Implements weather data fetching from OpenWeatherMap API
Creates responsive UI with input field, search button, and weather display sections
Handles user interactions including button clicks and Enter key press

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
examples/Weather-app/index.html	HTML structure with input field, search button, and weather display containers
examples/Weather-app/script.js	JavaScript functionality for API calls, DOM manipulation, and event handling
examples/Weather-app/styles.css	CSS styling for responsive design and modern UI appearance

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-04T20:42:46Z

examples/Weather-app/script.js

+const btn = document.querySelector(".srch-btn");
+const cityOp = document.querySelector(".city-name-output");
+
+const apiKey = "6244ab888f079565d5ce1deabddc3f77";


API key is hardcoded and exposed in the client-side code. This key should be moved to environment variables or a secure backend service to prevent unauthorized usage.

Copilot · 2025-10-04T20:42:46Z

examples/Weather-app/script.js

+		);
+		console.log(res);
+		if (!res.ok) {
+			throw Error("Error occured.Could not find the city ");


Corrected spelling of 'occured' to 'occurred'.

Suggested change

throw Error("Error occured.Could not find the city ");

throw Error("Error occurred. Could not find the city ");

Copilot · 2025-10-04T20:42:47Z

examples/Weather-app/script.js

+	windspeed.innerHTML = s;
+	temp.innerHTML = t + "<sup>o</sup>C" + `<p>${desc}</p>`;
+	humidity.innerHTML = h;
+	feels_like.innerHTML = fl + "<sup>o</sup>C";


Using innerHTML with dynamic content can lead to XSS vulnerabilities. Consider using textContent or properly sanitizing the content before insertion.

Suggested change

feels_like.innerHTML = fl + "<sup>o</sup>C";

feels_like.textContent = fl;

const sup = document.createElement("sup");

sup.textContent = "o";

feels_like.appendChild(sup);

feels_like.appendChild(document.createTextNode("C"));

Copilot · 2025-10-04T20:42:47Z

examples/Weather-app/index.html

+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>


The page title should be more descriptive than 'Document'. Consider changing it to 'Weather App' to match the application's purpose.

Suggested change

<title>Document</title>

<title>Weather App</title>

Copilot · 2025-10-04T20:42:47Z

examples/Weather-app/script.js

+window.addEventListener("load", () => {
+	getWeatherInfo("kurnool");
+});


[nitpick] The hardcoded default city 'kurnool' should be configurable or removed. Consider using a more universally recognizable default city or removing the default load behavior.

Suggested change

window.addEventListener("load", () => {

getWeatherInfo("kurnool");

});

ArshadShaik07 · 2025-10-04T20:44:09Z

Thank you .

sumn2u · 2025-10-04T20:50:34Z

@ArshadShaik07 When you have time, can you look into above suggestions?

ArshadShaik07 · 2025-10-05T04:26:23Z

Sure .

ArshadShaik07 · 2025-10-05T09:37:48Z

I have made the modifications according to your suggestions @sumn2u .Kindly check it once

Copilot

Pull Request Overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-05T10:22:50Z

examples/Weather-app/script.js

+	windspeed.innerHTML = s;
+	temp.innerHTML = t + "<sup>o</sup>C" + `<p>${desc}</p>`;
+	humidity.innerHTML = h;
+	feels_like.innerHTML = fl + "<sup>o</sup>C";
+	cityOp.innerHTML = n;
+	// Use textContent to prevent XSS vulnerabilities
+	windspeed.textContent = s;
+	humidity.textContent = h;
+	cityOp.textContent = n;


Lines 52-56 set innerHTML values that are immediately overwritten by textContent assignments in lines 58-60. The initial innerHTML assignments are redundant and should be removed.

Copilot · 2025-10-05T10:22:50Z

examples/Weather-app/script.js

+			if (res.status === 404) {
+				throw Error("City not found");
+			} else if (res.status === 401) {
+				throw Error("Access denied.Check your api key ");


Missing space after period in error message. Should be 'Access denied. Check your api key'.

Suggested change

throw Error("Access denied.Check your api key ");

throw Error("Access denied. Check your api key");

Copilot · 2025-10-05T10:22:50Z

examples/Weather-app/script.js

+// IMPORTANT: Replace "YOUR_API_KEY" with your actual OpenWeatherMap API key.
+const apiKey = "YOUR_API_KEY";
+async function getWeatherInfo(city) {
+	try {
+		console.log(city);


API key is hardcoded as a placeholder string. This should be moved to environment variables or a configuration file to prevent accidental exposure in version control.

Suggested change

// IMPORTANT: Replace "YOUR_API_KEY" with your actual OpenWeatherMap API key.

const apiKey = "YOUR_API_KEY";

async function getWeatherInfo(city) {

try {

console.log(city);

// IMPORTANT: Set your OpenWeatherMap API key as a global variable before this script runs.

// Example: <script>window.OPENWEATHERMAP_API_KEY = "your_actual_api_key";</script>

const apiKey = window.OPENWEATHERMAP_API_KEY;

async function getWeatherInfo(city) {

console.log(city);

if (!apiKey) {

throw Error("API key is not set. Please set window.OPENWEATHERMAP_API_KEY before loading this script.");

}

sumn2u

LGTM

sumn2u · 2025-10-05T10:29:09Z

Fixes #327

ArshadShaik07 added 2 commits October 5, 2025 01:34

Add weather app to fetch and display weather by city name

9a7775a

Add weather app to fetch and display weather by city name

8f3c275

sumn2u mentioned this pull request Oct 4, 2025

Create an Example Solution for a Video Popup Modal #326

Closed

Add weather app to fetch and display weather by city name

9d5bc00

ArshadShaik07 closed this Oct 4, 2025

ArshadShaik07 reopened this Oct 4, 2025

sumn2u requested a review from Copilot October 4, 2025 20:42

Copilot AI reviewed Oct 4, 2025

View reviewed changes

vercel bot deployed to Preview October 4, 2025 20:43 View deployment

ArshadShaik07 added 3 commits October 5, 2025 10:35

fix: updated weather app layout as suggested

06bb004

fix: updated weather app layout as suggested

e5b25c2

fix: updated weather app layout as suggested

57feb46

sumn2u requested a review from Copilot October 5, 2025 10:22

sumn2u assigned ArshadShaik07 Oct 5, 2025

Copilot AI reviewed Oct 5, 2025

View reviewed changes

sumn2u approved these changes Oct 5, 2025

View reviewed changes

sumn2u merged commit 8574bc2 into sumn2u:main Oct 5, 2025
1 of 2 checks passed

sumn2u added the hacktoberfest-accepted label Oct 5, 2025

	throw Error("Error occured.Could not find the city ");
	throw Error("Error occurred. Could not find the city ");

-	feels_like.innerHTML = fl + "<sup>o</sup>C";
+	feels_like.textContent = fl;
+	const sup = document.createElement("sup");
+	sup.textContent = "o";
+	feels_like.appendChild(sup);
+	feels_like.appendChild(document.createTextNode("C"));

	window.addEventListener("load", () => {
	getWeatherInfo("kurnool");
	});

	throw Error("Access denied.Check your api key ");
	throw Error("Access denied. Check your api key");

Added a weather app to fetch and display weather by city name #328

Added a weather app to fetch and display weather by city name #328

Conversation

ArshadShaik07 commented Oct 4, 2025

Uh oh!

vercel bot commented Oct 4, 2025

Uh oh!

sumn2u commented Oct 4, 2025

Uh oh!

ArshadShaik07 commented Oct 4, 2025

Uh oh!

ArshadShaik07 commented Oct 4, 2025

Uh oh!

sumn2u commented Oct 4, 2025

Uh oh!

vercel bot commented Oct 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 4, 2025

Choose a reason for hiding this comment

Uh oh!

ArshadShaik07 commented Oct 4, 2025

Uh oh!

sumn2u commented Oct 4, 2025

Uh oh!

ArshadShaik07 commented Oct 5, 2025

Uh oh!

ArshadShaik07 commented Oct 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

sumn2u left a comment

Choose a reason for hiding this comment

Uh oh!

sumn2u commented Oct 5, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Oct 4, 2025 •

edited

Loading

ArshadShaik07 commented Oct 5, 2025 •

edited

Loading