Weather app help me :( (solved)

Weather app help me :( (solved)
0.0 0

#1

so i just got to the weather app builder… but im lost, i dont know where to start. i cant find any thing to help explain it that breaks it down for me on how to build it and what these statements are doing… because i dont wanna do this copy and paste crap… i want to actually understand this…


#2

Do you understand the requirements (User Stories)? Did you view the sample weather app without looking at the code? Do you see how the sample app fulfilled the User Stories?

The Note explains who you can use the FreeCodeCamp Weather API. If you click on the API link, it will tell you how to use it.

See if you break this project down into smaller parts and then try to figure out the best way to build each part. Think of the smaller parts as mini challenges. I typically start off a project by writing down the parts on pieces of paper You are going to need some HTML to create elements to hold some weather data from the API and then you are going to need some CSS, to make it look nice. Last, you are going to need some JavaScript (vanilla JavaScript, jQuery, or some other library) to both get the weather API data and then some functionality to toggle the temperature between Celsius and Fahrenheit.

Expect to go through a couple iterations of changing the layout. The first iteration may just barely meet the requirements. Later iterations may even add more functionality and visuals once you start getting some data. Review back through your previous challenges, as you have already learned how to get the latitude and longitude of a user’s current location. You have also learned how to use jQuery to request data from an API. You will also find yourself needing to search for how to do things that you may not have learned yet to implement certain features for this project. This is totally normally and is expected.

Always remember, if you get stuck, you can always post some code you are having trouble with here in a post and ask questions. We will try to point your in the right direction without just giving your the answer. We want you to figure most of it out by yourself, because in the end, you will learn so much more.

Happy Coding!


#3

the issue that im having right now, is that going through the challenges, they dont really do a great job of actually explaining the terms they are using… like i get some of it, because i used to do this stuff back in high school, but it seems it has changed a bit… anyways, getting through the challenges, it seems like i cant even start without actually looking at the forum, like all the sudden, now, they say use the endpoint, use an api to do this, but you cant… like how am i supposed to get an example for how to make this work right? because ive taken what i know and tried to run it, and it just aint going through, i feel like im missing something, and its upsetting… only because i feel like there is no explanation anywhere of certain terms. like example… get requests, what information can i get? what keywords am i suppsed to use? is it flexible? like where are my boundaries on this?

that being said, i can visit the page with the info of my own lat and long. and i can see the data that it responds with, but i cant get my codepen to retreive and display it, like, i havent really looked at the code for the example, but i needed to find other examples just to see if maybe i might be missing something, and so many people use different methods like @import, which i dont neccesarily wanna use just yet… and some people’s didnt work, and some peoples dont cover the info i want to display… like im overwhelmed with it all, and still cant see what i personally am missing…


#4

In order to get the data for the location, you’ll use the AJAX of your choice (such as jQuery’s getJSON), which will return to you a JSON, which you can parse as a JavaScript object and save into a variable. Then using that data, you want to insert the relevant info into your HTML.

Have you already finished the quote machine project?


#5

yes, i have just finished the quote machine, which i got relatively easily… i had more trouble styling it to be pretty enough for me than i did with the actual commands…

but. am i allowed to use openweathermaps api instead of freecodecamps api bypass??? somehow i found that, and now, i think im starting to peice together how to get there… maybe. ive rewritten it all 6 times already hoping i had it right… lol but, this is just using an already determined location, and not seeking a location… i think thats really the only issue im having, is the geolocation, and displaying it… idk


#6

You might want to review the following FCC challenge for how to get the geolocation from a user.


#7

yeah, i have… when i run that code through codepen, first off, it ends wrong, with a “;” that shouldnt be there… then…

instead of displaying information it says “//# sourceURL=pen.js” so… idk what im missing here


#8

id even take it displaying the arrayed info as opposed to nothing right now. lol


#9

Can you please post a link to your Codepen, so we can see what you are actually doing?


#10

so far i dont have one really… i have like a bunch of them where i was trying to take other peoples codes and modify them to see what changes when i delete this… kinda stuff… kinda fails tho when someone has refferenced and outside source… but the one where im simply trying to geolocate is https://codepen.io/EvonyJade/pen/zRQwQM


#11

i read another forum post, i cut out the source tags, and fixed that, but it still shows nothing


#12

and now FCC is broken


#13

omg. hold on. i think my browser settings are contributing to my issue lol


#14

well that fixed why it wasnt showing up on fcc but not on codepen :frowning:


#15

I just reviewed the codepen link you provided. If you look at your browser’s console (Ctrl+Shft+J in Chrome), you will see the following error message:

Uncaught ReferenceError: $ is not defined at VM314 pen.js:1

You are getting this, because you are trying to use jQuery, but you have not loaded the jQuery library. Use the the JS module settings (the gear on the left side of module) and then select jQuery from the Quick Add dropdown.


#16

okay ill try that :slight_smile:


#17

well im still having issues, because for some reason my browser wont let me allow codepen to track my location… so i need to investigate that… but at least now its giving me the little locate icon, it wasnt before…


#18

omgomgomgomgogmogmg so. thank you lol using ctr shft j, i figured out what the heck was holding me down. apparently because i kept requesting it, and not being able to actually allow the tracker, (because i didnt have jquery on) they had shut down my access to do it… i had to clear my browser history, as well as embed access thru iframes… but boom. its working. :slight_smile:

now i can figure out the rest of my code :slight_smile: ahahhaha thank you so much :slight_smile:


#19

$(“document”).ready(function() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

var status = “https://fcc-weather-api.glitch.me/api/current?lon=” + position.coords.longitude + “&lat=” + position.coords.latitude;

$.getJSON(status).then(function(info) {

var behavior = info.weather.main;
var temp = info.main.temp;
var country = info.sys.country;
var city = info.name;

function displayInfo(city, country, temp, behavior){

$(".city").html(city);
$(".country").html(country);
$(".temp").html(temp);
$(".behavior").html(behavior);

}

});

});

}

})


#20

what am i getting wrong here? am i not retreiving the data right, or displaying it right??? lol