Twitter poll API

RybakV · Jan 23, 2024 · 804ffdb · 804ffdb
1 parent 9e4e2e8
commit 804ffdb
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -4,12 +4,12 @@
   <link rel='icon' href='favicon.ico' type='image/x-icon'/ >
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-  <meta name="author" content="RybakV" />
-  <meta name="description" content="Just one more nice HTML page">
-  <meta name="keywords" content="Rybak, HTML">
+  <meta name="author" content="Rybak" />
+  <meta name="description" content="Code Pages by Rybak">
+  <meta name="keywords" content="Rybak, HTML, CSS, JS, React, Browser games">
 
   <!-- OG image for nice social networks sharing -->
-  <meta property="og:title" content="Nice page">
+  <meta property="og:title" content="Pages coded by Rybak">
   <meta property="og:description" content="Just one more nice HTML page">
   <meta property="og:image" content="http://rybak.github.io/img/coin.gif">
   <meta property="og:url" content="http://rybak.github.io/">
@@ -20,7 +20,7 @@
   <meta name="twitter:card" content="summary_large_image">
 
 <!-- Document title -->
-  <title>Nice page</title>
+  <title>Pages by Rybak</title>
   <!-- Stylesheets & Fonts -->
   <link href="./css/main.css" rel="stylesheet">
 
@@ -49,6 +49,8 @@ <h1>Coin</h1>
     <br/>
     <a href="https://rybakv.github.io/pages/on-power-off/">JS: On-Power-Off schedule</a>
     <br/>
+    <a href="https://rybakv.github.io/pages/twitter-poll-api/">JS: Twitter poll api</a>
+    <br/>
 
     <!--a href="https://rc-portal-game-1.vercel.app/">Game: Portal Hamster</a-->
 

diff --git a/twitter-poll-api/css/style.css b/twitter-poll-api/css/style.css
@@ -0,0 +1,28 @@
+* {
+    margin: 0;
+    padding: 0;
+    outline: none;
+    box-sizing: border-box;
+}
+body {
+    font-family: Arial, sans-serif;
+    background-color: #1f2431;
+    color: #90a1b9;
+    padding: 40px;
+    font-size: 20px;
+}
+#result {
+    background-color: #1b1b1b;
+    border: 2px solid #41454f;
+    border-radius: 4px;
+    padding: 24px;
+}
+.btn {
+    border: 2px solid #dd8822;
+    background-color: #ff9f2f;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 4px;
+    font-size: 20px;
+    cursor: pointer;
+}
diff --git a/twitter-poll-api/index.html b/twitter-poll-api/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel='icon' href='favicon.ico' type='image/x-icon'/ >
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <meta name="author" content="RybakV" />
+  <meta name="description" content="Twitter poll api fetching votes">
+  <meta name="keywords" content="Rybak, JS, Twitter, API">
+
+  <!-- OG image for nice social networks sharing -->
+  <meta property="og:title" content="Twitter poll api">
+  <meta property="og:description" content="Twitter poll api fetching votes">
+  <!--<meta property="og:image" content="http://rybak.github.io/img/coin.gif">-->
+  <meta property="og:url" content="http://rybak.github.io/">
+
+  <meta name="twitter:title" content="Twitter poll api">
+  <meta name="twitter:description" content="Twitter poll api fetching votes">
+  <!--<meta name="twitter:image" content="http://rybak.github.io/img/coin.gif">-->
+  <!--<meta name="twitter:card" content="summary_large_image">-->
+
+<!-- Document title -->
+  <title>Twitter poll api</title>
+  <!-- Stylesheets & Fonts -->
+  <link href="./css/style.css" rel="stylesheet">
+
+<body>
+  <div class="container text-center">
+    <h1>Twitter(X) votes API</h1>
+    <button class="btn" id="start">Start</button>
+    <div id="result"></div>
+  </div>
+  <script src="./js/script.js"></script>
+</body>
+</html>
diff --git a/twitter-poll-api/js/script.js b/twitter-poll-api/js/script.js
@@ -0,0 +1,49 @@
+//curl --request GET 'https://api.twitter.com/2/tweets?ids=1199786642791452673&expansions=attachments.poll_ids&poll.fields=duration_minutes,end_datetime,id,options,voting_status' --header 'Authorization: Bearer $BEARER_TOKEN'
+const startBtn = document.querySelector('#start');
+const resultBox = document.querySelector('#result');
+startBtn.addEventListener('click', startApp);
+
+function startApp(){
+    fetch('https://api.twitter.com/2/tweets?ids=1749817159872831578&expansions=attachments.poll_ids&poll.fields=duration_minutes,end_datetime,id,options,voting_status')
+        .then((response) => response.json())
+        .then((data) => {
+            resultBox.innerText = data;
+        });
+}
+
+
+const exampleResponse = {
+    "data": [
+    {
+        "text": "C#",
+        "id": "1199786642791452673",
+        "attachments": {
+            "poll_ids": [
+                "1199786642468413448"
+            ]
+        }
+    }
+],
+    "includes": {
+    "polls": [
+        {
+            "id": "1199786642468413448",
+            "voting_status": "closed",
+            "duration_minutes": 1440,
+            "options": [
+                {
+                    "position": 1,
+                    "label": "“C Sharp”",
+                    "votes": 795
+                },
+                {
+                    "position": 2,
+                    "label": "“C Hashtag”",
+                    "votes": 156
+                }
+            ],
+            "end_datetime": "2019-11-28T20:26:41.000Z"
+        }
+    ]
+}
+}