Skip to content

Commit bac2c6d

Browse files
utdevnputdevnp
authored
Merge pull request #1 from utdevnp/update-design
added new design and format errors also add log
2 parents cfcd677 + 6961f95 commit bac2c6d

File tree

2 files changed

+89
-22
lines changed

2 files changed

+89
-22
lines changed

‎checker.js‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
12
async function checkSEO() {
23
const url = document.getElementById('url-input').value;
34

45
// Clear previous results
56
document.getElementById('tag-list').innerHTML = '';
67
document.getElementById('status').innerHTML = '';
8+
document.getElementById("loadingStatus").innerHTML = "Approaching website ..."
79

810
if (!url) {
911
document.getElementById('status').textContent = ` Please enter a valid URL.`;
@@ -12,18 +14,25 @@ async function checkSEO() {
1214

1315
try {
1416
// Use a proxy server to bypass CORS restrictions (AllOrigins or your custom proxy)
17+
document.getElementById("loadingStatus").innerHTML = "Setting proxy server (api.allorigins.win) ...";
1518
const proxyUrl = 'https://api.allorigins.win/get?url=';
1619
const targetUrl = encodeURIComponent(url);
1720

21+
document.getElementById("loadingStatus").innerHTML = "Bypassing CORS restrictions (AllOrigins or your custom proxy) ...";
22+
1823
// Fetch the HTML content of the given URL through the proxy
1924
const response = await fetch(proxyUrl + targetUrl);
20-
if (!response.ok) throw new Error('Failed to fetch the URL');
21-
25+
if (!response.ok) {
26+
throw new Error('Failed to fetch the URL');
27+
};
28+
29+
document.getElementById("loadingStatus").innerHTML = "Getting response from the website ...";
2230
const data = await response.json();
31+
document.getElementById("loadingStatus").innerHTML = "Got response 200 and start analyzing html...";
2332
const html = data.contents; // HTML content of the fetched URL
2433
const parser = new DOMParser();
25-
const doc = parser.parseFromString(html, 'text/html'); // Parse HTML to DOM
26-
34+
const doc = await parser.parseFromString(html, 'text/html'); // Parse HTML to DOM
35+
document.getElementById("loadingStatus").innerHTML = "Processing result for display...";
2736
// Get all <meta> tags from the document
2837
const metaTags = doc.getElementsByTagName('meta');
2938
const tagList = document.getElementById('tag-list');
@@ -57,10 +66,10 @@ async function checkSEO() {
5766
const tagName = document.createElement('h5');
5867
tagName.classList.add('card-header', 'd-flex', 'justify-content-between');
5968

60-
// Create a div for icons to be aligned on the right
61-
const iconDiv = document.createElement('div');
62-
iconDiv.classList.add('d-flex', 'align-items-center'); // Ensuring icons are aligned properly
63-
69+
// Create a div for icons to be aligned on the right
70+
const iconDiv = document.createElement('div');
71+
iconDiv.classList.add('d-flex', 'align-items-center'); // Ensuring icons are aligned properly
72+
6473
// Add icon if isMatch is Yes
6574
let iconHTML = "";
6675
if (tagObject["isMatch"]) {
@@ -102,7 +111,7 @@ async function checkSEO() {
102111

103112
// Display the overall status
104113
if (jsonResults.length > 0) {
105-
document.getElementById('status').textContent = `${jsonResults.length} meta tags found.`;
114+
document.getElementById('result').innerHTML = `<span class="badge bg-success rounded-pill">${jsonResults.length}</span> meta tags found.`;
106115
} else {
107116
document.getElementById('status').textContent = 'No meta tags found.';
108117
}
@@ -113,4 +122,16 @@ async function checkSEO() {
113122
}
114123
}
115124

116-
document.getElementById('checkBtn').addEventListener('click', checkSEO);
125+
document.getElementById('tag-list').innerHTML = `
126+
<div class="card">
127+
<div class="card-body">
128+
<p class="text-center mt-3">No tags found. Please try entering a URL and searching again. </p>
129+
</div>
130+
</div>`;
131+
132+
document.getElementById('checkBtn').addEventListener('click', async () => {
133+
document.getElementById('loading').innerHTML = ` <div class="spinner-border mt-5" role="status"><span class="visually-hidden">Loading...</span></div> </br> Searching meta tags , it may take while </br>`;
134+
await checkSEO();
135+
document.getElementById('loading').innerHTML = '';
136+
document.getElementById("loadingStatus").innerHTML = "";
137+
});

‎index.html‎

Lines changed: 58 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,86 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Metascope</title>
7+
<title>Meta scope - Tool for analyzing website meta tags</title>
88
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
99
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
1111
<style>
12-
p, span, a, strong, em, b, pre {
13-
display: block;
14-
}
12+
p,
13+
span,
14+
a,
15+
strong,
16+
em,
17+
b,
18+
pre {
19+
display: block;
20+
}
1521
</style>
1622
</head>
1723

1824
<body>
1925
<div class="container-fluid">
2026
<p class="text-center mt-3">
2127
<i class="bi bi-meta text-primary" style="font-size: 50px;"></i> </br>
22-
<strong>MetaScope</strong> is an intuitive tool for analyzing website meta tags, including SEO, social media, and verification tags. It highlights missing or mismatched tags and presents results in a clean, user-friendly format, making it easy to optimize your site for search engines and social sharing.
28+
<strong>MetaScope</strong> is an intuitive tool for analyzing website meta tags, including SEO, social
29+
media, and verification tags. It highlights missing or mismatched tags and presents results in a clean,
30+
user-friendly format, making it easy to optimize your site for search engines and social sharing.
2331
</p>
2432
<div class="d-flex flex-column justify-content-center align-items-center w-80">
25-
<input type="text" required style="width:55% !important; border-radius: 19px;" type="text" class="form-control form-control-lg fs-5 w-100 w-md-80 mb-3 text-center"
33+
34+
<input type="text" required style="width:55% !important; border-radius: 19px;" type="text"
35+
class="form-control form-control-lg fs-5 w-100 w-md-80 text-center"
2636
placeholder="Enter your url eg: https://example.com" id="url-input">
27-
<button id="checkBtn" style="border-radius: 10px;" class="btn btn-success mb-3 btn-lg">Start analyzing the website</button>
37+
<small id="loadingStatus" style="height: 25px; font-size: 12px;"></small>
38+
<button id="checkBtn" style="border-radius: 10px;" class="btn btn-success mb-3 btn-lg">Start analyzing the
39+
website</button>
2840
</div>
29-
<div class="col-12 justify-content-center align-items-center" >
30-
<p class="text-center" id="status"></p>
41+
<div class="col-12 justify-content-center align-items-center">
42+
<div class="col-12" id="result"></div>
43+
<p class="text-center text-danger" id="status"></p>
3144
</div>
3245
<div class="row">
3346
<div class="col-8">
34-
<div class="col-12" id="tag-list"></div>
47+
<div class="text-center mb-2 col-12" id="loading"></div>
48+
<div class="col-12" id="tag-list"> </div>
3549
</div>
3650
<div class="col-4">
37-
Seo tips
51+
<div class="alert alert-primary d-flex flex-column align-items-center text-center" role="alert">
52+
<i class="bi bi-type-bold mb-2" style="font-size: 2rem;"></i>
53+
<div>
54+
<strong>Tip 1:</strong> Use descriptive and keyword-rich titles to improve your page's visibility.
55+
</div>
56+
</div>
57+
58+
<div class="alert alert-secondary d-flex flex-column align-items-center text-center" role="alert">
59+
<div>
60+
<strong>Tip 2:</strong> Write compelling meta descriptions to encourage click-throughs.
61+
</div>
62+
</div>
63+
64+
<div class="alert alert-warning d-flex flex-column align-items-center text-center" role="alert">
65+
<div>
66+
<strong>Tip 3:</strong> Always use alt text for your images to help with accessibility and SEO.
67+
</div>
68+
</div>
69+
70+
<div class="alert alert-danger d-flex flex-column align-items-center text-center" role="alert">
71+
<div>
72+
<strong>Tip 4:</strong> Optimize your website for faster loading times to reduce bounce rates.
73+
</div>
74+
</div>
75+
76+
<div class="alert alert-info d-flex flex-column align-items-center text-center" role="alert">
77+
<i class="bi bi-link-45deg mb-2" style="font-size: 2rem;"></i>
78+
<div>
79+
<strong>Tip 5:</strong> Use internal and external links to improve site navigation and authority.
80+
</div>
81+
</div>
82+
</div>
3883
</div>
3984
</div>
40-
85+
</div>
86+
4187
</div>
4288

4389
<script src="./checker.js"></script>

0 commit comments

Comments
 (0)