Added API

AvarageCodeEnjoyer · Jan 8, 2024 · b156da3 · b156da3
1 parent 05c397e
commit b156da3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -5,9 +5,23 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
 </head>
-<body>
-  <button onclick="getData()">Get data</button>
-  <div id="results"></div>
+<body style="display: flex; justify-content: center;">
+  <div style="width: 300px; height: 500px;">
+    <form onsubmit="getData(); return false">
+      <label for="postNumber">Post Number</label>
+      <input type="number" id="postNumber"/>
+      <input type="submit" value="Get Post">
+    </form>
+    <div id="caption"><b>Caption: </b></div>
+    <hr>
+    <div id="timestamp"><b>Timestamp: </b></div>
+    <hr>
+    <div id="id"><b>Post ID: </b></div>
+    <hr>
+    <div id="mediaType"><b>Media Type: </b></div>
+    <hr>
+    <img style="width: 300px; height: 300px;" src="" id="image" />
+  </div>
   <script src="./index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,11 @@
+async function getData() {
+  const postNumber = document.getElementById('postNumber').value;
+  const results = await fetch("https://graph.instagram.com/me/media?fields=media_url,caption,timestamp,media_type&access_token=IGQWRQYm5yUDhNOEQwRERqSi1FNVNpTVYwVURxRjZAGTFpOVXBhTTJ1SkVId2pDMjV0WG83Q1Frd0dLcmpRd3RqMk5nUDluWTl1MlprNWR4MmpnU0ZAnaVJfQl9kTjJ0Y2NfZA0U3VmxMcEstaXdid3NLZAEpqcUZAzTG50NW9PQUxuRVlqZAwZDZD")
+  const result = await results.json()
+
+  document.getElementById("id").innerHTML += result.data[postNumber].id
+  document.getElementById("caption").innerHTML += result.data[postNumber].caption
+  document.getElementById("mediaType").innerHTML += result.data[postNumber].media_type
+  document.getElementById("timestamp").innerHTML += result.data[postNumber].timestamp
+  document.getElementById('image').setAttribute("src", result.data[postNumber].media_url)
+}