I have a website which and want to provide a download button for my customers which automatically detects which operating system and which version the user has in order to let him download the correct software.I want not only OS name i want to detect if windows version 10 or under 10 is
So instead of having many buttons labeled as Windows 10 ,windows 9 ,windows 8, there should be only one button which figures out what to download link has to be provided.
I start to write code i can detect the version but i cant detect the version number and change the button src depending on version please help.
let userAgent = navigator.appVersion;
let osDetails = {
name: 'Unknown OS',
icon: 'fa-question-circle'
};
if (userAgent.includes('Macintosh')) {
osDetails.name = 'Mac';
osDetails.icon = 'fa-apple';
}
if (userAgent.includes('Windows')) {
osDetails.name = 'Windows';
osDetails.icon = 'fa-windows';
}
if (userAgent.includes('Linux')) {
osDetails.name = 'Linux';
osDetails.icon = 'fa-linux';
}
if (userAgent.includes('iPhone')) {
osDetails.name = 'iPhone';
osDetails.icon = 'fa-apple';
}
if (userAgent.includes('Android')) {
osDetails.name = 'Android';
osDetails.icon = 'fa-android';
}
updateOsDownloadButton(osDetails);
function updateOsDownloadButton(osDetails) {
let iconHtml = '<i class="icon fab ' + osDetails.icon + '"></i>'
document.querySelector('.btn-download-os').innerHTML = 'Download for ' + osDetails.name + iconHtml
} body {
background: black;
font-family: 'Open Sans', sans-serif;
}
.container {
font-weight: 700;
color: white;
font-size: 28px;
padding: 24px;
display: flex;
flex-direction: column;
align-items:center;
}
.btn-download-os {
margin-top: 24px;
background: linear-gradient(to right, #00B4DB, #0083B0);
padding: 18px;
border: none;
border-radius: 8px;
font-size: 24px;
color: white;
display: block;
line-height: 24px;
opacity:0.90;
}
.icon {
padding-left: 10px;
}
.btn-download-os:hover {
transform: scale(1.05);
transition: all .5s;
opacity: 1;
}<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<div class="container">
<div>OS Specific Download Buttons</div>
<button class="btn-download-os">
Detecting Operating System <i class="icon fas fa-question-circle"></i>
</button>
</div>
<script src="./try2.js" crossorigin="anonymous"></script>