Fluratech

Detect browser using JavaScript - with source code

Author- MACE NOTES Official

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". 

I have added an awesome-looking stylish UI with a linear gradient style.

Browser DETECTOR using Javascript

You might like:

  1. Internet status viewer using Javascript
  2. Word counter using javascript
  3. Mobile friendly navigation bar using HTML, CSS and JS
  4. Rich text editor using HTML CSS and javascript 

folder and files

You want to create one file index.html in a folder named whatever you like.


<!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>
Adverticement

Discussions

Post a Comment