anjanesh · August 24, 2024 12:14
diff --git a/google-dns.html b/google-dns.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
 </head>
 <body>

 <div class="container mt-5">
    
    <form id="frm-Submit" class="row g-3">
        <div class="col-auto">
            <input type="text" class="form-control" id="domain" placeholder="techcrunch.com" />
        </div>
        <div class="col-auto">
            <select class="form-select" id="dnsType">
                <option>DNS Record Type</option>
                <option value="A">A</option>
                <option value="MX" selected>MX</option>
                <option value="CNAME">CNAME</option>
            </select>
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary mb-3">Search</button>
        </div>
    </form>

    <table
        id="tbl-records"
        class="table border mt-3"
        x-data="{ records: [] }"
        x-init="records = await fetchTechCrunchMXRecords('techcrunch.com', 'MX')"
    >
        <template x-for="(record, index) in records.Answer">
            <tr>
                <td x-text="'#' + (index + 1)" class="border"></td>
                <td x-text="record.name" class="border"></td>
                <td x-text="record.data" class="border"></td>
            </tr>
        </template>
    </table>
 </div>

 <script>
 document.addEventListener("DOMContentLoaded", () =>
 {
    const frm = document.getElementById('frm-Submit');
    frm.addEventListener("submit", async e =>
    {
        e.preventDefault();
        const domain = document.getElementById('domain').value;
        if (domain === '')
        {
            alert('Enter a qualified domain name');
            return false;
        }
        const dnsType = document.getElementById('dnsType').value;
        document.getElementById('tbl-records')._x_dataStack[0].records = await fetchTechCrunchMXRecords(domain, dnsType);
    });
 });

 const fetchTechCrunchMXRecords = async (domain, dnsType) =>
 {
    const url = `https://dns.google/resolve?name=${domain}&type=${dnsType}`;

    return fetch(url)
      .then(response => response.json())
      .then(data =>
      {
        console.log("Parsed data:", data);
        return data;
      })
      .catch(error => console.error("Error:", error));

 }
 </script>

 <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
	</head>
	<body>

	<div class="container mt-5">

	<form id="frm-Submit" class="row g-3">
	<div class="col-auto">
	<input type="text" class="form-control" id="domain" placeholder="techcrunch.com" />
	</div>
	<div class="col-auto">
	<select class="form-select" id="dnsType">
	<option>DNS Record Type</option>
	<option value="A">A</option>
	<option value="MX" selected>MX</option>
	<option value="CNAME">CNAME</option>
	</select>
	</div>
	<div class="col-auto">
	<button type="submit" class="btn btn-primary mb-3">Search</button>
	</div>
	</form>

	<table
	id="tbl-records"
	class="table border mt-3"
	x-data="{ records: [] }"
	x-init="records = await fetchTechCrunchMXRecords('techcrunch.com', 'MX')"
	>
	<template x-for="(record, index) in records.Answer">
	<tr>
	<td x-text="'#' + (index + 1)" class="border"></td>
	<td x-text="record.name" class="border"></td>
	<td x-text="record.data" class="border"></td>
	</tr>
	</template>
	</table>
	</div>

	<script>
	document.addEventListener("DOMContentLoaded", () =>
	{
	const frm = document.getElementById('frm-Submit');
	frm.addEventListener("submit", async e =>
	{
	e.preventDefault();
	const domain = document.getElementById('domain').value;
	if (domain === '')
	{
	alert('Enter a qualified domain name');
	return false;
	}
	const dnsType = document.getElementById('dnsType').value;
	document.getElementById('tbl-records')._x_dataStack[0].records = await fetchTechCrunchMXRecords(domain, dnsType);
	});
	});

	const fetchTechCrunchMXRecords = async (domain, dnsType) =>
	{
	const url = `https://dns.google/resolve?name=${domain}&type=${dnsType}`;

	return fetch(url)
	.then(response => response.json())
	.then(data =>
	{
	console.log("Parsed data:", data);
	return data;
	})
	.catch(error => console.error("Error:", error));

	}
	</script>

	<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

	</body>
	</html>