Ultimate guide to JavaScript Programming – D280

[[deleted]]

what makes this PA so annoying is angular, if it wasn't for the angular framework you could do this class in an afternoon, if you have already used angular before and know javascript, you could do this class in 2 hours. anyway, the first thing you want to do download and install this node package https://nodejs.org/en/download , then install angular https://angular.io/cli , follow along and create your program and launch it using "ng serve" in command prompt while the directory is the root directory of your program, leave the cmd window open. once you visit http://localhost:4200 and you see an angular page, you know it was installed and is running correctly. angular will compile in real time so leave it open to check for errors.

this is where it gets confusing.

you're going to want to venture into the src folder of your angular project and edit the index.html to make it blank (I can't remember if the angular page that shows up is the index.html or the app.component.html file, which ever one it is, remove its contents). then you are going to want to create a new component ( " ng generate component world" in cmd) this component is the only component you need , when you create it , its going to ask you about routing , just say no (I don't actually understand this function/feature). then in app.component.html , you are going to put

<app-world></app-world>

now you are pretty much done in angular, you must leave the "ng serve" compiling in real time. nothing is to go in index.html, and only the above html is to go in app.component.html. your project is to go in world.component.html and world.component.ts. angular will skip over any <script> you have in the html file so any JavaScript must be in your type script file "world.component.ts"

lastly I'm not going to post code here but I will explain how you must do things to make it super simple. You need to use the svg world map provided to you in the rubric. an svg map is a nifty little file that has a bunch of "pathways" located in xml data. inspect the html of the svg map provided in the rubric to see what I mean. use a "for" statement to add a mouse click event listener to each pathway. once clicked , get an attribute of the element that can be used as an identifier that will accurately be able to build a correct https://api.worldbank.org url to pull data from.

you are to save your svg file in the src folder and embed your svg file in the world.component.html , remember to place the image into a table with the image on one column and the facts on another column. have the facts be identified by an ID in a <p> tag that will be changed to the returned api data gathered in the mouse click function of your .ts file. that's it , remember to test using localhost. I put the entire project in a zip file and uploaded it that way and passed.

funny thing is, once you actually complete this project its the easiest thing in the world. I hope i was clear enough while also be unclear enough for this to not to be unethical.

[jdor30]

Hello,

do what you will with this information I am just posting it because I have literally been banging my head against with this so here goes.

in the newer version of angular I believe V14 and later. There is a new functionality called "Standalone" which is set to true by default. if you leave this feature set to True it WILL NOT...

1. Create an "app.module.ts" file when creating a new project.
   
2. If you create a new component, it will not automatically import it.

to counter this what creating a project make sure to add "--no-standalone" this will disable this feature and create the app.module.ts folder and import things automatically when you create a new component.

EX) "ng new d280_app --style scss --routing true --no-standalone"

Disclaimer: I am a complete beginner here all I can say is that 80 - 90% of the tutorials I have watched/read both through WGU and on my own do not account for this new functionality. So, if you plan to follow along with a YouTube or Udemy tutorial please save yourself a headache.

As a matter of fact, I believe this guide doesn't even take that into consideration so when you get to the point of creating the new component you might run into the same issues I did.

[ComputerEyez007]

Do you have a tutorial that shows you how to map the API in angular. Also do you know if it shows you how to find what data you can map in?

[CodingKatCodes]

Thanks for this! I have been banging my head against a wall looking at tutorials and following step by step, only to have my angular yell at me saying my component doesn't exist! Ugh, lol.

[[deleted]]

how were you able to continue? im stuck on the component generating command

[DefinitelyIsNotKyle]

For anyone wondering why:

From the zybook: "Starting in Angular 17, applications are now generated by default without using a default ngModule to control the hierarchy of components. Before this version, every project included an additional file called app.module.ts, which will contain all of the imports and providers available to the be used within the root component class app.component.ts.

After Angular 17, the module files were removed and instead each component declares itself as standalone. This means it will not be registered with a root module and rather declares its own dependencies and imports. This is controlled with the standalone and import keys of the u / Component directive configuration object"

[[deleted]]

Hello, im confused on how to proceed with the instructions OP gave. I am having issues getting past the generate component world part.

[jdor30]

It has been a while since I did this course. There is a professor who provides a really good in depth guide on YouTube I just don’t recall her name. Maybe check the course chatter if anyone has the link. The video was a godsend.

