How to Detect Browser in JavaScript

Hey friends, today in this blog you’ll learn How to Detect Browser in JavaScript. To detect user browser, I’ll use only HTML CSS & JavaScript. In the eariler blog, I have shared how to detect AdBlocker and Network Connection Status in JavaScript and now it’s time to create a simple program that detect browser in JavaScript.

In this small project (Detect Browser in JavaScript), as you can see in the preview image, there is a ‘Browser’ text with different browser logos Google Chrome, Mozilla Firefox, Microsoft Edge, etc.

Now you can see that all logos have their full opacity, but when you open this HTML page on any of the given browsers, all logos will fade out except one browser logo you’re currently using. If you are feeling difficulties with what I’m saying, you can watch a demo or full video tutorial of this Detect Browser in JavaScript.

See also  Cross-fading Carousel In Pure CSS

How to Detect Browser in JavaScript [Source Codes]

To create Detect Browser in JavaScript. First, you need to create two Files: HTML & CSS. After creating these files paste the following codes into your file. You can also download the source code files of this Detect Browser program from the given download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension, and the images that are used on this program won’t appear. You’ve to download files from the given download button to use images also.

<!DOCTYPE html>
<!-- Coding By codeithub- youtube.com/codeithub-->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Detect Browser in JavaScript | codeithub</title>
    <link rel="stylesheet" href="https://www.codeithub.com/detect-browser-in-javascript/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <h2>Browser:</h2>
      <div class="logos">
        <img class="chrome" src="logos/chrome.png" alt="chrome" title="Google Chrome">
        <img class="firefox" src="logos/firefox.png" alt="firefox" title="Mozilla Firefox">
        <img class="edge" src="logos/edge.png" alt="edge" title="Microsoft Edge">
        <img class="opera" src="logos/opera.png" alt="opera" title="Opera">
        <img class="safari" src="logos/safari.png" alt="safari" title="Apple Safari">
      </div>
    </div>

    <script>
      let userAgent = navigator.userAgent;
      let browser;
      if(userAgent.match(/edg/i)){
        browser = "edge";
      }else if(userAgent.match(/firefox|fxios/i)){
        browser = "firefox";
      }else if(userAgent.match(/opr//i)){
        browser = "opera";
      }else if(userAgent.match(/chrome|chromium|crios/i)){
        browser = "chrome";
      }else if(userAgent.match(/safari/i)){
        browser = "safari";
      }else{
        alert("Other browser");
      }
      const logo = document.querySelector(`.logos .${browser}`);
      if(logo){
        logo.style.opacity = "1";
      }
    </script>

  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#252930 50%, #675AFE 50%);
}
::selection{
  color: #fff;
  background: #675AFE;
}
.wrapper{
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 30px 40px;
  align-items: center;
  border-radius: 10px;
  justify-content: center;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
}
.wrapper h2{
  color: #675AFE;
  font-size: 46px;
}
.wrapper .logos{
  margin-left: 15px;
}
.logos img{
  opacity: 0.3;
  margin: 0 7px;
  transition: opacity 0.4s ease;
}
.logos img:last-child{
  margin-right: 0px;
}

That’s all, now you’ve successfully created a small program that Detect Browser in JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

See also  Google Loaders Redesign In Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *