Vanilla JS Number Facts App - Ajax & Fetch

In this video we will create a vanilla JavaScript application using that fetches random facts on any number entered. We will use both XHR and the Fetch API to make requests to numbersapi.com
CODE: Plunk with this project
plnkr.co/edit/6...
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/t...
VISIT MY WEBISTE:
www.traversymed...
$15 COUPON LINKS FOR ALL MY UDEMY COURSES:
www.udemy.com/...
www.udemy.com/...
www.udemy.com/...
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
/ discord

[@TraversyMedia]

Guys as mentioned a few times below, the check to see if the input was empty should have been done before making the request. Sorry about that. I edited the Plunkr code in the description

[@shaileshsundram]

[CTRL]+[/]

[@giorgimerabishvili8194]

I already said this many times but I must repeat: Definitely the best tutorial channel on KZbin! Mad Respect!

[@TraversyMedia]

Thanks friend :)

[@ErnestGWilsonII]

I can't stop watching your videos! You have so many excellent videos and each time I watch them I pick up many new awesome skills. I am already subscribed and I am a patron and I must say I am impressed at the quality and quantity, you just keep cranking out top notch stuff! Thank you for taking the time to make these videos and share them with all of us!

[@devcaio]

Best web development channel on KZbin! Cheers from Brazil!

[@zeemyzeem]

I am so glad I ran into your channel Brad. You're a gift from God.

[@TraversyMedia]

Thanks man

[@raviverma8904]

was just thinking about doing some project to freshen up my JavaScript , and here you are thanks

[@pikachu5223]

Thank you Brad! Best channel!!

[@TraversyMedia]

You are very welcome, thanks for watching

[@Georgeisbusting]

Another excellent tutorial that helps keep my vanilla JS sharp. Thanks again!

[@ionut1234567891011]

Nice work! Big Respect for what are you doing.

[@TraversyMedia]

Thank you

[@wibowomuhmmad]

Thank for your all tutorials

[@inspiringcordillera7003]

Thank you Brad for this tutorial. I just added to my list of knowledge in JS coding.

[@ОлегБліщ-с8е]

You are BEST! I love Trawersy Media!!!!!

[@tomino133]

Great video once again Brad ! I love these Vanilla Javascript tuts :)

[@caroldanvers265]

Thanks sir! I really learned a lot and had so much fun doing this project. I'm going to do the math api and date api as well just to practice more. Keep up the great work.

[@GmoneyMozart]

Back at it again with the hotness!

[@someshnukala804]

Thank you so much sir. Very well explained. Clearly understood.

[@hirephpdevelopers3840]

Thank you Brad, I am your regular follower.

[@vaughanwatson2661]

Is there something similar to the EMMYs, but for the best KZbin Technical Tutorial Channel? If so then let us know where to go to vote, coz IMHO, Traversy Media would get my vote and win the category. Great job Brad and thanks for all the fantastic stuff you put out.

[@TraversyMedia]

Thanks! Thats not a bad idea :)

[@mohamedaminzouak1733]

Thank you so much brad for this awesome tutorials !

[@ahsath]

this has the same effect ...return response.text()... Good video!

[@Cinerable]

Brad I hope that God will bless you for what you do. That awesome!

[@dmitrymaur7186]

You make such nice useful videos, thanks a lot man.

[@erwinmesi]

You need to pump up your resume? Watch all Brad's crash courses, try all of those. Gain at least intermediate-level knowledge about all those courses. And there you go :) Congratulations, you're hired :)

[@aerawk]

I'm trying to deploy a version of this project but am getting stuck with Mixed Content errors because the Numbers API is only served over HTTP, but the browser (outside of localhost) won't show HTTP items on an HTTPS site. Any help to fix this would be much appreciated!

[@iMed-Med]

Thank you Brad! Nice work!

[@zeyneptora1198]

Awesome tutorial, Thank you!

[@Italya3343]

Hi Brad and thank you so much for sharing with us you video.. I'm wondering if you can share with us currency converter with Fetch on json.. similar to that video end to end.. thanks in advance.. (with select option from to).. :D

[@candycraft65]

nice video brad realy enjoyed it thank man

[@dragonballsuper6375]

hello Brad, can you make a mini presentation of Owl Carousel 2.2.1 and Isotope? just how to install, make them work, basic stuff. thanks in advance!

[@aureliuscalliste723]

Thank you man. Brilliant!.

[@skimran22]

Awesome tutorial I Appreciate

[@geekyboy7725]

Thanks for such nice content

[@TraversyMedia]

You are very welcome, thanks for watching

[@ionutcornea5469]

God bless you Brad!

[@jeff-creations]

Is there a way to make this HTTPS?? Thanks for the tutorial Brad.

[@cowboy8038]

The numbers api seems to only have a version. If you were running this on page using it keeps getting blocked for mixed content. How would you handle this situation?

[@givhearts]

did you ever fix this issue?

[@zhuolintsai9030]

Hi Brad, thank you for making such great videos. I am wondering if you will make a tutorial of scrollmagic.js in the near future?

[@ichnafi8512]

Nice video. But I think it would make more sense to check if there is a valid input before running the AJAX call.

[@TraversyMedia]