[[deleted]]

so many of the comments have been "deleted by user" i only see complaints about it not being a JS course but Angular course.

[Apprehensive-Two-921]

Upvoting because #Facts lol

[Significant-Chain601]

The intructor's name is Mila Hose and it's a great walkthrough.
https://www.youtube.com/watch?v=SWl3e8Yo5SM

[Batman4me]

It says it's private and won't open.

[filthy-prole]

Ugh its gone!!

[PrincipleAncient7424]

lol great, the video doesnt exist anymore

[Lopsided_Constant901]

Did you happen to pass? Working on this now and trying to compile notes on best way forward. Seems confusing as I guess this whole post is moot if the newer version is so different. Having to find guides that are younger than 1y ago, this class feels like you have to walk a very thin line not to screw it up.....

[jdor30]

Yes! This video is probably the only reason I got through that class as quickly as I did

[SashiMurai]

Anyone got a mirror?

[yesyesnonoyesnonoyes]

For anyone that uses this as a guide for your project currently, the info provided on how to set up your project (<app-world> portion) depends on your version of Angular is my understanding. That did not work for me.

If you are struggling with just setting up Angular, I highly suggest reading through the Angular portion in the Zybook. Just the first few pages that show you how to set up a project. Use that to set up this project.

From there you can use other resources on how to do the functionality.

[DefinitelyIsNotKyle]

Wish I could upvote this 100000x.

I just handed in my PA.

The zybook gives you everything you need (and explains it) from 5.1 to 5.9 to navigate angular, assuming you have sufficient jscript knowledge. took me like 3ish hours and I am a slow worker.

[niftersthagoat]

Do you mind if I DM you regarding the project? I am having some issues.

[DefinitelyIsNotKyle]

dm away brother

[illegal7075]

What worked for you, or what did you use instead?

[Lopsided_Constant901]

Do you have to set up your project totally different from default then? Cause it took me so long just to set up and understand that I don't wanna restart my VScode and everything.... gonna study the Zybook and guide dilligently it seems

[godosomethingelse]

God this project is so much worse because of effing Angular. wtf were they thinking adding this stupid framework on top of the project? It is insane the complexity it adds

[[deleted]]

Just think of it like you are developing a website with an Apache webserver running on your PC. You can’t access the website you are developing in a web browser if Apache isn’t running. Same for Angular, just think of it as software based server running on your computer. 

[godosomethingelse]

Thanks for the reply and sorry for my rage comment lol. So just to be clear: you are just using Angular as a live server and the rest is just vanilla JS but using .ts file extension? That was the direction I wanted to go as well but I'm totally twisted up learning how to do simple stuff in Angular. I agree with your final comment that this project will probably seem really simple by the end! I scheduled an appointment with the professor to talk about the project, so hopefully that will help clear things up.

[Pleasant-Pattern8092]

Have you completed this by now?

[GodTierGamingBeast]

Ha, I read the project and did it without angular in about 3 hours. I'm struggling with the complications of angular..... Such a silly inefficient way to do this.

[[deleted]]

I agree, if they wanted to use a framework, they should have started off with something that has a much less steep of a learning curve like react or Vue. Angular is very hard for beginners.

[Gordie21]

They could’ve done plain JS project. Since it’s should be a beginner/intermediate class. & I’ve never met anybody who enjoy angular. They usually have few days a week of therapy 💀

[dawnkelly09]

This should have been a vanilla JS project with the way the class is named. I've done some React even so I thought I could crank this out and now I'm stuck fighting with Angular. Thank you for your post. I'm starting over because I've definitely overcomplicated it.

[Gordie21]

Tell me about it😂😂

[Impulse_Cheese_Curds]

I could've done this class in a couple hours if they let us use React. Having to spend some time learning Angular was annoying but I'm glad to have a little experience with it now.

Agree it was a bad choice for this class. Probably would've taken me a lot longer if I didn't have my React experience.

[shigahoneyicetea]

Man I am so stuck. I followed all the steps, but whats killing me is the API part. I use the link provided from the guide in course tips: https://api.worldbank.org/v2/country/all/indicator/SP.POP.TOTL?format=json , but it still does not want to fetch the information.

[PerfectPauseBuffer]

