- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Environmental Science
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- articles and Answers
- Effective Resume Writing
- HR Interview articles
- Computer Glossary
- Who is Who
How to Detect Browser in JavaScript
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.
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 can also access : Our Free Browser Detector ToolIn 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.
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:
- Facebook Post Box in HTML CSS & JavaScript
- Detect AdBlocker in JavaScript
- Build A Currency Converter App in JavaScript
- Slicing Design Newsletter Subcribe Modal
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: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;
}Also Read : How to Create Text To Speech Converter in HTML & JavaScriptIf 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.
Advertisements
ads
