weather-app | Single page weather forecast with React and D3 | Frontend Framework library

I am trying to create a Weather App. It works fine on web but does not work on my phone. I am using the expo online snack editor to test this. screenshot of the error:

All of my code is here

screenshot of snack editor "web" tab result:

I also tested it in the "iOS" tab of the snack editor & it has the same error as on my phone.

P.S. to get the exact result shown in the screenshot inside of snack:

1. Go to the Open Weather API website
2. Sign up for an account
3. Get your API key from the email that was sent to you
4. Go into functions/fetchWeather.js in snack editor
5. On line 2, replace where it says "redacted" with your api key that you got from that email.

I am trying to create a WeatherApp using React and OpenWeathermap API as beginner project. After fetching the data from the API, I am not able to return any component as it always returns null from the conditional statement.

I want to make a web with the subject of weather. I got to the point in the construction process that the icon should change with the change of weather.

I am new to react js. I am learning it by creating a simple app. I tried to create a simple weather app using react class component. All working fine but the result stored in a state variable is not printing in the template. I can see the API response in the console and then store the result on the 'currWeatherRes' state variable which is not showing in the template (Location is always blank)

This is my first GitHub page; I have created repository and even pasted my project into it, but when I enter the URL it gives me 404 error with "There isn't a GitHub Pages site here" description. My project called 'weather-app' and the URL: https://salehghari.github.io/

So it should be like this: https://salehghari.github.io/weather-app/weatherapp.html

Whenever I used GH pages in the past, when I deploy it would use my username as the URL. So in this case it should be http://William9601/weather-app-21/. However, since I acquired a domain it automatically uses that as the URL so it is now http://qreceipts.me/weather-app-21/.

How can I change this so it does not use the qreceipts domain? Not sure why it automatically uses that.

Thanks!

So I have created a folder in VS code with an HTML, JS and CSS file, when I open it in the browser it gives me this error in the console:

script.js:21 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at script.js:21

dateTime.innerHTML = ${day}, ${hours}:${minutes};

None of the JS appears to work on VS code, but when I copy the exact same code to code sandbox it works perfectly.

Would really appreciate it if someone could help me solve this issue.

Thanks in advance! :)

*The script tag is okey linked to the html, because if I alert("Hello") The pop up appears in the browser when using VSCode.

This is my HTML code

I was trying to create a search bar component that opens after clicking on a search icon in its parent component, and closes after clicking outside of the search bar. However, after clicking the opening icon it immediately triggered a (document:click) event in the search bar component, which was closing it too early as a result.

I found a workaround for this problem by creating a ‘searchMode’ variable in the search bar component and setting a timeout (in ngOnInit) that set it to true after 100ms. However, I’m wondering, if there’s any better solution to this problem rather than setting the timeout?

(Expected results: user clicks the search icon in navigation component —> search bar component shows up in place of the search icon —> user clicks outside of the search bar component —> the search bar disappears and the search icon shows up again)

navigation.component.ts

I have a problem with the two lines after adding async and await a new two errors appear in the await lines

"This expression has a type of 'void' so its value can't be used."

this is the code with the problem