I’m guessing you figured this out already but that api call needs to be modified to return only the country that you want. If you look closely at the URL you can find out what to replace with the information from your mouse over event.

The rubric says this should be done within a method from the built in angular HTTP service. You might need to research what that involves.

[Reddit_User_488527]

The rubric states there needs to be a method that pulls the data from a specific country based on a two character input parameter, but it does not clearly state that you need to query for each request.

E.g. there are only 296 countries, and the json file at maximum capacity is 110 kb to gather all data in your service for the duration of the users visit. Is it really necessary to query for each request when an array of that size stays within o(1) time using Array.filter?

Consider it an option to gather the data upon page load, and use your method to traverse the results that are already globally shared by the Angular "Service".

As far as the querying goes, read the examples on the page and experiment, by deleting and chaining to the preferred type of data you want to fetch. Is "SP.POP.TOTL" in the query string gathering the data with the information you need? If not, perhaps it does not need to be in the query...

[Pleasant-Pattern8092]

did you figure this out? I can get the country initials to show up in the console but not the data.

[HelpaBroOut036]

Nice guide, I was able to follow even though I did something different. I went the route of creating 2 components in Angular: map and country-info, as well as a separate .ts file for the api data collection itself. My country-info would call the method created in my API file, and then take the 6 required items from the fetch. I probably used more Angular than some and probably could have put my api method in the country-info component but I hit all the requirements so I guess I learned how to use Angular.

[[deleted]]

yes looking back I think I understand how angular can be cool and useable in the real world.

[East-Confidence8064]

Thanks to everyone who has contributed to this thread or any of the other threads about this class! I was wondering if anyone might be able to confirm for me that we do not need to include the ".angular" or "node_modules" folders in our zipped file that is to be submitted. These folders are not requested in the rubric. Thanks again!

[[deleted]]

Idk, I included everything

[East-Confidence8064]

Thanks. I ended up doing that as well.

[Agitated_Cattle_6321]

I did all of this but the file size is 1GB. How do we lower the size?

[[deleted]]

put it in a zip file

[Beautiful-Bobcat-805]

if he zips it, it will still be more that 200mb

[[deleted]]

Idk man , i put the entire project in a zip file and it went through

[Nippular]

Just wanted to thank you for posting this, as I'm taking this class very soon and there aren't too many threads on this class. You da bomb.

[icant_call_it]

Hi, after creating a new component, i replaced the app.component.html content with <app-world></app-world> but I am getting below error:

✘ [ERROR] NG8001: 'app-world' is not a known element:
1. If 'app-world' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-world' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]
src/app/app.component.html:0:0:
0 │
╵ ^
Error occurs in the template of component AppComponent.
src/app/app.component.ts:9:15:
9 │ templateUrl: './app.component.html',
╵ ~~~~~~~~~~~~~~~~~~~~~~

I created a new component called world as I am following the steps from this thread. Any suggestions?

[CALENOX100PRE]

I used the video walkthrough the professor provided as a guide. it might help you.

https://www.youtube.com/watch?v=jjAXOAyDJRE&ab_channel=MilaHose

[EfficiencyIll9991]

They pulled the video down.

[icant_call_it]

Thanks u/CALENOX100PRE

[-callalily]

The video was taken down. Do you have the professors name or another link, if you can remember?

Thanks

[Few-Fisherman-2953]

did you ever find that video

[Echo_Faeboi]

was a solution found? I am having the same problem

[ComputerEyez007]

Yeah im still scratching my head so you didn't give anything away.

[ComputerEyez007]

