Snippets Collections
let count = 0;
let counttxt = document.querySelector("#count");

window.addEventListener("DOMContentLoaded", (e) => {
  getView();
});

// handle posting data to db
function getView() {
  $.ajax({
    url: "insert.php",
    method: "POST",
    dataType: "text",
    data: {
      count: count,
    },
    success: (data, status) => {
      console.log(data);
    },
  });
}

setInterval(() => {
  getData();
}, 1000);

// handle getting dada from database

function getData(data) {
  $.ajax({
    url: "fetch.php",
    method: "POST",
    dataType: "text",
    data: {
      fetch: true,
    },
    success: (data, status) => {
      counttxt.textContent = data;
    },
  });
}

async function userLocation() {
    const API_KEY = "7c0a8d3613ed43a7adeb63a2884f59b4";

  let locationcont = document.querySelector(".v-loc");
  let url =
    `https://ipgeolocation.abstractapi.com/v1/?api_key=${API_KEY}`;

  let fetchdata = await fetch(url);
  let data = await fetchdata.json();
  const { city, country, ip_address, latitude, longitude } = data;

  let loader = document.querySelector(".loader-cont");
  if (location.innerHTML = "") {
    loader.style.display = "flex";
    locationcont.innerHTML = "";
  } else {
    setTimeout(() => {
        loader.style.display = "none";
    }, 2000);
    locationcont.innerHTML = `
    <div class="location">
    <div class="box">
        <div class="icon"><ion-icon name="location-outline"></ion-icon></div>
        <b><p>${country}</p></b>
    </div>
    <div class="box">
        <div class="icon"><ion-icon name="locate-outline"></ion-icon></div>
        <b><p>${city}</p></b>
    </div>
  </div>
  <div class="geo">
    <div class="box">
        <div class="box-1">
            <span class="icon"><ion-icon name="compass-outline"></ion-icon></span> <i>lat</i>
            <br>
            <small>${latitude}</small>
        </div>
        <div class="box-1">
            <span class="icon"><ion-icon name="compass-outline"></ion-icon></span> <i>lng</i>
            <br>
            <small>${longitude}</small>
        </div>
    </div>
    <div class="ip">
        <span class="icon"><ion-icon name="navigate-outline"></ion-icon></span>
        <small>IP ADDRESS</small>
        <h3><i>${ip_address}</i></h3>
    </div>
  </div>
    `;
  }
}
userLocation();
<?php 
require("db.php");


if(isset($_POST['fetch'])){
    $sql = mysqli_query($conn, "SELECT * FROM views");
    $data = mysqli_fetch_assoc($sql);
    $count = $data['count'];

    if(mysqli_num_rows($sql) > 0){
        echo $count;
    }else{
        echo "0";
    }
}else{
    return false;
}


?>
<?php 
require("db.php");


$count = 0;
if(isset($_POST['count'])){
        $sql = mysqli_query($conn, "SELECT * FROM views");
        $data = mysqli_fetch_assoc($sql);
    
        $newcount = $data['count'];
    
        if(mysqli_num_rows($sql) > 0){
            $newcount+=1;
            $sql = mysqli_query( $conn, "UPDATE views SET count='$newcount'");
    
            if($sql){
                echo "Success";
            }
        }
    }else{
        echo "Something went wrong";
        die;
    }
    // getCount();
}else{
    return false;
}

?>
<?php 

$conn = mysqli_connect("localhost", "root", null, "views");

echo $conn ? "" : "Error connecting ".mysqli_error($conn);


