How to Detect Browser in JavaScript

CSSHow To !HTMLJavaScript

Hey Everyone, today in this tutorial you’ll learn How to Detect Browser in JavaScript. To detect user browser, I’ll use only HTML CSS & JavaScript. In the previous tutorial, I have shared How to create a Facebook Post Box in HTML CSS & JavaScript and now it’s time to create a simple program that detect browser in JavaScript. This is very simple program for JavaScript beginner  i.e Browser Detector using JavaScript.

You can also access : Our Free Browser Detector Tool

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

Browser Detector using javascript

Now you can see that all logos have their full opacity on beginning, 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. That means then show the current browser that you are currently using. If you are feeling difficulties with what I’m saying, you can add comment below or contact us directly.

You might like this:

How to Detect Browser in JavaScript with Source Codes

To create Detect Browser in JavaScript. Firstly, you have need to create two Files: one is HTML & second is  CSS. After creating these files copy paste the below HTML & CSS codes into your file. You can also download the source code files of this Detect Browser program from the given download button on button of this tutorial.

HTML

Firstly, you have to create an HTML file with the name of index.html and copy paste the given html codes into your HTML file.

Remember, you’ve to create a file html file with .html extension, and the images that are used on this program won’t appear to you. You’ve to download images/ files from the given download button to use images also.


<!DOCTYPE html>
<!-- Coding By Codegyan - codegyan.in -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Detect Browser in JavaScript | Codegyan</title>
    <link rel="stylesheet" href="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>

CSS

Secondly, you have to create a CSS file with the name of style.css and copy – paste the given css codes in your CSS file. Remember, you’ve to create a css 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;
}

Also Read : How to Create Text To Speech Converter in HTML & JavaScript

If you wann to check the demo of this code, then you can check using below demo button.

Click on the following download button to download all source code files of  Browser Detector using JavaScript directly  on your computer.

Final Word

In this way, we can create browser detector using HTML & JavaScript.  I hope you all like this tutorial. Keep with us for next tutorial. if you wann the source code of this code you can get this on our github account. If you have any query please free to contact us Or comment below.

     
Updated on 13-Jan-2022 8:36:22

3 Views

Previous Page Next Page  
Advertisements

ads