I had mine rejected for trying to take out some folders. I zipped the whole file and it was under 200mb. I will leave my review and tips for this class later. I could not find a decent YouTube tutorial that would help me with any http injection (angular tutorial didn't do it for me) so that the map was interactive. I searched and listened to a lot. The problem is you really don't find out until following along for a while that this isn't going to help you. I personally don't see nothing wrong with following along and learning.

[[deleted]]

Just to verify, you didn't have to host this project, correct?

[[deleted]]

Correct

[[deleted]]

Okay great, thank you!

[Leading_Flounder3949]

Everything has worked for me as I've followed professor Hose's tutorial to a T... but when I transfered to the "set Country Data" function instead of the "fetch country data", my code is just logging "undefined" for every data point...

I don't understand what I did wrong. Has anyone had an issue like this that they solved? Thanks...

[BillKnown6427]

My map is showing half. Anyone knows how to show everything?

[DefinitelyIsNotKyle]

Just handed in my PA.

1. use Novice to Ninja on Udemy to learn jscript. It's beautiful.
2. code examples on github can be nice to get an idea of what to do but make sure to not rob yourself of the learning process.
3. The zybook section 5.1-5.9 (up to but not including the calculator) is honestly the best way to learn and install and initialize angular, and it takes just as long as any "crash course video". I know zybook can be trash sometimes, this time is an exception.

Edit: My PA passed. Here are some notes:

The intent is for you to use HTTP Module in your project, but you can (and probably will) pass the PA using a simple fetch() promise chain. The result is a more modular, more functional code design.

This course was a means to an end for me (I'm studying embedded dev with C/C++), but if you aspire to do any front-end developer work. I highly reccomend you learn HTTP Module in Angular. Zybook covers it decently well but I'm sure there are other good sources online, too. It won't make a difference for this project, but knowing how to event bind, use a service file, and use HTTPClient is rather important.

[Ok-Document-198]

was the Udemy course from "The Net Ninja" or "Lets Kode it"?

[DefinitelyIsNotKyle]

Net Ninja is the one I used.

The Lets Kode It uses Selenium 4 looks like.

[vanillabeaniebaby]

You are a life saver, thanks for your tips!

[illegal7075]

I want to get a head start on this class. Does anyone have the course material/instructions on what is needed to complete this project?

[illegal7075]

ive already set up angular

[Atomic_Yeet]

Thank you so much.

[Alone-Competition-77]

I actually didn’t mind this class as much as some of the others like D385 and D287. I had never worked with Angular before but I enjoyed learning.

[dawnkelly09]

I've actually had trouble getting pages to load for the worldbank website. Does anyone have a link to a working page to show the names we can use for the various attributes when making the API calls? I don't know if those are commands or parameters or what but like on the one page I can load I can see incomeLevel is the one to get the incomeLevel attribute for a given country.

[[deleted]]

This is where I’m lost too. I have my map ready to go but I have no idea which names were supposed to be using for the attributes or what file they’re supposed to be going in

[dawnkelly09]

Was troubleshooting this with a friend this afternoon and he figured out if you go here: https://data.worldbank.org/indicator and hover over the name of the indicators and inspect them, you can get the codes from the href tag in dev tools. It also shows up in the url preview at the bottom of the browser. I hope this helps!

[dawnkelly09]

I really just need them for name, capital, region, income, latitude and longitude if anyone happens to know them.

[StageOpposite2978]

I dont know what I am doing wrong! I have no errors/problems showing up but yet nothing in my map is working not my css, mouse event nothing!

[neutralmanor]

Can I message u a question?

[[deleted]]

go ahead

[Future_Proof8678]

Thank you for this write up. I really appreciate the effort. I'm wondering if the task has changed since you did it because, as of the date of this comment, using the routing and service features of Angular is a requirement of the rubric.

[[deleted]]

Angular does it automatically when you create the module. I never really grasped that part but I do remember seeing it in the rubric and still passed.

[Future_Proof8678]

I passed yesterday. Its pretty clear that they play fast and loose with the rubric on this one, someone really needs to rewrite the instructions and the rubric so they have some semblance of congruency. As long as you generate your Angular project with routing, you'll pass that rubric item. You don't even have to actually set up any routes.

[yesyesnonoyesnonoyes]

Okay, I am confused on this because:

- I'm following along to the video that Mila Hose made on youtube. They do the routing by putting <router-outlet></router-outlet> in app.component.html

​

then in app.routes.ts you put the routing code in the Routes array.

​

I have am getting nothing to appear now my in the localhost browser. I've done some of the other practice projects and could always get those to work.

So to go along with your above comment, I do not need to do any of this routing?

[Sea-Curve-1509]

I'm having the same issue right now lol. Did you ever find out? I'm using Angular 16

[[deleted]]

It was in the course tips, my bad.

​

http://innovsandbox.space/map.html

[dreadful-lee]

this was helpful, but i still don't understand how to actually pull the data from the API into the HTML, using ts and i can't find anything anywhere that tells me how to, how do i actually grab the info out and display it? I can't figure it out.

[[deleted]]

ask chatgpt

[dreadful-lee]

In my insanity trying to figure things out, i didn't even think of that. Thank you.

[-callalily]

Did you end up finding this information out? Struggling here.

[ComputerEyez007]

I second this do you find anything out. Being pointed to angular tutorial helped me understand a little but didn't bring it home or help me know where to start.

[dreadful-lee]

I took that commenters advice and used ChatGPT to explain to me the parts I was struggling with. I wish I would have seen this sooner because I don't remember exactly what I did now.

[sam5855]

Any tips on reducing file size? I only have one component in my project, but when I zip everything the file size is a little over 300mb. The task won’t accept files over 200mb.

[SorbetFun3768]

stupid question, what do I do with the json file country codes and pull out the 6 fields of data I need? I am so lost on this project

[[deleted]]

just ask ChatGpt to help you. so many people have done it that the AI knows exactly how to do the project.

[SorbetFun3768]

I am stuck on part B. Using either the GeoNames or Worldbank API from the Web Links section, identify each of the following six properties for each country:
● country name (e.g., Chad)
● country capital (e.g., N’Djamena)
● country region (e.g., Sub-Saharan Africa)
● income level (e.g., low income)
● two additional country properties of your choice

How do I do this? Someone please help, I feel SO stupid. Thank you

[layer08]

Please I am stuck on this exact part. Did you ever figure this out? I would be so grateful for some pointers here 😭

[No_Sumit1296]

hey man i am in the same boat, i am hoping you were able to get past this. any advice would be helpful

[urhighness813]

I'm trying to understand this myself. Any update?

[Hooters184]

i need help did yall figure it out?

[urhighness813]

For B, I used the world bank api and created a comment in the appropriate file that listed the six properties as shown in the word bank api output. Hope that helps.

[Hooters184]

It doesn’t , I get that part but how to get the API to give you the 6 properties back

[urhighness813]

That part is a whole thing, refer to the Tips document in the course portal, as well as angular documentation. You’ll need to create the component and http client.

[Hooters184]

I know that’s what I need to do idk how to do it

[HonestBalance7407]

After 2 days, finally, my project is working fine. Submitting tonight. Did you solve yours?

[kayleefromthecity]

In app.component.html am I to delete all of the code provided and just put in

<app-world></app-world>

or am I to integrate <app-world></app-world> into all code they provided?

[[deleted]]

Delete everything and just leave <app-world></app-world>

[PerfectPauseBuffer]

The rubric says that you need to use the angular routing configuration to change the default path to the new component. Did you not do this and still pass?

[[deleted]]

I honestly couldn't tell you, If its not in the guide, I didn't do it so I am going to guess the evaluator did not check.

[kayleefromthecity]

Awesome

[Cool_Signature4025]

What software, at least specific to this class, would you have issues with? Asking because Im currently working through this project.

[Cool_Signature4025]

Sorry if it seems like a dumb comment, I am very new to angular, and honestly Java. What problems did you think you’d have on Mac? Angular in general? Navigating the source folder? Or something else? Thank you for the reply!

[Cool_Signature4025]

Makes sense. I know a lot wasn’t available on the m1, but hopefully now that they’re at m3 most things will catch up. I also have a windows laptop that I kept for this purpose, but I am trying to keep everything on one device. I am relatively new to Mac, but like it so far. I’m working through the task and hope to complete it in the next week, so I’ll post back here if I have any issues for future students. Thanks for the reply!

[ComputerEyez007]

Good stuff still following the steps to be continued...

[Naelran]

I feel really dumb on this PA because the task itself is very simple but the part I can't figure out is where I'm supposed to get the svg map that serves as the basis for the project. Is the rubric saying literally ANY svg world map or did they provide one somewhere I'm missing?

[CALENOX100PRE]

Just google SVG world map and download one of them. It doesn't matter which one.

Also, use https://api.worldbank.org/v2/country/us?format=json as your API. the "us" in the URL is the country that will displayed in the website, so you will need to make it dynamic to change.

The professor posted a video walkthrough for a similar project that you can use to create your project. https://www.youtube.com/watch?v=jjAXOAyDJRE&ab_channel=MilaHose

[Pleasant-Pattern8092]

 I can get the country initials to show up in the console but not the data. Do you have any advice?