add refresh button for dns test

mskian · May 13, 2024 · f81c248 · f81c248
1 parent ab47ae0
commit f81c248
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 25 deletions.
diff --git a/dns.html b/dns.html
@@ -68,35 +68,24 @@
   font-weight: 700;
   font-size: 15px;
 }
-
 /* Styles for table headers */
 .table-wrapper th {
   background-color: #f2f2f2;
   border: 1px solid #dddddd;
-  padding: 8px;
-  text-align: left;
-}
-
-/* Styles for table cells */
-.table-wrapper td {
-  border: 1px solid #dddddd;
-  padding: 8px;
-  text-align: left;
 }
-
-/* Media query for smaller screens (e.g., mobile devices) */
-@media screen and (max-width: 600px) {
-  /* Modify table layout for smaller screens */
-  .table-wrapper table {
-      width: 100%; /* Ensure table occupies full width of viewport */
-  }
-  .table-wrapper th,
-  .table-wrapper td {
-      padding: 4px; /* Decrease padding for smaller screens */
-      font-size: 15px; /* Decrease font size for smaller screens */
-      font-weight: 700;
+.read-more {
+    font-weight: 600;
+    font-size: 14px;
+    font-family: "Roboto Mono", monospace;
+    text-transform: uppercase;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    border-radius: 32px;
+    padding: 20px;
+    -moz-osx-font-smoothing: grayscale;
+   -webkit-font-smoothing: antialiased !important;
+   -moz-font-smoothing: antialiased !important;
+   text-rendering: optimizelegibility !important;
   }
-}
 </style>
 
 </head>
@@ -109,13 +98,13 @@ <h1 class="title has-text-centered is-size-6">Public DNS Resolvers</h1>
                     <br>
                     <div class="table-container table-wrapper">
                         <table id="resolver-table" class="table is-fullwidth is-hoverable">
-
+                          <thead>
                                 <tr>
                                     <th>DNS and Domain</th>
                                     <th>Loading Time</th>
                                     <th>Connection Speed</th>
                                 </tr>
-                            
+                          </thead>
                             <tbody>
                             </tbody>
                         </table>
@@ -127,6 +116,10 @@ <h1 class="title has-text-centered is-size-6">Public DNS Resolvers</h1>
                 </div>
                 <br>
             </div>
+            <br>
+            <div class="buttons is-centered">
+            <button id="refresh-button" class="button is-warning  read-more">Refresh</button>
+            </div>
         </div>
     </section>
 

diff --git a/script.js b/script.js
@@ -1,6 +1,7 @@
 document.addEventListener('DOMContentLoaded', async function () {
     const resolverTable = document.getElementById('resolver-table').getElementsByTagName('tbody')[0];
     const loadingIndicator = document.getElementById('loading-indicator');
+    const refreshButton = document.getElementById('refresh-button');
 
     // Array of public DNS resolvers
     const resolvers = [
@@ -62,6 +63,7 @@ document.addEventListener('DOMContentLoaded', async function () {
 // Populate the table with resolver data
 async function populateTable() {
     loadingIndicator.style.display = 'block';
+    resolverTable.innerHTML = '';
     for (const resolver of resolvers) {
         const results = await measureLoadingTimeAndSpeed(testUrls);
         let lastIpAddress = null; // Reset last IP address for each resolver
@@ -88,6 +90,10 @@ async function populateTable() {
     loadingIndicator.style.display = 'none';
 }
 
+refreshButton.addEventListener('click', async () => {
+    await populateTable();
+});
+
     populateTable();
 
 });