Weather Report - Mumina, Priscilla C24 by MuminaA · Pull Request #17 · Ada-C24/weather-report

MuminaA · 2025-12-09T21:32:27Z

No description provided.

…tton

…rn temp and weather, and refactors change sky

git push ;

Copilot

Pull request overview

This PR implements a weather report application for the "magic city" with interactive clothing selection and real-time weather data integration.

Key Changes:

Implements drag-and-drop clothing selection interface based on weather conditions
Integrates real-time weather API with temperature and sky condition controls
Adds comprehensive CSS styling with custom fonts and responsive layout

Reviewed changes

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

File	Description
src/index.js	Core application logic with state management, drag-and-drop functionality, and weather API integration
styles/index.css	Complete styling for weather app including layout, colors, and draggable clothing items
index.html	HTML structure with weather controls, clothing display, and city input
package-lock.json	Dependency lock file for ESLint and related tooling

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-09T21:36:21Z

+
+// Function to get temperature from OpenWeather API
+const getWeather = async (lat, lon) => {
+  const response = await axios.get('http://127.0.0.1:5000//weather', {


Double slashes in URL path. The URL should be 'http://127.0.0.1:5000/weather' (single slash after port).

Copilot · 2025-12-09T21:36:22Z

@@ -0,0 +1,539 @@
+'strict mode';


Incorrect use of 'strict mode'. The correct syntax is 'use strict'; (not 'strict mode';).

Copilot · 2025-12-09T21:36:22Z

+    height: 130px;
+}
+
+.sandls {


Typo in class name: "sandls" should be "sandals".

Copilot · 2025-12-09T21:36:22Z

+                        <img id='winter-boot-2' class="draggable-clothing shoes winter-boots" src="ada-project-docs/assets/winter-weather/winter-boot.png" alt="winter boot">
+                        <img id='rain-boot-1' class="draggable-clothing shoes rain-boots" src="ada-project-docs/assets/rainy-weather/rain-boot.png" alt="rain boot">
+                        <img id='rain-boot-2' class="draggable-clothing shoes rain-boots flipped" src="ada-project-docs/assets/rainy-weather/rain-boot.png" alt="rain boot">
+                        <img id='sandle-1' class="draggable-clothing shoes sandls" src="ada-project-docs/assets/super-hot-weather/sandal.png" alt="sandle">


Typo in alt text: "sandle" should be "sandal".

Copilot · 2025-12-09T21:36:22Z

+                        <img id='rain-boot-1' class="draggable-clothing shoes rain-boots" src="ada-project-docs/assets/rainy-weather/rain-boot.png" alt="rain boot">
+                        <img id='rain-boot-2' class="draggable-clothing shoes rain-boots flipped" src="ada-project-docs/assets/rainy-weather/rain-boot.png" alt="rain boot">
+                        <img id='sandle-1' class="draggable-clothing shoes sandls" src="ada-project-docs/assets/super-hot-weather/sandal.png" alt="sandle">
+                        <img id='sandle-2' class="draggable-clothing shoes sandls flipped" src="ada-project-docs/assets/super-hot-weather/sandal.png" alt="sandle">


Typo in alt text: "sandle" should be "sandal".

Copilot · 2025-12-09T21:36:23Z

+
+// Function to get coordinates from city name using LocationIQ
+const getCoordinates = async () => {
+  const response = await axios.get('http://127.0.0.1:5000//location', {


Double slashes in URL path. The URL should be 'http://127.0.0.1:5000/location' (single slash after port).

anselrognlie

Looks good! Please review my comments, and let me know if you have any questions. Nice job!

anselrognlie · 2026-01-03T23:31:21Z

+const convertKtoF = e => {
+  return 1.8 * (e - 273.15) + 32;
+};


Prefer a more descriptive variable name, such as degK.

anselrognlie · 2026-01-03T23:37:51Z

The ‎ada-project-docs/assets was intended to hold resources for the README. There was a standalone folder assets that could be used for resources for your site.

anselrognlie · 2026-01-03T23:38:50Z

Rather than placing these resources under ‎ada-project-docs, it would be more appropriate to use the standalone assets folder.

anselrognlie · 2026-01-03T23:41:03Z

👍 Nice wireframe. Having an overview to work towards can make it easier to be on the same page about your development plan.

anselrognlie · 2026-01-03T23:51:32Z

+  elements.gifFire = document.createElement('img');
+  elements.gifFire.src = 'ada-project-docs/assets/landscape/fireTemp.gif';
+  elements.gifFire.alt = 'A gif image of fire';
+  elements.gifFire.style.display = 'block';
+  elements.gifFire.style.height = '400px';
+  elements.gifFire.style.width = '43.1rem';
+  elements.gifFire.style.position = 'absolute';
+  elements.gifFire.style.bottom = '90px';
+  elements.gifFire.style.zIndex = '0';


Rather than building these elements in code, you could take an approach more like what you did for the clothing elements. That would allow the main styling to be applied through CSS rather than hard-coding the style. A way to be able to show or conceal the element is to default it to display: none; and then set it to display: block; when it needs to be shown.

anselrognlie · 2026-01-04T22:28:36Z

+const updateTemp = (event) => {
+  state.temp = event.target.value;
+  state.tempLabel = event.target.value;
+  elements.tempLabel.textContent = event.target.value;
+};
+
+const handleTempSlider = (event) => {
+  updateTemp(event);
+  changeBackgroundColor();
+  updateLandscape();
+};


Nice set of functions to handle and propagate changes to the temperature value. There are a variety of ways we can carve up the logic for changes like this. One way is to keep the event-aware logic solely in the function registered as the event handler (its responsibility is to extract any information from the event, and pass it along). Then we can have a function that updates the application state (its responsibility is state mutation), and then one final fiunction to "publish" the state value to the rest of the UI. Something like this:

const publishTemp = () => { elements.tempLabel.textContent = state.temp.toString(); changeBackgroundColor(); updateLandscape(); }; const updateTemp = (newTemp) => { state.temp = newTemp; }; const handleTempSlider = (event) => { const newTemp = event.target.value; updateTemp(newTemp); publishTemp(); };

Sometime the mutator function is also responsible for propogating the value to the UI, but often, we like to have a way to just update the state alone so that if there are multiple updates to the state, those can all occur with only a single "publish" operation after they've all happened.

This line of thought can be applied to pretty much all of the UI event handlers.

anselrognlie · 2026-01-04T22:36:19Z

+  state.city = event.target.value;
+};
+
+const handleRealTimeTemp = async () => {


Nice function to combine the operations of the two API calls. We could go a step further and create a third function that solely combines those two calls into a function that gets the weather for a place name. Then a final function could call the wrapper function, attaching the application-specific logic in the final functions, allowing the API functions to be independent of the application.

anselrognlie · 2026-01-04T22:37:41Z

+// Function to get coordinates from city name using LocationIQ
+const getCoordinates = async () => {
+  const response = await axios.get('http://127.0.0.1:5000//location', {
+    params: { q: `${state.city}`} });


Rather than having this function need to know to get the city name from the state, prefer to pass that in as a function parameter (as you did for the weather location helper!). That would allow this function to be fully independent of the application-specific logic, being more reusable and testable.

anselrognlie · 2026-01-04T22:43:48Z

+                    <div id="slider-bar">
+                        <label for="temp">Temp</label>
+                        <button id="realtime-temp">Get Realtime Temperature</button>
+                        <input type="range" id="temp" name="temperature" max="200">


Neat use of a slider rather than individual buttons.

One thing to be careful of with a slider is that its possible to have a slider that's too narrow to give the user precise control over the value. E.g., if the width of the slider is 50 pixels, but the user needs to be able to set a range of 100 values, the slider is likely to need to skip over values.

anselrognlie · 2026-01-05T05:37:04Z

@@ -0,0 +1,539 @@
+'strict mode';


It looks like GitHub has turned on at least some degree of Copilot auto review. All of its suggestions appear correct to me, so be sure to review those as well.

MuminaA and others added 30 commits December 3, 2025 13:24

npm installation

b786c81

adds wireframe to asserts

3a5d344

html layout

89ee3c8

layout of page started

aa6d7da

css

57c8557

merge

65f6bb0

start of getting buttons to work

07963fe

Merge branch 'main' of https://github.com/MuminaA/weather-report

e95e5f3

appends fire to temp > 80

52590b1

working on buttons

518a132

Merge branch 'main' of https://github.com/MuminaA/weather-report

e489376

implements cityname event listener

a2ffe41

implements reset button

93fe26a

removes console log

5aac818

adds assets

e27accd

removes borders

0c84261

adds new font

e93df90

moves button

d95c3c5

adds an event to skydropdownmenu

27efe15

changes and improvemenets and a bit of testing with real time temp bu…

a38bf58

…tton

"merge commit"

eea7b71

comments from roundtable question

93b7427

doll holder width made bigger

07ef5bd

Merge branch 'main' of https://github.com/MuminaA/weather-report

dbba837

minor changes and movements of files

72e4854

refactoring and improvements

fd4c757

moves things outside of global scope

5c36256

Merge branch 'main' of https://github.com/MuminaA/weather-report

4e609a5

puts fonts inside folder in assets

7bc2dfb

updates changesky and creates helperfunction

0e8ce2a

MuminaA and others added 25 commits December 6, 2025 15:33

comparisons file

7ab9b0c

updates landscape and creates helper function

a6f30d5

corrects path for landscape

13cb830

repositionings

988a916

Merge branch 'main' of https://github.com/MuminaA/weather-report

f8c9fca

last changes

e3e14e2

merge

cded017

move handling functions outside of the eventhandlers

0622bd8

refactors handle real time temp and get coords and get temp

1a5e4c1

refactors handleRealTimeTemp, getCoordinates and getTemperature

48d1f69

fixing some spacing

cc451fa

refactors handle Real time temp, changes the getTemp function to retu…

65cfc36

…rn temp and weather, and refactors change sky

renames gettemp to get weather

6a89707

removes extra chars

e3548d5

git push ;

deletes empty space

fff21d2

deletes old file

73dcd2b

drag and drop clothes function working with all assets avaliable

e2f209d

a bit of clean up

a77d613

refactors handlerealtimeskychange

93167cc

changes background color

07bd4bf

creates a helper function to update sky

9468499

Code clean up, ESLint clean up

16c4af7

Merge branch 'main' of https://github.com/MuminaA/weather-report

c3ba414

changes for deployment

59afa87

reverted main link code

ac1ed7b

Copilot AI review requested due to automatic review settings December 9, 2025 21:32

Copilot started reviewing on behalf of MuminaA December 9, 2025 21:32 View session

Copilot AI reviewed Dec 9, 2025

View reviewed changes

minor readjustments

ed5e5ac

anselrognlie reviewed Jan 10, 2026

View reviewed changes

Conversation

MuminaA commented Dec 9, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

anselrognlie left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants