Hello guys, welcome back to the source code tutorial series of fluratech.com. Today I am going to share with you the source code of an awesome-looking browser detector using javascript.
This code will help you to get a browser name even if it is Chrome, Firefox, Safari, Opera and Edge with font-awesome icons. Else it will show “We can’t able to find the name of your browser”.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>speaker</title> <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css"> <style> * { margin: 0; padding: 0; } body { background-image: linear-gradient(45deg, rgb(229, 255, 0), rgb(255, 81, 0)); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } h1 { color: rgb(255, 255, 255); text-shadow: 6px 5px 4px black; } </style> </head> <body onload="browserDetect()"> <h1>hello</h1><br> <script> function browserDetect() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "chrome <i class='fa fa-chrome'></i> "; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "firefox <i class='fa fa-firefox'></i>"; } else if (userAgent.match(/safari/i)) { browserName = "safari <i class='fa fa-safari'></i>"; } else if (userAgent.match(/opr//i)) { browserName = "opera <i class='fa fa-opera'></i>"; } else if (userAgent.match(/edg/i)) { browserName = "edge <i class='fa fa-edge'></i>"; } else { browserName = "No browser detection"; } document.querySelector("h1").innerHTML = "You are using " + browserName + " browser"; } </script> </body> </html>