My Experience at Intermediate Projects

My Experience at Intermediate Projects
0

#1

I’ve been really disappointed with the FCC map.

At the end of HTML and CSS and even jQuery, it all felt fine and good.
I got all the concepts and was able to implement them well.

But the Javascript tutorial was a really bad experience.
I don’t feel as if I even know 1% of Javascript at the end of the section.
And please note that I have been thorough with the course with all sincerity.

Now I’m at the Intermediate Projects.
I was able to get through with the Random Quotes Generator as I discovered a method that didn’t use APIs but now I’m at the Weather App and I have no clue where to begin with or how to implement it.
Ofcourse I can copy down some code and get help from StackOverflow for the programming bit but then I don’t actually know what’s going on with it.

I’ve decided to quit the projects and start learning Javascript from the EloquentJavascript book by Marijn Haverbeke.
Anyone had any similar experiences ? How did you overcome these problems ?
All suggestions are welcome.


#2

So the FCC youtube Channel has an 81 video playlist that teaches JavaScript in a more in-depth way, so maybe that’d benefit you more.

Not all my programming knowledge is gain from FCC, so I can’t really speak to how much of my intuition on tackling projects stems from the teachings of FCC, but I’m under the impression that at the very least the basics of the projects are doable from what you’ve learned through FCC. Like the intermediate projects are all achievable with JQuery + CSS +HTML. They are all a matter of fetching data from a remote API and render the relevant part to HTML

if you don’t mind me asking, what has been your obstacle in making the weather app?


#3

I’m on Javascript now and I feel the same way. I’m sort of just going through the motions with out any real understanding of what it is that I’m doing.

When learning any new skill I rarely use just one source. When I took Calc I in college, I remember using several different methods to learn the material.

Use FCC map as more of a study plan and move forward from there and if you find any good external sources be sure to send em’ my way. :wink:


#4

The API projects were really confusing at first, until I spent a week on them and got them to work one by one, and now they don’t seem confusing at all. Since then I’ve rewritten all of them at least once because the old code was pretty bad, and I’ll probably do it again soon but with React. That’s how this whole thing works and it’s a great learning experience every time.

I mean, sure, you could complain and then run off to spend a month on some book (I’m sure it will be useful, really), but you could also sit down and write 4 web apps that get you really comfortable with APIs :sunglasses:.

I guarantee all the information necessary is freely available online in neat, understandable form, but you need to learn to define what you’re looking for. As @psychometry said, the weather app only involves getting data from an API and rendering data to HTML.


#5

I didn’t know that they had a youtube tutorial section. I checked it out and the course contents are good but not exactly what I’m looking for.

That is exactly my problem,
How to fetch the data from a website ? Like yes I know we have to use APIs but how can we apply it to our javascript and how will that work ?
Besides that, the details of the code as in how it’s working ? Ofcourse I won’t need those details on the working but I feel a lot more familiar when I know these. I have this sort of mentality that I can’t get through without knowing these small things.


#6

Yes. I used external sources for calculus too . I mostly relied on Khan Academy though. And PatrickJMT’s tutorials.

Yes I’ve moved to some other sources now.
Primarily I’m speeding through this book EloquentJS. Seems really good so far.
Other than that I discovered this on Udemy after getting some reviews and checking the course content- https://www.udemy.com/javascript-essentials/learn/v4/content


#7

I like your approach. It’s great to go back to your old project to rewrite it.

It’ll be great if you can provide me your codepen link for the weather app project.
I need some reference.


#8

PatrickJMT is awesome.

Bookmarked the link you gave, I’ll check it out.


#9

When I first started learning Javascript I used the free Udacity tutorials. After I still felt I didn’t understand it. Then I payed for Team Tree House for a month, and I got a better grasp of it. Then I decided to enrol in Free Code Camp, it was a good refresher of all the HTML, CSS, Bootstrap, and Javascript that I learnt and you know what? There was still some Javascript I didn’t know. Keep at it and your experience and knowledge of Javascript will only get better. :slight_smile: It becomes a lot easier eventually. Keep making small projects on Codepen with Javascript.


#10

Isn’t the section right before the intermediate projects about API and AJAX?

Get JSON with the jQuery getJSON Method shows you a basic way how to fetch data from a remote API, Convert JSON Data to HTML and Render Images from Data Sources shows you a way you can convert that data into HTML. Get Geolocation Data shows you how to get user locations. Change Text with Click Events shows you how you can modify element with a click event.

Granted the instruction are basic, but I do believe they provide the necessary tool for at least a basic version of the local weather viewer, and I for one retain and process information better when I’m forced to apply and tinker with them. I’m certain there are more comprehensive and instructive resource out there, and surely you should use them if you find the materials on FCC lacking. The ultimate goal is to learn. Some people learn better by struggling their way through building, some people learn better by aquiring all the basic knowledge before moving on to application.

I don’t think you should expect to complete projects without some outside research, like reading documentations. It’s like any standard class, the lectures are not going to walk you through everything, so you are expected to figure some things out on your own. The training wheels have to come off someday. Deeper into the curriculum, the more work you’ll have to do on your own


#11

That was helpful. :slight_smile:
And yes, I’m trying the hit and trial approach.
It’s kinda rough for me being at programming.


#12

Yes. You’re right.
It’s convincing to go through the tutorials once again and have a crack at the project. I will do that tonight.
And also continue learning from other resources for in depth information.
Thanx a lot :slight_smile:


#13

When you’re given a task to write a program, you just don’t open up your code editor or codepen and just start hacking away and hope for the best, or do it trial and error. That will be frustrating, and may lead to dead ends.

