<header>
  <h2 class="title">Navigator.userAgent</h2>
  <p class="description">Повертає рядок, що характеризує агента користувача браузера для виявлення</p>
</header>
<main>
  <div class="result">
    <button id="detectBrowser">Визначити браузер і ОС</button>
    <p id="browserInfo"></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  cursor: pointer;
  padding: 10px 15px;
  margin-bottom: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #45a049;
}

p {
  margin-top: 20px;
}

document.getElementById('detectBrowser').addEventListener('click', function() {
  const userAgentString = navigator.userAgent;
  let browserName = "Невідомий браузер";
  let osName = "Невідома ОС";

  if (userAgentString.includes("Chrome")) {
    browserName = "Google Chrome";
  } else if (userAgentString.includes("Firefox")) {
    browserName = "Mozilla Firefox";
  } else if (userAgentString.includes("MSIE") || userAgentString.includes("Trident")) {
    browserName = "Internet Explorer";
  }

  if (userAgentString.includes("Windows")) {
    osName = "Windows";
  } else if (userAgentString.includes("Macintosh")) {
    osName = "macOS";
  } else if (userAgentString.includes("Linux")) {
    osName = "Linux";
  }

  document.getElementById('browserInfo').textContent = `Браузер: ${browserName}, ОС: ${osName}.`;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.