Node.JS Express AJAX Project to Build Bulk Website URL Up-Down Status Checker in Browser Using JS

You are currently viewing Node.JS Express AJAX Project to Build Bulk Website URL Up-Down Status Checker in Browser Using JS

Node.js Express AJAX Project to Build Bulk Website URL Up-Down Status Checker in Browser Using JS

const express = require("express");
 
const { isSiteDown } = require("is-site-down");
 
const bodyparser = require("body-parser");
 
const app = express();
 
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());
 
app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});
 
app.post("/getsiteinfo", async (req, res) => {
  let url = req.body.site;
 
    isSiteDown(url).then((data) => {
      console.log(data)
    res.json({
      data: data
    });
  });
});
 
app.listen(5000, () => {
  console.log("App is listening on port 5000");
});

<!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>Bulk Website Up-down Checker</title>
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
 
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h1 class="text-center">Bulk Website Status Checker</h1>
      <form id="form">
        <div class="form-group">
          <textarea
            id="urls"
            class="form-control"
            cols="30"
            rows="10"
          ></textarea>
        </div>
        <div class="form-group">
          <button class="btn btn-danger btn-block">Get Website Info</button>
        </div>
      </form>
 
      <div id="result">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Name of Site</th>
              <th>Status</th>
              <th>Status Code</th>
            </tr>
          </thead>
          <tbody id="info"></tbody>
        </table>
      </div>
    </div>
  </body>
  <script>
    let form = document.querySelector("#form");
 
    $("#form").submit((e) => {
      e.preventDefault();
 
      var urls = $("#urls").val().split("\n");
 
      console.log(urls);
 
      // for each loop
 
      urls.forEach((url) => {
        // send a ajax request
 
        $.ajax({
          method: "POST",
          url: "/getsiteinfo",
          data: { site: url },
          success: function (data) {
            console.log(data.data.isitdown);
            let message = "";
            console.log(data);
            if (!data.data.isitdown) {
              message = "Site is Running";
            } else {
              message = "Site is Down";
            }
            $("#info").append(`
 
                    <tr>
                    
                     <td>${data.data.host}</td>
                     <td>${message}</td>
                     <td>${data.data.response_code}</td>
 
                     </tr>
                    
                    `);
          },
        });
      });
    });
  </script>
</html>

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply