Detect User Browser javascript | Check User Browser Using Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create Detect User Browser javascript. We use HTML, Css, and javascript for this Detect User Browser javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Detect User Browser javascript.

Table of Contents

HTML Code

 <!DOCTYPE html>  
 <html lang="en" dir="ltr">  
  <head>  
   <meta charset="utf-8">  
   <title>Detect Browser in JavaScript</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="https://media.discordapp.net/attachments/813429025262927872/863169706633199668/chrome.png" alt="chrome" title="Google Chrome">  
     <img class="firefox" src="https://media.discordapp.net/attachments/813429025262927872/863169867204264016/firefox.png" alt="firefox" title="Mozilla Firefox">  
     <img class="edge" src="https://media.discordapp.net/attachments/813429025262927872/863170032580952064/edge.png" alt="edge" title="Microsoft Edge">  
     <img class="opera" src="https://media.discordapp.net/attachments/813429025262927872/863170144150880276/opera.png" alt="opera" title="Opera">  
     <img class="safari" src="https://media.discordapp.net/attachments/813429025262927872/863170250019045407/safari.png" alt="safari" title="Apple Safari">  
    </div>  
   </div>  
  </body>  
 </html>

There is all the HTML code for the Detect User Browser javascript. Now, you can see an output with Detect User Browser javascript then we write javascript for Detect User Browser javascript.

output
CSS code

 /* 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%, #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;  
 }

Css Updated output

Javascript code

    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";  
    }

Final output

Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like the Detect User Browser javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Detect User Browser Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.