Google Sheets Web Scraper Tool Script - Favorite Web

Sheets Setup

Google Sheet এর Data ওয়েবসাইট দেখানোর জন্য Visibility অবশ্যই Anyone with the link Everyone সেট করতে হবে। তারপর File থেকে Share থেকে Publish to web এ Click করে Comma Separate Value বা CSV তে Publish করতে হবে। Publish করার পর Sheet ID Copy করে Notepad এ রাখুন।

HTML Code

তারপর নিচের HTML কোডটি Copy করে আপনার পোস্ট/পেইজের Code Edit/HTML Mode করে Past করুন তারপর কোন কোন কলামের ডাটা দিয়ে Search Result দেখাতে চান সেই নাম Placeholder এ Replace করে দিন।

<div class="ss-app"><h2> Smart Search</h2><div class="ss-search-box">
  <input type="text" id="searchBox" class="ss-input" placeholder="Enter order-id / mobile">
  <button class="ss-btn" onclick="searchData()">Search</button>
</div><div id="results" class="ss-cards"></div></div>

CSS Code

তারপর নিচের Css কোডটি Just Copy করে Past করুন।

<style>
    .ss-app {
      font-family: 'Segoe UI', sans-serif;
      background: #f5f7fb;
      padding: 20px;
    }.ss-app h2 {
  text-align: center;
  margin-bottom: 20px;
}

.ss-search-box {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.ss-input {
  padding: 12px;
  width: 280px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.ss-btn {
  padding: 12px 18px;
  border: none;
  border-radius: 10px;
  background: #4f46e5;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.ss-btn:hover {
  background: #4338ca;
}

.ss-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.ss-card {
  background: white;
  padding: 18px;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  animation: ssFade 0.3s ease;
}

.ss-field {
  margin-bottom: 8px;
  font-size: 14px;
}

.ss-label {
  font-weight: bold;
  color: #444;
}

.ss-highlight {
  background: yellow;
  font-weight: bold;
}

.ss-no-result {
  text-align: center;
  color: red;
  font-weight: bold;
  margin-top: 20px;
}

@keyframes ssFade {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

/* 🔥 Mobile Responsive Fix */
@media (max-width: 600px) {
  .ss-search-box {
    flex-direction: column;
    align-items: stretch;
  }

  .ss-input {
    width: 100%;
  }

  .ss-btn {
    width: 100%;
    margin-top: 10px;
  }
}
  </style>

JS Code

তারপর নিচের JS কোডটি Copy করে Past করুন এবং Sheet ID টি Replace করুন। তারপর 0 থেকে Count করে দেখুন আপনি কত নাম্বার কত নাম্বার Column দিয়ে Search করাতে চান সেইটা দিয়ে sheetData.filter এর মধ্যে পরিবর্তন করুন। এখানে এখন 1 ও 3 দেওয়া আছে তার মানে এখন ডিফল্ট ২ এবং ৪ নাম্বার Column থেকে Search দিলে Result দেখাবে।

<script>
let sheetData = [];
let headers = [];

// 🔥 Load Data from Google Sheets
async function loadData() {
  try {
    const url = "https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/gviz/tq?tqx=out:json";

    const res = await fetch(url);
    const text = await res.text();

    const json = JSON.parse(
      text.substring(text.indexOf("{"), text.lastIndexOf("}") + 1)
    );

    headers = json.table.cols.map(col => col.label || "");

    sheetData = json.table.rows.map(row => {
      return headers.map((_, i) => {
        return row.c[i] ? row.c[i].v : "";
      });
    });

  } catch (err) {
    console.error(err);
    document.getElementById("results").innerHTML =
      "<div class='ss-no-result'>Data load failed</div>";
  }
}

// 🔍 Search (Exact match: Order ID + Mobile)
function searchData() {
  const query = document.getElementById("searchBox").value.trim().toLowerCase();
  const resultDiv = document.getElementById("results");

  resultDiv.innerHTML = "";

  if (query === "") return;

  const filtered = sheetData.filter(row => {
    const orderId = row[1] ? row[1].toString().toLowerCase().trim() : "";
    const mobile = row[3] ? row[3].toString().toLowerCase().trim() : "";

    return orderId === query || mobile === query;
  });

  if (filtered.length === 0) {
    resultDiv.innerHTML = "<div class='ss-no-result'>No exact match found</div>";
    return;
  }

  filtered.forEach(row => {
    const card = document.createElement("div");
    card.className = "ss-card";

    row.forEach((cell, index) => {
      if (!cell) return;

      const field = document.createElement("div");
      field.className = "ss-field";

      let value = cell;

      // 📅 Date Format Fix
      if (typeof cell === "string" && cell.includes("Date(")) {
        const parts = cell.match(/\d+/g);

        const date = new Date(
          parts[0],
          parts[1],
          parts[2],
          parts[3] || 0,
          parts[4] || 0
        );

        value = date.toLocaleString("en-GB", {
          day: "numeric",
          month: "short",
          year: "numeric",
          hour: "2-digit",
          minute: "2-digit",
          hour12: false
        });
      }

      // 🔗 Link Detect
      const isLink = typeof value === "string" && value.startsWith("http");

      if (isLink) {
        field.innerHTML =
          "<span class='ss-label'>" + headers[index] + ":</span> " +
          "<a href='" + value + "' target='_blank'>Open Link</a>";
      } else {
        field.innerHTML =
          "<span class='ss-label'>" + headers[index] + ":</span> " + value;
      }

      card.appendChild(field);
    });

    resultDiv.appendChild(card);
  });
}

// 🚀 Start App
loadData();
</script>

বিশেষ দ্রষ্টব্য: এই কোডটি Local Host এ কাজ করবে না, Test করতে চাইলে Codepen অথবা এখানে ক্লিক করে Test করুন।