DEV Community: Om Bhusal

How to Detect Browser in JavaScript

Om Bhusal — Thu, 11 Aug 2022 19:14:46 +0000

Hey friends, Welcome to CodeWithNepal today in this blog you’ll learn How to build Browser Detector in JavaScript. To detect user browser, I’ll use only HTML CSS & JavaScript. In the earlier blog, I shared Word Guessing Game and now it’s time to create a simple program that detects browsers in JavaScript.

In this small project ( Detect Browser ), as you can see withinside the preview image of the project, there’s a ‘Browser’ textual content with special browser trademarks Google Chrome, Mozilla Firefox, Microsoft Edge, etc.

Now you can see that all logos of your respective browsers have their full opacity, but when you open the current HTML page on any of the given browsers, all logos will slightly fade out except one browser logo you’re currently using.

To detect the browser, I have used a JavaScript navigator object. This navigator object contains information about the browser which is used to detect the following browsers. This JavaScript object is used for browser detection as well as to get different information related to the browser. Likewise, to detect the browser follow the given instruction.

You might like this:

Detect Browser in JavaScript

At first, I gave opacity 0.3 to all browser logos and in JavaScript, using navigator.UserAgent object I got the information about the browser and then using if/else if statements I matched the particular string (browser name) in the browser information that I got recently using the navigator.userAgent.

If the given string is matched then I passed the browser name in the browser variable. Now I got which browser is being used by the user. After I got it, simply I selected this browser class name which is an IMG tag and gave opacity 1.

Step 1

Initially you need to create two files HTML (.html) and CSS (.css) . After creating these files, just paste the following codes into your VS IDE code sample create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<!-- Coding By CodeWithNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Detect Browser in JavaScript | CodeWithNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <h2>Browser:</h2>
      <div class="logos">
        <img class="chrome" src="logos/chrome.png" alt="chrome" title="Google Chrome">
        <img class="firefox" src="logos/firefox.png" alt="firefox" title="Mozilla Firefox">
        <img class="edge" src="logos/edge.png" alt="edge" title="Microsoft Edge">
        <img class="opera" src="logos/opera.png" alt="opera" title="Opera">
        <img class="safari" src="logos/safari.png" alt="safari" title="Apple Safari">
      </div>
    </div>

    <script>
      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";
      }
    </script>

  </body>
</html>

Step 2

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

/* 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%, #b75afe 50%);
}
::selection{
  color: #fff;
  background: #b75afe;
}
.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: #b75afe;
  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;
}

That’s all, now you’ve successfully built Detect Browser in JavaScript If your code doesn’t work or you’ve faced any problems, please free to comment down I will provide the source code files.

Factorial Program in Java

Om Bhusal — Mon, 04 Jul 2022 15:07:43 +0000

Hey folks, today in this blog you’ll see Factorial Program in Java. I have created blogs on making a Group Chat APP Using JAVA and in this fantastic blog, you will learn how to create a Factorial Program in Java. So, Factorial Program in Java: Factorial of n is the product of all positive descending integers. Factorial of n is denoted by n!.For example:
6! = 720 7! = 5040

Here, 6! is pronounced as “6 factorial”, it is also called “6 bang” or “6 shrieks”.

The factorial is normally used in Combinations and Permutations (mathematics).

The factorial of a positive number n is given by:
factorial of n (n!) = 1 * 2 * 3 * 4 * ... * n

There are many ways to write the factorial program in java language. Let’s see the 3 ways to write the factorial program in java.

Personal Portfolio Website

Om Bhusal — Thu, 30 Jun 2022 09:18:57 +0000

Hey friends, Today in this blog you’ll learn how to create a website which is a Fully Responsive Personal Portfolio Website using HTML CSS & JavaScript. I already shared many blogs on web design stuff like [Navigation Bar, Cards, Image Slider, Owl Carousel, Buttons, and many more]. Similarly, I’d shown how to create a full business website by using HTML & CSS and now it’s time to create a portfolio website.

**Personal portfolio **sites are consistent and should be maintained throughout your work. It offers potential clients a convenient way to view your work while allowing you to expand your skills/experience and services.