Link-Crawler/index.html at main · OshekharO/Link-Crawler · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Api Details</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" href="https://webformatter.com/image/logo.svg">
    <!-- INCLUDING GOOGLE FONT -->
    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@600&family=Ysabeau+Infant:ital,wght@1,200&display=swap" rel="stylesheet" />

    <!-- ADDITIONAL CSS FOR STYLING -->
    <style>
      body {
        background-color: #121212;
        color: #dcddde;
        font-family: "Ysabeau Infant", sans-serif;
      }

      h1 {
        color: #7289da;
        font-weight: bold;
        text-shadow: 2px 2px #2c2f33;
        text-align: center;
        font-size: 2.5em;
        margin-bottom: 20px;
      }

      /* Table styles here */
      table {
        border-collapse: collapse;
        margin: auto;
      }

      th,
      td {
        border: 1px solid #2c2f33;
        padding: 8px;
        text-align: left;
        font-size: 14px;
      }

      th {
        background-color: #23272a;
      }

      tr:nth-child(even) {
        background-color: #2c2f33;
      }

      a {
        color: #7289da;
        text-decoration: none;
      }

      td a {
        color: inherit;
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }

      @media screen and (max-width: 600px) {
        td {
          font-size: 12px;
        }
      }

      @media only screen and (min-width: 768px) {
        td {
          font-size: 20px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>API</h1>

      <!-- TABLE CONSTRUCTION-->
      <table id="table">
        <!-- HEADING FORMATION -->
        <thead>
          <tr>
            <th>NAME</th>
            <th>URL</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
      <script>
        $(document).ready(function () {
          // FETCHING DATA FROM JSON FILE
          $.getJSON("apis.json", function (data) {
            var items = "";

            // ITERATING THROUGH OBJECTS
            $.each(data, function (key, value) {
              //CONSTRUCTION OF ROWS HAVING DATA FROM JSON OBJECT
              items += "<tr>";
              items += "<td>" + value.name + "</td>";
              items += "<td><a href='" + value.url + "' target='_blank'>" + value.url + "</a></td>";
              items += "</tr>";
            });

            //INSERTING ROWS INTO TABLE
            $("#table tbody").append(items);
          });
        });
      </script>
    </div>
  </body>
</html>