Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to detect user browsers and OS. To build this project we need HTML, CSS and vanilla javascript. This project is quite simple and hence I would suggest beginners try it.
If you are looking for more advanced or complex projects, you should check out this playlist here. It consists of 70+ javascript tutorials whose difficulty varies from easy to complex. Thus these projects are suitable for every level of learner trying to improve his/her javascript skills.
Video Tutorial:
If you prefer to learn by coding along with a video tutorial rather than reading this blog post, you should check out this video tutorial here down below. I post similar tutorials related to web development on my youtube channel regularly. So be sure to subscribe, so you don’t miss any of these tutorials.
Project Folder Structure:
Before we move to the coding, let us first take a look at the project folder structure. We create a project folder called – ‘Detect User Browser And OS’. Inside this folder, we have three files. These files are – index.html, style.css and script.js.
HTML:
We start with the HTML code. First, copy the code below and paste it into your HTML document. The HTML code consists of a div with id – ‘container’. Inside the container, we have two span elements. We use one of these elements to display the browser name and the other one to display the OS name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Detect User Browser and OS</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
Browser Details: <span id="browser-details"></span><br />
OS: <span id="os-details"></span>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Let us add some style to elements. For this we use CSS. Copy the code provided to you below and paste it into your stylesheet. We center the container div using transforms and setting the top and left positions. We also add some box shadows to the container to make it stand out.
Finally, we add styles to the font using properties like ‘font-size’, ‘color’, ‘font-weight’ and ‘line-height’.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #328cf3;
}
#container {
position: absolute;
background-color: #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 90vw;
max-width: 600px;
padding: 40px 20px;
border-radius: 5px;
font-family: "Poppins", sans-serif;
font-size: 5vmin;
color: #051a32;
font-weight: 600;
line-height: 1.8em;
text-align: center;
box-shadow: 0 20px 50px rgba(5, 26, 50, 0.18);
}
#container span {
font-weight: 400;
color: #4b5969;
}
Javascript:
Lastly, we implement the functionality of this project using Javascript. Now copy the code below and paste it into your script file. I have explained each step with comments.
//References
let browserDetailsRef = document.getElementById("browser-details");
let osDetailsRef = document.getElementById("os-details");
var browserList = [
{ name: "Firefox", value: "Firefox" },
{ name: "Opera", value: "OPR" },
{ name: "Edge", value: "Edg" },
{ name: "Chrome", value: "Chrome" },
{ name: "Safari", value: "Safari" },
];
var os = [
{ name: "Android", value: "Android" },
{ name: "iPhone", value: "iPhone" },
{ name: "iPad", value: "Mac" },
{ name: "Macintosh", value: "Mac" },
{ name: "Linux", value: "Linux" },
{ name: "Windows", value: "Win" },
];
let broswerChecker = () => {
//Useragent contains browser details and OS details but we need to separate them
let userDetails = navigator.userAgent;
for (let i in browserList) {
//check if the string contains any value from the array
if (userDetails.includes(browserList[i].value)) {
//extract browser name and version from the string
browserDetailsRef.innerHTML = browserList[i].name || "Unknown Browser";
break;
}
}
for (let i in os) {
//check if string contains any value from the object
if (userDetails.includes(os[i].value)) {
//displau name of OS from the object
osDetailsRef.innerHTML = os[i].name;
break;
}
}
};
window.onload = broswerChecker();
That’s it for this tutorial. If you have any issues while creating this code you can download the source code by clicking on the download button below. Also, if you have any queries, suggestions, or feedback you can comment below.
Happy Coding!