?>
body{
    width: 100%;
    height: 100vh;
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    background: #0c0c18 !important;
}
*{
    list-style: none;
    box-sizing: border-box;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.container .card{
    width:400px;
    height:350px;
    margin: 50px auto !important;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container .v-loc{
    width: 500px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "location"
    "geo"
    ;
}

.container .v-loc .location{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    grid-area: location;
    flex-wrap:wrap;
}
.container .v-loc .icon{
    color:#ffff00;
    font-size:30px;
    padding:5px;
    float:left;
}
.container .v-loc .location .box{
    width:245px;
    padding:15px 45px;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    margin-right:2px;
    border-radius: 2px;
    display:flex;
    text-align: start;
}
.container .v-loc .location .box h5{
    padding:8px;
    font-size:28px;
}
.container .v-loc .geo{
    margin:10px auto;
    display:flex;
    flex-wrap:wrap;
    grid-area: geo;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    width:100%;
    padding:12px;
}
.container .v-loc .geo .box{
    display:flex;
    flex-wrap:wrap;
    padding:12px;
}
.container .v-loc .geo .box .box-1{
    width:195px;
    padding:10px 45px;
    margin:5px;
}
.container .v-loc .geo .box .box-1 i{
    padding:12px;
}
.container .v-loc .geo .ip{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    width:100%;
    text-align: center;
}

.loader-cont{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    position:fixed;
    background:#000000e3;
    top:0px;
    left:0px;
    /* display:none; */
}
.loader-cont .icon{
    font-size:55px;
    color:#ffff00;
    animation: spin linear infinite;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>Views Counts</title>
    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</head>

<body>
    <br>
    <br>
    <h1 class="display-4 text-center text-white">Site Tracker</h1>
    <div class="container">
        <div class="card">
            <div class="container">
                <div class="card-header">
                    <h3>Visitor Views</h3>
                    <p>Last 30min</p>
                </div>
                <div class="card-body">
                    <h1 id="count">0</h1>
                </div>
            </div>
        </div>
        <div class="v-loc"></div>
    </div>

    <div class="loader-cont">
        <h3 class="text-white">Loading.......</h3>
        <div class="icon">
            <ion-icon name="cog-outline" class="ion"></ion-icon>
        </div>
    </div>

    <script src="view.js"></script>
    <script src="jquery.js"></script>
</body>

</html>
<?php 
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require_once "vendor/autoload.php";


if(isset($_POST['submit'])){
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $msg = htmlspecialchars($_POST['msg']);

    $error = "";
    $pass = "";
    // check if fields are empty

    if(empty($name) || empty($email) || empty($msg)){
        $error .= str_replace(" ", "-", "Fields cannot be empty");
        header("location: index.php?err=$error");
        die;
    }
    else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $error .= str_replace(" ", "-", "Email given is invalid");
        header("location: index.php?err=$error");
        die;
    }
    else {
        // if no error occur send mail
        $to = "alumonabenaiah71@gmail.com";
        $mail = new PHPMailer(true); 
        $mail->IsSMTP();
        $mail->Mailer = "smtp";
        $mail->SMTPDebug  = 1;  
        $mail->SMTPAuth   = TRUE;
        $mail->SMTPSecure = "tls";
        $mail->Port       = 587;
        $mail->Host       = "smtp.gmail.com";
        $mail->Username   = "your-gmail-account-address";
        $mail->Password   = "your-password";
        $mail->From = $email;
        $mail->FromName = $name;
        $mail->addAddress($to);
        $mail->Subject = "Contact Form Request";
        $mail->Body = $msg;
        if($mail->send()){
            $pass .= str_replace(" ", "-", "Message sent Successfully!!");
            header("location: index.php?pass=$pass");
            die;
        }else{
            $error .= str_replace(" ", "-", "An error occur while sending message, please try later ".$mail->ErrorInfo);
            header("location: index.php?err=$error");
            die;
        }
    }
}
else{
    header("location: index.php");
    die;
}

?>
body{
    width: 100%;
    height: 100vh;
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    background:url("https://images.unsplash.com/photo-1530893609608-32a9af3aa95c?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTJ8fHRlY2h8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60") !important;
    background-size:cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
*{
    list-style: none;
    box-sizing: border-box;
}

.container{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100%;
    height:100vh;
}
.container .form-cont{
    width:450px;
    padding:12px;
    background:rgba(0,0,0,.8);
    color:#fff;
}

.container .form-cont form textarea{
    height:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Mail</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <div class="container">
        <div class="form-cont">
            <h3>Contact Form</h3>
            <br>
            <div class="err-cont">
                <?php if(isset($_GET['err'])){?>
                <div class="alert alert-danger"><small><?php echo $_GET['err'];?></small></div>
                <?php }else if(isset($_GET['pass'])){?>
                <div class="alert alert-success"><small><?php echo $_GET['pass'];?></small></div>
                <?php }?>
            </div>
            <form action="sendmail.php" class="form-group" method="POST">
                <label for="fname">Fullname</label>
                <input type="text" name="name" placeholder="Your name.." class="form-control">
                
                <label for="fname">Email</label>
                <input type="email" name="email" placeholder="Your Email Address.." class="form-control">
                
                <label for="subject">Message</label>
                <textarea name="msg" placeholder="Write something.." class="form-control"></textarea>
            
                <input type="submit" name="submit" value="Send Message" class="btn btn-block btn-primary mt-2">
            
              </form>
        </div>
    </div>
</body>
</html>

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension