Weather Application in React Question

Weather Application in React Question
0

#1

Hello So Im almost done with my weather application and I was just trying to add a background image
to it as well as put some sort of black box with opacity set to like .8 for the weather output text.

I cannot seem to do it for some reason please help…
Code Base:
https://drive.google.com/file/d/0B26XZRkZIdlVdWJLaDJsQ1h6azQ/view?usp=sharing

you can fire it up with webpack -w in one terminal and node server.js in another terminal running
on local host… I also have it on git hub repo as well live…


#3

yes thank you I tried that… yet I have yet to be able to even load the image in the back ground or the best way to do it …

yes I will use that rbga when I get to that point… I guess for the out put I will add a div element in main like just a rectangular box… yet my main problem is getting this image to show up… any ideas>>>


#5

Hmmm Im not sure thats possible I zipped the files and linked it above… it has many files … can you down load and click npm install? after unzipping then webpack and node server.js in terminal it will run locally on 3000 or it is online as well you can see the params in server.js… if you know react because I’m a beginner this is my first almost complete project…


#6

or if you have another way for me to get you a zip file from my linux machine… not sure


#7

CHeck this out here http://sleepy-beach-84962.herokuapp.com/#/?_k=gumskc <— its live


#8

Post the github link, so we can see all the code.


#9

its above yet here it is again … still stuck with this… http://sleepy-beach-84962.herokuapp.com/#/?_k=gumskc


#10

I have just started learning React, so hopefully someone with more React experience can answer this question faster.


#11

Did some legwork and found the repo:

It looks like your image is just not referenced correctly, as it’s giving a 404. If you change:

background-image: url("/img/sarah-lake-tahoe.png");

To:

background-image: url("../img/sarah-lake-tahoe.png");

That should fix it.


#12

Hello fellow web geeks,

Thank you for taking part in helping me debug this React app… React is the popular framework facebook is buiilt on and it works really well with node js.

For this repo to fire up the application to help test or debug its easy…
Step1: Download the repo to the file location you like… I keep mine in a "sites: folder.
Step2: Open the file manager on Linux navigate to the file folder “ReactWeather” of course after you unzipped it and right click to open in terminal… do this 2 times one for webpack and one to load the site on local host… type: “webpack -w” in one terminal and “node server.js” in the other… this will build the app then load it on local host.
Step3: Open a 3rd instance of react weather for your desired text editor I use atom because it doesnt crash like brackets used to… it handles large apps in other words over 30k files.

Issue#1 I went on to the chrome console and changed it back to “url(…/sarah-lake-tahoe.png”) as you suggested above
In the console it did not change anything for me… my React instructor provided 4 ways to embed images into applications here on this download link> http://files.mead.io/1e091P3H2h09 . It shows the packages needed to do it different ways with the css. Yet so far I have only got a broken image… not sure how to load his application to look further… I have locally added his packages for this “file-loader” & “url-loader” via npm and still debugging now… I hope you learn valuable things from this as well because it seems really powerful so far… Your essentially injecting all your html in a modular pattern… your also then converting jsx to js for the bundled output… Not sure why my css doesnt seem to load… hopefully this wont take to long to figure out… im on day #3 now… someone knows exactly how to do this… Thank you guys for your help…

NOTE: YESSSSSSSSSS I FINNNNALLLLY GOT THIS THING OOOOOOMMMMYYYY GAAAAWD IT WORKS!!! SUUUPER EXCITED… that solution above worked I needed to change the local folder to img instead of images then put the two dots to jump out of the file… this didnt seem to work last night when I tried it…

SECOND NOTE still needs a little cleaning up…a broken image file exists on top and i need to handle @media query some how for device compatibility yet this is a HUGE progress here…thank you so much… feel free to practice on these apps there really nice… Im going to upload the new one to git so the link reflects new changes… Thanks again!!!