DETECT USER BROWSER

Javascript

DETECT USER BROWSER

HiroDaegu 2022. 5. 24. 01:19

728x90

SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=`, initial-scale=1.0">
  <title>DETECT USER BROWSER</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <div class="wrapper">
    <h2>Browser</h2>
    <div class="logos">
      <img class="chrome" src="https://media.discordapp.net/attachments/813429025262927872/863169706633199668/chrome.png" alt="chrome" title="Google Chrome">  
      <img class="firefox" src="https://media.discordapp.net/attachments/813429025262927872/863169867204264016/firefox.png" alt="firefox" title="Mozilla Firefox">  
      <img class="edge" src="https://media.discordapp.net/attachments/813429025262927872/863170032580952064/edge.png" alt="edge" title="Microsoft Edge">  
      <img class="opera" src="https://media.discordapp.net/attachments/813429025262927872/863170144150880276/opera.png" alt="opera" title="Opera">  
      <img class="safari" src="https://media.discordapp.net/attachments/813429025262927872/863170250019045407/safari.png" alt="safari" title="Apple Safari">     </div>
  </div>
</body>
</html>

 /* Import Google font - Poppins */  
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');  
 *{  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  font-family: "Poppins", sans-serif;  
 }  
 body{  
  height: 100vh;  
  width: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background: linear-gradient(#252930 50%, #675AFE 50%);  
 }  
 ::selection{  
  color: #fff;  
  background: #675AFE;  
 }  
 .wrapper{  
  display: flex;  
  flex-wrap: wrap;  
  background: #fff;  
  padding: 30px 40px;  
  align-items: center;  
  border-radius: 10px;  
  justify-content: center;  
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);  
 }  
 .wrapper h2{  
  color: #675AFE;  
  font-size: 46px;  
 }  
 .wrapper .logos{  
  margin-left: 15px;  
 }  
 .logos img{  
  opacity: 0.3;  
  margin: 0 7px;  
  transition: opacity 0.4s ease;  
 }  
 .logos img:last-child{  
  margin-right: 0px;  
 }

let userAgent = navigator.userAgent;  
let browser;  
if(userAgent.match(/edg/i)){  
 browser = "edge";  
}else if(userAgent.match(/firefox|fxios/i)){  
 browser = "firefox";  
}else if(userAgent.match(/opr\//i)){  
 browser = "opera";  
}else if(userAgent.match(/chrome|chromium|crios/i)){  
 browser = "chrome";  
}else if(userAgent.match(/safari/i)){  
 browser = "safari";  
}else{  
 alert("Other browser");  
}  
const logo = document.querySelector(`.logos .${browser}`);  
if(logo != ""){  
 logo.style.opacity = "1";  
}

728x90

LIST