Build a Browser or Device Information Finder Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

index.html

 

 

<!--COPYRIGHT MOHD JAMIL
    instagram:https://www.instagram.com/_mohdjamil
    linkedin:https://www.linkedin.com/in/mohd-jamil-35508a1b9
    github:https://www.github.com/mohammedjameel24

-->
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <title>GetLocinfo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link type="image/x-icon" rel="icon" href="https://drive.google.com/uc?id=1GXl9MScYaz5eA8YGIWzQz01B5P0ElJbW">
  <link rel="stylesheet" href="../assets/css/deviceInfo.css">
</head>

<body>

  <main class="container">
    <div id="map" class="map">

    </div>
    <p id="info" class="info">
      <img src="../assets/Images/deviceInfo.png" id="logo" class="info" />
      <button id="check">check</button>

    </p>
    <div class="footer">
      <div class="current"><strong>Country: </strong><span id="country"></span></div>
      <div class="current"><strong>State: </strong><span id="state"></span></div>
      <div class="current"><strong>City: </strong><span id="city"></span></div>
      <div class="current"><strong>longitude: </strong><span id="longitude"></span></div>
      <div class="current"><strong>latitude: </strong><span id="latitude"></span></div>
      <div class="current"><strong>IP: </strong><span id="ip"></span></div>
      <div id="Ptxt">
        <b>Vulnerability Scale</b>
      </div>
      <div id="myProgress">
        <div id="myBar">0%</div>

      </div>
      <div id="device" class="device">
        <div class="device"><b>OS : </b><span id="osName"></span></div>
        <div class="device"><b>OS Version : </b><span id="osVersion"></span></div>
        <div class="device"><b>Browser : </b><span id="browserName"></span></div>
        <div class="device"><b>Browser Version : </b><span id="browserVersion"></span></div>
        <div class="device"><b>User Assets : </b><span id="appVersion"></span></div>
        <div class="device"><b>User Platform : </b><span id="appPlatform"></span></div>
        <div class="device"><b>User Vendor : </b><span id="appVendor"></span></div>
      </div>
    </div>
  </main>

  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAUdbiGaC7EIMfxrHfLP69w21ibKza2cQQ&callback=init"></script>


  <script>
    $.ajax({
      url: "https://geolocation-db.com/jsonp",
      jsonpCallback: "callback",
      dataType: "jsonp",
      success: function (location) {
        $('#country').html(location.country_name);
        $('#state').html(location.state);
        $('#city').html(location.city);
        $('#latitude').html(location.latitude);
        $('#longitude').html(location.longitude);
        $('#ip').html(location.IPv4);
      }
    });

  </script>

  <script src="../assets/js/deviceInfo.js"></script>

  <script>

    document.getElementById('check').onclick = function () {
      move();
      Disable();
    }
    var i = document.getElementById('osVersion').innerHTML;


    function move() {
      if (i <= 10 && i >= 9) {
        i = 1;
        var elem = document.getElementById("myBar");
        var width = 0;
        var id = setInterval(frame, 5);
        function frame() {
          if (width >= 30) {
            clearInterval(id);
            i = 0;
          } else {
            width++;
            elem.style.width = width + "%";
            elem.innerHTML = width + "%";
          }
        }
      }
      else if (i <= 9 && i >= 8) {
        i = 1;
        var elem = document.getElementById("myBar");
        var width = 20;
        var id = setInterval(frame, 10);
        function frame() {
          if (width >= 50) {
            clearInterval(id);
            i = 0;
          } else {
            width++;
            elem.style.width = width + "%";
            elem.innerHTML = width + "%";
          }
        }
      }
      else if (i <= 7 && i >= 6) {
        i = 1;
        var elem = document.getElementById("myBar");
        var width = 20;
        var id = setInterval(frame, 10);
        function frame() {
          if (width >= 70) {
            clearInterval(id);
            i = 0;
          } else {
            width++;
            elem.style.width = width + "%";
            elem.innerHTML = width + "%";
          }
        }
      }
      else if (i <= 5 && i >= 4) {
        i = 1;
        var elem = document.getElementById("myBar");
        var width = 20;
        var id = setInterval(frame, 10);
        function frame() {
          if (width >= 80) {
            clearInterval(id);
            i = 0;
          } else {
            width++;
            elem.style.width = width + "%";
            elem.innerHTML = width + "%";
          }
        }
      }
      else if (i < 3) {
        i = 1;
        var elem = document.getElementById("myBar");
        var width = 20;
        var id = setInterval(frame, 10);
        function frame() {
          if (width >= 99) {
            clearInterval(id);
            i = 0;
          } else {
            width++;
            elem.style.width = width + "%";
            elem.innerHTML = width + "%";
          }
        }
      }
    }
    function Disable(check) {
      document.getElementById("check").disabled = 'true';
    }

  </script>
</body>

</html>

 

See also  Build a Node.js JSON to XML File Converter Using jsontoxml Library in Browser Using TypeScript Full Project For Beginners

 

deviceInfo.css

 

 

html {
    font-family: sans-serif;
    line-height: 1.15;
    height: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1a1a1a;
    text-align: left;
    height: 100%;
    background-color: #fff;
}

.container {
    display: flex;
    flex-direction: column;
    max-height: 100px;
}

.map {
    flex: 1;
    background: #f0f0f0;
    text-align: center;
    display: inline-flexbox;
    padding-bottom: 708px;

}
.heading {
    font-size: 50px;
    background: -webkit-linear-gradient( #ff6600 0%, #ffe927 100%);
    background-clip: content-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}
.tag {
    font-size: 20px;
    color:whitesmoke;
    position: relative;
    bottom:50px
}

.info {
    padding:1rem;
    margin: 0;
    background: linear-gradient(to right, #ff6600 -30%, #ffff66 100%);
}
#logo {
    height: 60px;
    padding: 2mm;
    position: relative;
    top: 4px;
    max-height: 100px;
}
.device {
    max-width: 500px;
    padding-left:2mm;
    margin: 0;
    height: 2%;
}
.footer {
    background-image: linear-gradient(315deg, #fbb034 0%, #ffdd00 74%);
}

.current {
    padding-left: 1rem ;
    width: fit-content;
    max-width: 200px;
}
#check {
    display: flex;
    position:relative;
    width:100px;
    left: 70%;
    bottom: 43px;
    height: 20px;
    border: gold;
    border-radius: 2mm;
    background: linear-gradient(120deg,#d41041,#8e44ad,#3498db);
    background-size: 200%;
    color: #fff;
    outline: none;
    cursor: pointer;
    transition: .5s;
    justify-content: center ;
}
#check:hover{
    background-position: right;
}
#myProgress {
    display: flex;
    width: 250px;
    border-radius: 5mm;
    background:linear-gradient(315deg, #fbb034 0%, #ffdd00 74%);
    position:relative;
    left:45%;
    bottom:20px;
    transform: rotate(270deg);
  }
  
#myBar {
    width: 10%;
    height: 30px;
    border-radius: 5mm;
    background: linear-gradient(120deg,#d41041,#8e44ad,#3498db);
    text-align: center;
    line-height: 30px;
    color: white;
}
#Ptxt {
    padding-left: 1rem ;
    width: fit-content;
    max-width: 150px;
    position: relative;
    left: 45%;
    top: 20px;
    transform: rotate(270deg);
}

Leave a Reply