Hey friends and welcome to another project blogpost. Today we are going to see how to detect the OS of an user by using HTML, CSS & JavaScript.
First, let's see the general usage of this project. The main page has a box which shows that the user can view the OS they are using by clicking the button provided. When clicked, it displays the OS used in a bold purple color.
My video tutorial and demo is below:
Now let's see the source codes.
Paste the codes below in your HTML file:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE HTML>
<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>Detect Operating System of User | CodingPorium</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
display:flex;
justify-content:center;
align-items:center;
font-family:poppins;
height:100vh;
background-color:royalblue;
}
.container{
padding : 30px;
background-color:white;
margin:10px;
width:550px;
border-radius:5px;
}
h1{
color:royalblue;
}
button{
padding:10px;
border-radius:5px;
border:none;
background-color: black;
color:white;
font-family:poppins;
outline:none;
}
#displayosname{
color: purple;
font-size: 24px;
font-weight: bold;
}
</style>
<body>
<div class="container">
<h1>Detect OS using JavaScript</h1>
<p>Please click the button below to start</p>
<button onclick="osname()">Find Out!</button>
<p id="displayosname"></p>
</div>
<script>
HTMLDocument.prototype.e = document.getElementById;
var displayosname = document.e("displayosname");
var Name = "Not known";
if (navigator.appVersion.indexOf("Win") != -1) Name =
"Windows OS";
if (navigator.appVersion.indexOf("Mac") != -1) Name =
"MacOS";
if (navigator.appVersion.indexOf("X11") != -1) Name =
"UNIX OS";
if (navigator.appVersion.indexOf("Linux") != -1) Name =
"Linux OS";
function osname() {
displayosname.innerHTML = Name;
}
</script>
</body>
</html>
And that's all for this project. Thanks for reading and do subscribe to our YouTube channel to support us.
Till the next one, goodbye!
Post a Comment