Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 11, 2022 07:14 pm GMT

How to Detect Browser in JavaScript

Image description

Hey friends, Welcome to CodeWithNepal today in this blog youll learn How to build Browser Detector in JavaScript. To detect user browser, Ill use only HTML CSS & JavaScript. In the earlier blog, I shared Word Guessing Game and now its time to create a simple program that detects browsers in JavaScript.

In this small project ( Detect Browser ), as you can see withinside the preview image of the project, theres a Browser textual content with special browser trademarks Google Chrome, Mozilla Firefox, Microsoft Edge, etc.

Now you can see that all logos of your respective browsers have their full opacity, but when you open the current HTML page on any of the given browsers, all logos will slightly fade out except one browser logo youre currently using.

To detect the browser, I have used a JavaScript navigator object. This navigator object contains information about the browser which is used to detect the following browsers. This JavaScript object is used for browser detection as well as to get different information related to the browser. Likewise, to detect the browser follow the given instruction.

You might like this:

Detect Browser in JavaScript

At first, I gave opacity 0.3 to all browser logos and in JavaScript, using navigator.UserAgent object I got the information about the browser and then using if/else if statements I matched the particular string (browser name) in the browser information that I got recently using the navigator.userAgent.

If the given string is matched then I passed the browser name in the browser variable. Now I got which browser is being used by the user. After I got it, simply I selected this browser class name which is an IMG tag and gave opacity 1.

Step 1

Initially you need to create two files HTML (.html) and CSS (.css) . After creating these files, just paste the following codes into your VS IDE code sample create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html><!-- Coding By CodeWithNepal --><html lang="en" dir="ltr">  <head>    <meta charset="utf-8">    <title>Detect Browser in JavaScript | CodeWithNepal</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>

Step 2

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

/* Import Google font - Poppins */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;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%, #b75afe 50%);}::selection{  color: #fff;  background: #b75afe;}.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: #b75afe;  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;}

Thats all, now youve successfully built Detect Browser in JavaScript If your code doesnt work or youve faced any problems, please free to comment down I will provide the source code files.


Original Link: https://dev.to/ombhusal/how-to-detect-browser-in-javascript-5fe

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To