Detect User Browser javascript | Check User Browser Using Javascript
Detect User Browser javascript | Check User Browser Using Javascript
<!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.
/* 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
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
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.