Think or write down in plain english (or whatever your spoken language is), step-by-step, what you the programmer needs to do. Break big ideas/concepts down into smaller and smaller tasks – still in plain english (or whatever). If you can’t explain to yourself in plain english what you need to do to solve the problem, how can you write a program for it?

After you have your detailed step-by-step procedure (i.e. called a pseudo code), test each step by writing a small test program, just to make sure it works as you intended. (when you’ve gained more experience, this step can be skipped because you already know it works, or how it works.) But even experienced programmers would sometimes write short programs to test proof-of-concept for new problems/solutions they’ve never encountered before. This is also the part where you convert your pseudo-code to proper syntax using whatever language you’ve chosen.

Once youv’e got all the pieces of the puzzle together, then you can just string them up all along and combine them together, and that is your finished computer program.

Example: Requirement is:
Display Weather in your location

Break it down… you need to know your location first, and then find out the weather in your location.

How do you know your location?
Google around for answers… There are several ways to do this, with varying amount of accuracy and compatibility (and maybe even restrictions). You can do reverse IP lookup (a wild guesstimate, but could be close enough). Or you can use 3rd-party services that offer this functionality.

Using Google, you’ll learn that based on your IP address, there are databases you can download, that contains IP address ranges and location data (country, state, town, city). So you can lookup location based on IP address, Or you can use Google API that will spit out your estimated Lat/Long, City, State. No need to maintain or run a database on your end.

Next step: Write a short test program… does this really work? Just use plain console.log() to see if you’re getting data that looks correct. If you’re in state of California, and you get an answer back that you’re located in Tokyo, then obviously something is wrong - you may have an error in your program. Debug.

Once you have that part working, proceed to the next task… how do I get weather information given a lat/long, or city/state? Google around-- research. Then write a small test program… does it work? Does it give an answer that looks/appears to be correct? Can you extract the specific pieces of information you need? Write a test program or use Console to see if you can target and retrieve the text or number you need.

Now that you have the data, how do you display that as text on an html page? Repeat and rinse… follow the same steps as above. Write a small test program and test the concept. Works? Great… go to next step.

No more new steps? Then combine everything above into a logical sequence.

For each step, you may have to break it down into more detailed steps. You chip away at the problem little by little. You need to know each step, explain in detail, how you can arrive at the answer. If you can’t explain each step, in english how to solve this problem, you won’t be able to write the program. – A computer is the dumbest thing in the world. It only works if told step by step what to do. The only thing a computer is good at is follow the programmer’s detailed instructions very very fast.


#14

My own experience with FCC learning map : the curriculum is not designed for students to follow clear step by step instructions for each topic (If you want that, you are better off going to paid courses). Students are expected to do ‘read-search-ask’ to get thru the entire course.

This style of learning is not for everyone and can be painful at times, but the course is free (I like free stuff, yay !) and there are plenty of good folks on this forum volunteering their time to help learners.

Don’t give up, stick to the ‘read-search-ask’ and you will get to the finishing line eventually.


#15

Thanx a lot. !
I really like this concept of the pseudo code and will be definitely implementing it !
Also, you provided me a frame to begin with for the project.
I am still facing problems with using the API for the local weather. Most of them are paid and some just don’t work even with https as they said. I’ve spent hours trying just that one piece. But I’m sure I’ll get it.

Thank you for taking the time to explain.It matters a lot, as in the programmer’s approach. I’ll make it count :slight_smile:


#16

All the best brother !
Yes, I am greatful to the FCC community. They are really a big help.
And yes, I will take the video tutorials from Udemy or Lynda if all else fails. I have my hands in a few jars at the moment. I started a book on js, another video course and have decided to redo the FCC course. So yeah, I plan on sticking to this first.


#17

You can use
https://cors-anywhere.herokuapp.com/

Just prepend the above URL to your destination, so if you want to use API from http://api.openweathermap.org/data/2.5/weather, you call it like this:

https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather

And then you have to launch your weather program using https://

Here’s mine (combined 3 fcc challenges into one)
https://randomquote-owel.surge.sh/


#18

Hi @owel, I too did the following

Just prepend the above URL to your destination, so if you want to use API from http://api.openweathermap.org/data/2.5/weather, you call it like this:

https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather

to get around my local weather app stops working after codepen enforcing HTTPS protocol. It works but then I notice my local weather app is showing weather of Ashburn Virginia and not that of my location like before.

My guess is Ashburn Virginia is where https://cors-anywhere.herokuapp.com is located. So the app no longer works as intended to show local weather. To make it usable, it will be necessary to alter the app to accept user input of a location and then fetch weather data for that location.

Many people suggest switching to DarkSky API, but I find it has quite a number of restrictions on free loader users - e.g. API key can’t be embedded in JavaScript source code that you transmit to clients (free codepen accounts cant conceal code), no CORS, can’t call their API more than once within 10 min interval, etc.

It is clear DarkSky is intended for paid customers (free loaders are not really welcome) and they prefer users to have their own servers to relay API results to clients apps (doing this will be beyond the competency level of beginners completing this challenge) rather than client apps hitting DarkSky site directly.

The last time I looked at the alternative Weather Underground API, its documentation still says it is HTTP only.

What is your take on making the local weather app works like before (in codepen’s HTTPS era) and won’t require swapping out Open Weather API ?


#19

That’s what I’m doing… passing lat/lng to openweathermap. On my app, user has ability to get weather from other location (even other countries).


#20

Currently, my code is calling http://ipinfo.io/json which automatically gets the current location and pass on to open weather app. Prepend cors messes up the actual location.

Did you change your app to accept user input of a location then pass that on to open weather app ?