lol yes that does make more sense :( brain fart

[@GeekMustHave]

As usual an excellent tutorial. I'm going to have to watch your Ajax vid. Your using VSCode, how did you mark a whole block of text as a comment? That would be helpful during testing. Keep broadcasting!!

[@Georgeisbusting]

In VS Code should be able to highlight the block of code you want to comment out, then use CTRL-front slash (CTRL-/).

[@PsychoGod9898]

Why are you not using const instead of let for variables that won't be changed? As far as i understand ES6, we should use const for everything except we really need to reassign the variable.

[@bmanq2234]

Great video man!

[@valuedtutorials]

Hi brad..thanks a lot for all your videos. I have learnt so much from you. Please make a video on tweenmax animation.

[@dineshkumark1862]

Thank you

[@bitboxbear1432]

so xhr is used in ajax... where as fetch is not? Fetch stands on its own and doesn't need xhr?

[@edwardhandrich6043]

Great tutorial, as are all the videos you post. This works great in live server, but if I simply open the index.html file in a browser, it complains URL scheme must be "http" or "https" for CORS request.

[@edwardsicily]

1:21 this is 2021 and the bridge in the strait of messina is invisible

[@simplejosecom]

Can you make a video on Javascript's var vs let? Thanks

[@JoeWong81]

thanks again brad

[@swatijaiswal7428]

Hi Brad, i am not able to include the api link to get facts based on input DATE and YEAR in Ajax xhr.open() it says 404 bad request.

[@MD-cu8tt]

thank you brother

[@prateekagrawal8166]

If I declare style.css file, then how would I change display to block?

[@samara882]

Hey, hi brad can we have a Tutorial on ngx and ng-bootstrap ?

[@andygonzalez9319]

I'm new to back-end like coding but can we accomplish this 'GET' API method with Node and expressJs? Thats what im currently learning and just getting into API's

[@Jake-vi3hg]

Is there a workaround to get this to work when publishing to Github?

[@vinibp]

BOSS! can you do a crash course on NeDB? it's a lightweight database written entirely in Javascript. Thanks Brad from a big supporter and fan from Brazil

[@sfybskot]

I did the same but with dates. And I found that inputs with type="number" have no such a property as maxlength. It just doesn't work with number type. To solve this issue I've used onKeyPress="if(this.value.length==2) return false;" Maybe it will be useful for someone. Luck! And thank you for this video, Brad. It's awesome as always!

[@KjeKji]

Great stuff!

[@irwinpalomo7212]

WUUUUUUUUUUUUUUUUUUUUUUUUUUUUHHHHHHHHHHHHH HELL YEAH!!!!!!!!!!!!!!!!!!!

[@stouridge7701]

thank you teacher

[@AbhishekSingh-ee5ls]

Just Thinking why have you switched to VS Code from Atom. You seemed to love atom

[@canimcanimnazlim]

I added below the first if check if (!number) {fact.style.display = 'none';} because when we delete number we dont want to see the fact div

[@basantakc379]

Is there any chance you can make ecommerce site with laravel tutorial.

[@ConquerJS]

Awesome!!

[@AbhishekKumar-mq1tt]

Hi Brad u r awesome. I learn every time new things from your videos ,thank u very much for this wonderful tutorial .I create this project and my all code work properly but I enter a number and I see my console ,I get a error 'Cannot set property 'innerText' of null at fetch.then.then.data ' ,how can fix this error

[@utna9337]

Hey Brad, nice video. I've been asking for couple of months already if u can make some tutorials on nuxt.js or graphql in more details.

[@TraversyMedia]

Yes I get thousands of requests. Every video comments are just full of asking for something else. I try and fulfill and more requests for something else. and as for the more complicated stuff like GraphQL, etc, they do not get the views. I had a ton of requests for a React/Loopback series, I did it and very little gratitude but just comments asking for something else. So forgive me if I can not get to each and every request for cutting edge technologies. I did a 5 video series of GraphQL. Anything deeper is going to be a Udemy course. I do not mean to sound like a prick but the constant demands for free videos are getting a little annoying. Im sure there are other resources. Stephen Grinder has a great GraphQL Udemy course.

[@mdhasiburrahmannafiz9984]

❤️🧡🧡

[@ajazmiah]

If we do the year and date is it okay if we post it on our github profile ?

[@TraversyMedia]

Ofcourse, Id love to see it

[@saumyaawasthi538]

How can I use the api offline??

[@georgiydubrov]

Good day! Time after time watching yor videos, they are pretty good. But in this video, actualy the code you wrote makes me a little bit confusing. when you added check number != '' you are still sending xhr or fetch request, you just not showing an answer. May be it better after declaring number simply check if it's empty and just make return?

[@TraversyMedia]

Yes someone mentioned that below. The check should have been done before the request. It was a bit of a brain fart

[@georgiydubrov]

Traversy Media oh.. sorry missed that comment

[@bairi9608]

Use date at type ='date'

[@AlAminKhan-go5kv]

Why it doesn't work when i upload it in a server?? It works on my local machine. :/

[@TraversyMedia]

It should work. One thing to check is if you are loading it with https. You may have issues because the api is http. There are ways around this

[@AlAminKhan-go5kv]

Here amnkhan.github.io/demo/fun-projects/number-fact/ i am not using https . Can you tell me if there is any way to fix this issue? Thanks!

[@peoray]

Did you fix this?

[@रविचौधरी-ठ9ख]

Tutorial on creating prototype of webpage through application or gimp(Photoshop) *It will be appreciated if the app is for free.

[@zlackbiro]

if(number != ""){ fact.style.display = "block"; factText.innerText = data; } else{ fact.style.display = "none"; }

[@codelapse7352]

Brad I am making a website for my own school please help me to make a student profile viewing system. Expected:- there is a search option where students can be searched by their registration no And viewer can see the whole profile

[@lbrevilation7083]

how its possible you always choose most complicated way to work with js ? and all time you watch on your next screen , to copy..you dont know js with logic