How to Check Network Status using JavaScript

How to Check Network Status using JavaScript | Toast Notification to Detect Internet Connection or Network Status in JavaScript
In this video, I have shown you how you can create a toast notification to check the Internet connection status or network status using HTML CSS & JavaScript. The concepts/codes behind creating this program are so simple. At first, using JavaScript Ajax I send a GET request to a particular passed URL and check, that URL is sending any data as a response or not and the response status of that request is equal to 200 and less than 300 or not. If the URL is sending data as a response and the response status is also equal to 200 then the user is connected to the Internet so he/she is getting data as a response but if it isn't means passed URL is not responding any data then the user is disconnected from the Internet.
You may have question about why I didn't use navigator onLine property and online/offline events to detect the network status right? As we know, navigator.onLine will return true if the browser is connected to the Internet else it will return false. But you can't assume that a true value necessarily means that the browser can access the Internet. Suppose, you're connected to the WiFi which has no Internet access then navigator.onLine will return true value but you can't view any online pages and I don't want it so I used above method. You can detect network status by using many different methods.
Download Codes From Here - codingnepalweb.com/detect-int...
Second Channel - bit.ly/3aHNkru
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Unicons by - iconscout.com
Music Credit:
Ikson - Last Summer [Official]
• #37 Last Summer (Offic...
Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
➤ Watch: • Jimmy Hardwind - Want ...
Track: Lost Sky - Vision [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Vision | Du...
Acejax feat. Danilyon - By My Side [NCS Release]
➤ Watch: • Acejax feat. Danilyon ...

Пікірлер: 146

  • @joshuamotovlog6359
    @joshuamotovlog63593 жыл бұрын

    Thanks for your great tutorial! 👍

  • @hackerprime9722
    @hackerprime97223 жыл бұрын

    Much love from Jamaica. I wasn't looking for this in particular but this will be helpful in my application

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Glad to hear that

  • @hackerprime9722

    @hackerprime9722

    Жыл бұрын

    @@CodingNepal I'm still working on the same application and I'm going to use it in a different section now.

  • @pronehacker9915
    @pronehacker99153 жыл бұрын

    Ur the best ill add this to my website

  • @mubindaghost
    @mubindaghost3 жыл бұрын

    As always this is another useful thing thanks

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you so much :)

  • @user-yt7hd1pw6d
    @user-yt7hd1pw6dАй бұрын

    Thanks bro more love🥰

  • @deepeshdhakal7476
    @deepeshdhakal74763 жыл бұрын

    Beautiful and so many things to learn thank you

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You are so welcome!

  • @imprasna2539
    @imprasna25393 жыл бұрын

    This is really a nice one, Thanks for this tutorial

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You're welcome 😊

  • @clutchdiamond8891
    @clutchdiamond88912 жыл бұрын

    Wow !!!! Nice One

  • @zaidshah8923
    @zaidshah89233 жыл бұрын

    I was looking for this thanks

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You're most welcome

  • @AdisolGaming
    @AdisolGaming3 жыл бұрын

    Awesome!

  • @alldayalone24
    @alldayalone243 жыл бұрын

    Doing ajax requests every 0.1 second is very inefficient... And getting all kind of HTTP errors like 4xx, 5xx doesn't mean the user is offline, e.g. service itself can be down

  • @simonpermeke2303
    @simonpermeke23033 жыл бұрын

    Nice work :) Thank you.

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You're welcome

  • @septianwijaya5172
    @septianwijaya51723 жыл бұрын

    I love it!!! Thanks Bro!

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You're welcome bro

  • @gamingpro741
    @gamingpro74111 ай бұрын

    Thanks man

  • @mounir101
    @mounir1013 жыл бұрын

    Good work bro! I appreciate it.

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Glad to hear that

  • @AshishKumar-wh6dw
    @AshishKumar-wh6dw2 жыл бұрын

    Amazing...!!

  • @michaelogrady6785
    @michaelogrady67853 жыл бұрын

    Excellent.. your projects always look beautiful, are useful and are practical! 🙌

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Glad you like them!

  • @creativepalak3781
    @creativepalak37813 жыл бұрын

    Hey dr sir / mam your all videos is always ossm and useful even all time unique but on request: *Please explain too* so it may be easy to understand more comfortably. THANKS!!

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Okay sure

  • @romuloalves9349
    @romuloalves93493 жыл бұрын

    Ótimo vídeo parabéns sensacional 👏.

  • @shyamprasad128
    @shyamprasad1283 жыл бұрын

    Keepitup!!! If possible can you make a tutorial on realtime video call feature ..... Love and all supports to you

  • @nhathoang3260
    @nhathoang32602 жыл бұрын

    Thank you very much

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You're welcome!

  • @nhathoang3260

    @nhathoang3260

    2 жыл бұрын

    ​@@CodingNepal So sad, i'm using Sqlsever

  • @karimnassir5207
    @karimnassir52073 жыл бұрын

    Wow its very awesome

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Many many thanks

  • @iTzReckLas
    @iTzReckLas3 жыл бұрын

    Thanks Bro : )

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You're welcome 💙

  • @abishekkhanal1493
    @abishekkhanal14933 жыл бұрын

    Wow great 😎

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thanks 🔥

  • @csoitalia
    @csoitalia3 жыл бұрын

    Hi, Why do not a work in firefox automatically? I need refresh page for view result, while in Chrome it is OK!

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    I'll try it on Firefox and respond back to you.

  • @fatkur
    @fatkur3 жыл бұрын

    Awesome :)

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you

  • @muhammedbasheerkk8871
    @muhammedbasheerkk88713 жыл бұрын

    Amazing 👍

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you

  • @harshjain8345
    @harshjain83453 жыл бұрын

    Great!!! ...plzz mention your pc specs??... I'm curious.. I"ll be glad if u revert back... Kindly mention in detail

  • @goodcoder4953
    @goodcoder49533 жыл бұрын

    No Comment Amazing

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you so much

  • @quangtran7954
    @quangtran79542 жыл бұрын

    I have a question that when I lose internet connection I want to hide it, what should I do, I have added an onclick action on the else case to add the hide class but it shows up again (probably because it removed the class again) hide).I don't know how to fix it now

  • @batman68477
    @batman684773 жыл бұрын

    Como se haría un historial o baja el brillo a la computadora

  • @cristianMoraJ
    @cristianMoraJ3 жыл бұрын

    I loved it very good exercise, but we must correct animation bug when going from online to offline, and in firefox it does not work well

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Okay I'll check it

  • @jaim5048
    @jaim50483 жыл бұрын

    Very good

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you so much

  • @omarykijogoo9216
    @omarykijogoo92163 жыл бұрын

    So Amazing Teacher CodingNepal

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Glad to hear that ☺️

  • @omarykijogoo9216

    @omarykijogoo9216

    3 жыл бұрын

    @@CodingNepal worry out

  • @deepanshuchauhan1116
    @deepanshuchauhan11163 жыл бұрын

    Bro apki videos bht aachi hoti hai bas plz gaane ki bajaye thoda bolke samjha diya kro

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    I'll try to do it in my upcoming videos

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb3 жыл бұрын

    Amazing Sir but Sir why didn't you use Font awesome

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Because the icons I want were paid.

  • @CreativeTutorialsWeb

    @CreativeTutorialsWeb

    3 жыл бұрын

    @@CodingNepal Okay Sir Thank You God bless you😍

  • @harshitrathi3077

    @harshitrathi3077

    3 жыл бұрын

    @@CodingNepal Sir Please Reply Me In Instagram

  • @ShubhamPatil-rr4on
    @ShubhamPatil-rr4on3 жыл бұрын

    Brother please make on backend development because we have enough KNOWAGE about frontend and also you will create easy for us... So please make on some playlist on web back end.. Plz plz plz plz plz

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    For now view this playlist - kzread.info/dash/bejne/iKKq3NqAh8yxZZc.html

  • @aestriex
    @aestriex3 жыл бұрын

    CodingNepal please make working search box in navigation bar? Also good video!

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Watch this - kzread.info/dash/bejne/kX182sqDnKy2iqQ.html

  • @aestriex

    @aestriex

    3 жыл бұрын

    @@CodingNepal Thanks! How can I make the search box search the website though?

  • @techwithshudarsan559
    @techwithshudarsan5593 жыл бұрын

    How the uil-wifi-slash icon will load, if the device is offline[If someone is loading the page for the first time]? 17:49

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Icons won't show incase you're offline and reload the page because I've used online link for it.

  • @mpavkovic
    @mpavkovic2 жыл бұрын

    hey what is your PC specifications?

  • 3 жыл бұрын

    Damn, show, it would be nice to test the speed in java script.

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Yes I'll make video on it.

  • 3 жыл бұрын

    @@CodingNepal Okay, fine.

  • @shjsnjbsnjs
    @shjsnjbsnjs3 жыл бұрын

    Can you show how to make an amazing ecommerce website plz?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Sure.. I'll think on it.

  • @dilippokhrel4009
    @dilippokhrel40093 жыл бұрын

    bro aba dami thulo project banauna paryo k, web app(ecommerce) jasto. channel pani rank up hunxa ani

  • @ZiaCodes
    @ZiaCodes3 жыл бұрын

    Can you make it not Automatically Pop Up when an Internet connection is disconnected then show In simple words, Not the first time

  • @divyanshusah2809
    @divyanshusah28093 жыл бұрын

    Jay nepal......

  • @iqbaldarussalam7251
    @iqbaldarussalam72513 жыл бұрын

    what kind of text editor that u used? reply pls :(

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    It's in the description

  • @mubindaghost
    @mubindaghost3 жыл бұрын

    Hey bro how is your pc in daily use video editing programming and gaming?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    I do programming and editing only on my PC and it's work smoothly.

  • @mubindaghost

    @mubindaghost

    3 жыл бұрын

    @@CodingNepal what was your PC specs I forgot

  • @dommosookchu414
    @dommosookchu4143 жыл бұрын

    could you show how to make a dashboard page?

  • @MrAndroidianBro
    @MrAndroidianBro3 жыл бұрын

    Please tell me how to make a school website with a phone database 😁😊

  • @tohachannel5621
    @tohachannel56213 жыл бұрын

    why are u not use the online and offline event listeners?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    As we know, navigator.onLine will return true if the browser is connected to the Internet else it will return false. But you can't assume that a true value necessarily means that the browser can access the Internet. Suppose, you're connected to the WiFi which has no Internet access then navigator.onLine will return true value but you can't view any online pages and I don't want it so I sent ajax request. You can detect network status by using many different methods.

  • @yashraj8584
    @yashraj85843 жыл бұрын

    Nice explanation. I can't find the source code on your website.

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Please go to description link for codes.

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb3 жыл бұрын

    Sir Sorry me again how did you learn JavaScript which course did you take

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    I've learned from KZread videos, blogs, free online sites etc. and I'm still learning.

  • @CreativeTutorialsWeb

    @CreativeTutorialsWeb

    3 жыл бұрын

    @@CodingNepal Wow Thank you Sir my best KZreadr

  • @LYRICALIZE
    @LYRICALIZE3 жыл бұрын

    why my project on atom not save auto kyu ans soon

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You've to install packages/plugins for it.

  • @mouhamaddiop1144
    @mouhamaddiop11443 жыл бұрын

    This video is really killer but why you didn't use window.addEventListener ('online', callback) or window.addEventListener ('offline', callback)?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    As we know, navigator.onLine will return true if the browser is connected to the Internet else it will return false. But you can't assume that a true value necessarily means that the browser can access the Internet. Suppose, you're connected to the WiFi which has no Internet access then navigator.onLine will return true value but you can't view any online pages and I don't want it so I sent ajax request. You can detect network status by using many different methods.

  • @sitebx9635
    @sitebx96353 жыл бұрын

    Hi,Can You Make A VPN Dectector PHP? AND ALSO ANTI VPN?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Okay I'll think about it

  • @biswashrai554
    @biswashrai5543 жыл бұрын

    Bro can u teach us how to link projects with online hosting servers?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Here is the video - kzread.info/dash/bejne/apamzdGKdrrRaLA.html

  • @biswashrai554

    @biswashrai554

    3 жыл бұрын

    @@CodingNepal thanks broo will check it out

  • @joshuamotovlog6359
    @joshuamotovlog63593 жыл бұрын

    I really miss doing code on html, rn my teacher is teaching us about Python... I think it's more fun in html right?

  • @joshuamotovlog6359

    @joshuamotovlog6359

    3 жыл бұрын

    I mean it's more fun in making your own website, xD

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    It depends.. on which language you're familiar with

  • @lifebest4404
    @lifebest44043 жыл бұрын

    Sir how to create full future WhatsApp

  • @ranvirraj1855
    @ranvirraj18553 жыл бұрын

    From where are you learning web programming?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    I've learned from KZread videos, blogs, free online sites etc. and I'm still learning.

  • @ujenbasi9495
    @ujenbasi94953 жыл бұрын

    Can you share your all chrome extension

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    ColorZilla, Adblocker, Grammarly..these are the extension that I most used.

  • @ujenbasi9495

    @ujenbasi9495

    3 жыл бұрын

    @@CodingNepal thank you sir

  • @Ashwathama7714
    @Ashwathama77143 жыл бұрын

    Sir ji when i am offline then also it show online🙄

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Did you change anything on codes..? If no and you have tried it by downloading code files from the description link then please contact me here contact@codingnepalweb.com

  • @androidworld5134
    @androidworld51343 жыл бұрын

    Kindly tell me what is your age. I know it is a strange question but I hope you will tell me🤗😋

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    I'm 18 now but soon will be 19

  • @clutchdiamond8891
    @clutchdiamond88912 жыл бұрын

    Please do a face reveal too

  • @glitchcom946
    @glitchcom9463 жыл бұрын

    code not yet :(

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Available soon. I'll inform you once it uploaded.

  • @prajwalsharma477
    @prajwalsharma4773 жыл бұрын

    kun thau bata ho hajur \

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Surkhet

  • @Mkumarei
    @Mkumarei3 жыл бұрын

    Bro react js courses?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Still haven't

  • @balazs8351
    @balazs83513 жыл бұрын

    Or simply just listen to online and offline events. window.addEventListener('offline', function(e) { console.log('offline'); }); window.addEventListener('online', function(e) { console.log('online'); });

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    No it's not proper way to detect Internet connection status because if you're connected to the WiFi which has no Internet access then your status will be online which I don't want. And nowadays you can only change the status from network tab of browser's developer tool. If you manually turn off or on WiFi then navigator.onLine and online/offline events not work or don't show updated status. So I used ajax for it.

  • @_danishlaeeq

    @_danishlaeeq

    3 жыл бұрын

    @@CodingNepal nice one

  • @_danishlaeeq

    @_danishlaeeq

    3 жыл бұрын

    @@CodingNepal still waiting for advance dropdown hide on background click :(

  • @balazs8351

    @balazs8351

    3 жыл бұрын

    @@CodingNepal For me it perfectly works if I disconnect and reconnect to wifi (I'm not talking about the devtools option which also works). My big concern about your solution is that you have to perform a request in order to tell whether you have connection or not. Lets say the user just browse the actual page without clicking on a link. It would be nice to show the notification in that case.

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    The intension to make this video is only about how to detect Internet connection status. Now it's depends on users how they use it on their projects.

  • @kiranclasses
    @kiranclasses3 жыл бұрын

    Sir do u know hindi language

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Yes I know

  • @aadityasharma530
    @aadityasharma5303 жыл бұрын

    PLZZ upload source code on your site

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Source link is in the description

  • @eliseucoffee3318
    @eliseucoffee33183 жыл бұрын

    dont work for me

  • @eliseucoffee3318

    @eliseucoffee3318

    3 жыл бұрын

    and dont show errors

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Can you explain it more?

  • @sitebx9635
    @sitebx96353 жыл бұрын

    Hi,Can You Make A VPN CAPTURE DETECTOR

  • @aakashsingh7391
    @aakashsingh73913 жыл бұрын

    Y dont u explain with ur words

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    I'll try to do it in my upcoming videos.

  • @rezvanibeastx3452
    @rezvanibeastx34523 жыл бұрын

    Awesome!

  • @harshjain8345
    @harshjain83453 жыл бұрын

    Great!!! ...plzz mention your pc specs??... I'm curious.. I"ll be glad if u revert back... Kindly mention in detail

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    CPU - Ryzen 3 3300 Motherboard - MSI B450M Pro GPU - Nvidia GTX 1650 4gb Ram - Tforce RGB 8 * 2 = 16GB

  • @harshjain8345

    @harshjain8345

    3 жыл бұрын

    @@CodingNepal thanks for replying!!!

  • @codingindia
    @codingindia3 жыл бұрын

    code not yet :(

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Video is recently uploaded. So please wait for codes.

  • @codingindia

    @codingindia

    3 жыл бұрын

    @@CodingNepal :D ok