Hello friends, today in this blog, you will learn how to create a browser detector using Javascript. In our previous blog, we saw how to create a to-do list app using HTML, CSS, and Javascript. I have already posted a blog on how to detect user location using Javascript. Now it's time to create a browser detector. Earlier I shared many projects related to HTML, CSS, and Javascript. You can check here. Now it's time to create a to-do list app. If you are interested then you can check my other javascript projects after reading this blog. My Javascript blogs.
In this small project [How to detect user browser] there is a text and some logos of browsers such as Google Chrome, Mozilla Firefox, Opera, Microsoft Edge, etc as you can see in the image above. As you can see all logos are faded out except one browser logo you’re currently using. If you are unable to understand what am I trying to say, you can check the source code and preview it as well.
You may like these:
- Responsive Animated Card Design
- Responsive Personal Portfolio design
- Filterable Image Gallery with preview
- Random Password Generator
You can check preview here.
HTML and Javascript Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="title">You're currently using <span class="browserName">chrome</span> Browser</div>
<div class="logos">
<div class="browserLogo ieLogo"></div>
<div class="browserLogo edgeLogo"></div>
<div class="browserLogo firefoxLogo"></div>
<div class="browserLogo operaLogo"></div>
<div class="browserLogo chromeLogo"></div>
<div class="browserLogo safariLogo"></div>
</div>
</div>
<script>
function detectBrowser() {
let UA = navigator.userAgent
let browser;
if (!!document.documentMode == true) {
browser = "IE";
} else if (UA.match(/edg/i)) {
browser = "edge";
} else if (UA.match(/firefox|fxios/i)) {
browser = "firefox";
} else if (UA.match(/opr\//i)) {
browser = "opera";
} else if (UA.match(/chrome|chromium|crios/i)) {
browser = "chrome";
} else if (UA.match(/safari/i)) {
browser = "safari";
} else {
alert("You are using another browser");
}
return browser
}
function setBrowser(browser) {
let logo = document.querySelector(`.${browser}Logo`)
let browserName = document.querySelector(`.browserName`)
logo.classList.add('current')
browserName.innerHTML = browser
browserName.classList.add(browser)
}
setBrowser(detectBrowser().toLowerCase())
console.log(detectBrowser())
</script>
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script></body>
</html>
CSS Code
/* --------------------- Created By InCoder --------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
height: 100vh;
background-color: rgb(0 0 0 / 80%);
}
.container .title {
color: #fff;
font-weight: 500;
text-align: center;
padding-top: 1.8rem;
font-size: clamp(2rem, 4vw, 3rem);
}
.browserName {
text-transform: capitalize;
}
.browserLogo {
height: 7rem;
transition: all 0.3s;
filter: grayscale(0.9);
width: clamp(7rem, 4vw, 5rem);
}
.chrome {
font-weight: 800;
color: #fbc011;
}
.opera {
font-weight: 800;
color: #ff1429;
}
.ie {
font-weight: 800;
color: #37a5e2;
}
.edge {
font-weight: 800;
color: #38cb54;
}
.firefox {
font-weight: 800;
color: #b93ce7;
}
.safari {
font-weight: 800;
color: #0184ca;
}
.logos {
height: 65%;
display: flex;
align-items: center;
justify-content: space-around;
}
.chromeLogo {
background: url(https://drive.google.com/uc?id=199wEkk6kQbv_OzgTLSAdAZ5c86gLNnCP&export=view) no-repeat center 100%;
background-size: cover;
}
.operaLogo {
background: url(https://drive.google.com/uc?id=1OGVcfiKtfCWztQm8yMUT2GCz_BpwftWD&export=view) no-repeat center 100%;
background-size: cover;
}
.ieLogo {
background: url(https://drive.google.com/uc?id=1yg5gjO7yaXLQuAA8rrJ84JCApzyi0BZB&export=view) no-repeat center 100%;
background-size: cover;
}
.edgeLogo {
background: url(https://drive.google.com/uc?id=13Y8-krv89SAu3SL8qlSjddMnOODiCUix&export=view) no-repeat center 100%;
background-size: cover;
}
.firefoxLogo {
background: url(https://drive.google.com/uc?id=1dH-uY09eDhZZriVArof2bpr7Nux4tKjT&export=view) no-repeat center 100%;
background-size: cover;
}
.safariLogo {
background: url(https://drive.google.com/uc?id=1-wMfuXglcL27eXEihH2ODqPQb0fWjpfi&export=view) no-repeat center 100%;
background-size: cover;
}
:is(.operaLogo, .chromeLogo, .ieLogo, .edgeLogo, .firefoxLogo, .safariLogo) {
transform: scale(.9);
}
:is(.operaLogo, .chromeLogo, .ieLogo, .edgeLogo, .firefoxLogo, .safariLogo).current {
filter: grayscale(0);
transform: scale(1.2);
}
@media (max-width: 710px) {
.browserLogo {
width: 4rem;
height: 4rem;
}
}
@media (max-width: 500px) {
.browserLogo {
width: 3rem;
height: 3rem;
}
.logos {
flex-wrap: wrap;
}
.logos div {
margin-left: .3rem;
}
}
@media (min-width: 1440px) {
.logos {
max-width: 70%;
justify-content: center;
}
}
Top comments (0)