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
Thanks for your great tutorial! 👍
Much love from Jamaica. I wasn't looking for this in particular but this will be helpful in my application
@CodingNepal
3 жыл бұрын
Glad to hear that
@hackerprime9722
Жыл бұрын
@@CodingNepal I'm still working on the same application and I'm going to use it in a different section now.
Ur the best ill add this to my website
As always this is another useful thing thanks
@CodingNepal
3 жыл бұрын
Thank you so much :)
Thanks bro more love🥰
Beautiful and so many things to learn thank you
@CodingNepal
3 жыл бұрын
You are so welcome!
This is really a nice one, Thanks for this tutorial
@CodingNepal
3 жыл бұрын
You're welcome 😊
Wow !!!! Nice One
I was looking for this thanks
@CodingNepal
3 жыл бұрын
You're most welcome
Awesome!
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
Nice work :) Thank you.
@CodingNepal
3 жыл бұрын
You're welcome
I love it!!! Thanks Bro!
@CodingNepal
3 жыл бұрын
You're welcome bro
Thanks man
Good work bro! I appreciate it.
@CodingNepal
3 жыл бұрын
Glad to hear that
Amazing...!!
Excellent.. your projects always look beautiful, are useful and are practical! 🙌
@CodingNepal
3 жыл бұрын
Glad you like them!
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
3 жыл бұрын
Okay sure
Ótimo vídeo parabéns sensacional 👏.
Keepitup!!! If possible can you make a tutorial on realtime video call feature ..... Love and all supports to you
Thank you very much
@CodingNepal
2 жыл бұрын
You're welcome!
@nhathoang3260
2 жыл бұрын
@@CodingNepal So sad, i'm using Sqlsever
Wow its very awesome
@CodingNepal
3 жыл бұрын
Many many thanks
Thanks Bro : )
@CodingNepal
3 жыл бұрын
You're welcome 💙
Wow great 😎
@CodingNepal
3 жыл бұрын
Thanks 🔥
Hi, Why do not a work in firefox automatically? I need refresh page for view result, while in Chrome it is OK!
@CodingNepal
3 жыл бұрын
I'll try it on Firefox and respond back to you.
Awesome :)
@CodingNepal
3 жыл бұрын
Thank you
Amazing 👍
@CodingNepal
3 жыл бұрын
Thank you
Great!!! ...plzz mention your pc specs??... I'm curious.. I"ll be glad if u revert back... Kindly mention in detail
No Comment Amazing
@CodingNepal
3 жыл бұрын
Thank you so much
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
Como se haría un historial o baja el brillo a la computadora
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
3 жыл бұрын
Okay I'll check it
Very good
@CodingNepal
3 жыл бұрын
Thank you so much
So Amazing Teacher CodingNepal
@CodingNepal
3 жыл бұрын
Glad to hear that ☺️
@omarykijogoo9216
3 жыл бұрын
@@CodingNepal worry out
Bro apki videos bht aachi hoti hai bas plz gaane ki bajaye thoda bolke samjha diya kro
@CodingNepal
3 жыл бұрын
I'll try to do it in my upcoming videos
Amazing Sir but Sir why didn't you use Font awesome
@CodingNepal
3 жыл бұрын
Because the icons I want were paid.
@CreativeTutorialsWeb
3 жыл бұрын
@@CodingNepal Okay Sir Thank You God bless you😍
@harshitrathi3077
3 жыл бұрын
@@CodingNepal Sir Please Reply Me In Instagram
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
3 жыл бұрын
For now view this playlist - kzread.info/dash/bejne/iKKq3NqAh8yxZZc.html
CodingNepal please make working search box in navigation bar? Also good video!
@CodingNepal
3 жыл бұрын
Watch this - kzread.info/dash/bejne/kX182sqDnKy2iqQ.html
@aestriex
3 жыл бұрын
@@CodingNepal Thanks! How can I make the search box search the website though?
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
3 жыл бұрын
Icons won't show incase you're offline and reload the page because I've used online link for it.
hey what is your PC specifications?
Damn, show, it would be nice to test the speed in java script.
@CodingNepal
3 жыл бұрын
Yes I'll make video on it.
3 жыл бұрын
@@CodingNepal Okay, fine.
Can you show how to make an amazing ecommerce website plz?
@CodingNepal
3 жыл бұрын
Sure.. I'll think on it.
bro aba dami thulo project banauna paryo k, web app(ecommerce) jasto. channel pani rank up hunxa ani
Can you make it not Automatically Pop Up when an Internet connection is disconnected then show In simple words, Not the first time
Jay nepal......
what kind of text editor that u used? reply pls :(
@CodingNepal
3 жыл бұрын
It's in the description
Hey bro how is your pc in daily use video editing programming and gaming?
@CodingNepal
3 жыл бұрын
I do programming and editing only on my PC and it's work smoothly.
@mubindaghost
3 жыл бұрын
@@CodingNepal what was your PC specs I forgot
could you show how to make a dashboard page?
Please tell me how to make a school website with a phone database 😁😊
why are u not use the online and offline event listeners?
@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.
Nice explanation. I can't find the source code on your website.
@CodingNepal
3 жыл бұрын
Please go to description link for codes.
Sir Sorry me again how did you learn JavaScript which course did you take
@CodingNepal
3 жыл бұрын
I've learned from KZread videos, blogs, free online sites etc. and I'm still learning.
@CreativeTutorialsWeb
3 жыл бұрын
@@CodingNepal Wow Thank you Sir my best KZreadr
why my project on atom not save auto kyu ans soon
@CodingNepal
3 жыл бұрын
You've to install packages/plugins for it.
This video is really killer but why you didn't use window.addEventListener ('online', callback) or window.addEventListener ('offline', callback)?
@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.
Hi,Can You Make A VPN Dectector PHP? AND ALSO ANTI VPN?
@CodingNepal
3 жыл бұрын
Okay I'll think about it
Bro can u teach us how to link projects with online hosting servers?
@CodingNepal
3 жыл бұрын
Here is the video - kzread.info/dash/bejne/apamzdGKdrrRaLA.html
@biswashrai554
3 жыл бұрын
@@CodingNepal thanks broo will check it out
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
3 жыл бұрын
I mean it's more fun in making your own website, xD
@CodingNepal
3 жыл бұрын
It depends.. on which language you're familiar with
Sir how to create full future WhatsApp
From where are you learning web programming?
@CodingNepal
3 жыл бұрын
I've learned from KZread videos, blogs, free online sites etc. and I'm still learning.
Can you share your all chrome extension
@CodingNepal
3 жыл бұрын
ColorZilla, Adblocker, Grammarly..these are the extension that I most used.
@ujenbasi9495
3 жыл бұрын
@@CodingNepal thank you sir
Sir ji when i am offline then also it show online🙄
@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
Kindly tell me what is your age. I know it is a strange question but I hope you will tell me🤗😋
@CodingNepal
3 жыл бұрын
I'm 18 now but soon will be 19
Please do a face reveal too
code not yet :(
@CodingNepal
3 жыл бұрын
Available soon. I'll inform you once it uploaded.
kun thau bata ho hajur \
@CodingNepal
3 жыл бұрын
Surkhet
Bro react js courses?
@CodingNepal
3 жыл бұрын
Still haven't
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
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
3 жыл бұрын
@@CodingNepal nice one
@_danishlaeeq
3 жыл бұрын
@@CodingNepal still waiting for advance dropdown hide on background click :(
@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
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.
Sir do u know hindi language
@CodingNepal
3 жыл бұрын
Yes I know
PLZZ upload source code on your site
@CodingNepal
3 жыл бұрын
Source link is in the description
dont work for me
@eliseucoffee3318
3 жыл бұрын
and dont show errors
@CodingNepal
3 жыл бұрын
Can you explain it more?
Hi,Can You Make A VPN CAPTURE DETECTOR
Y dont u explain with ur words
@CodingNepal
3 жыл бұрын
I'll try to do it in my upcoming videos.
Awesome!
Great!!! ...plzz mention your pc specs??... I'm curious.. I"ll be glad if u revert back... Kindly mention in detail
@CodingNepal
3 жыл бұрын
CPU - Ryzen 3 3300 Motherboard - MSI B450M Pro GPU - Nvidia GTX 1650 4gb Ram - Tforce RGB 8 * 2 = 16GB
@harshjain8345
3 жыл бұрын
@@CodingNepal thanks for replying!!!
code not yet :(
@CodingNepal
3 жыл бұрын
Video is recently uploaded. So please wait for codes.
@codingindia
3 жыл бұрын
@@CodingNepal :D ok