비전공자 개발일기

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

'Javascript' 카테고리의 다른 글

Create Date Time Day  (0) 2022.05.31
Download Button Animation  (0) 2022.05.25
DOWNLOAD BUTTON COUNTDOWN TIMER  (0) 2022.05.22
Height Converter  (0) 2022.05.17
Light AND Dark Mode Toggle  (0) 2022.05.16
'Javascript' Related Articles more