twitst4tz

commit 44731580bef798caa01b3188696168c328bf0f78
parent 29ebb71e77789d6f61a9877278dbb3fc6aadfaf5
Author: underd0g1 <hide4@comcast.net>
Date:   Thu, 30 Apr 2020 20:20:22 -0400

added user optons

Diffstat:
M
index.js
 | 
28
+++++++++++++++++++++-------
M
public/css/stylesheet.css
 | 
6
+++++-
M
views/index.ejs
 | 
64
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----

3 files changed, 86 insertions(+), 12 deletions(-)
diff --git a/index.js b/index.js
@@ -64,13 +64,13 @@ app.post('/sendit', function(req, res){
 res.render("postpage");
 });
 
-app.post('/followerstatspage', function(req, res){
+app.post('/userstatspage', function(req, res){
 
   console.log('triggered the userstats page');
     var username = req.body.username;
     var bearer = 'AAAAAAAAAAAAAAAAAAAAAGLfBQEAAAAAVeDxlZsqNtyYsN4qMmfrrKBDbUM%3DisXeBus50iY7LzBBJBiNXJpyllGkEaVnRNMdLJTvtdHX7MLxQ0';
     async function userdata (username){
-        var url = 'https://api.twitter.com/1.1/users/show.json?screen_name=The_BDav';
+        var url = 'https://api.twitter.com/1.1/users/show.json?screen_name='+ username;
         var request =await fetch(url, {
         method: 'GET',
         headers: {
@@ -80,14 +80,19 @@ app.post('/followerstatspage', function(req, res){
         var response = await request.json()
         //test to make sure the data is coming in correctly
         //        console.log (response);
+        //v ars
+        var friends = response.friends_count;
+        var followers = response.followers_count;
 
-        console.log(response.screen_name);
-        console.log(response.followers_count);
-        console.log(response.friends_count)
+        //console.log(response.screen_name);
+        //console.log(response.followers_count);
+        //console.log(response.friends_count)
+
+        //calcs
         var ratio = (response.friends_count / response.followers_count);
         console.log(ratio);
-        
-        //grab the actual data that we want to display to the end user
+
+        //TODO: grab the actual data that we want to display to the end user
         //which would be :
         //                                      neatly displayed list of followers
         //                                       thier ratio of followers to friends
@@ -95,4 +100,13 @@ app.post('/followerstatspage', function(req, res){
         //                                      maybe longest friends , friends with most followers
 
     }
+    userdata(username);
+
+    res.render('userstats', {
+      username: username,
+      ratio: ratio,
+      friends: friends,
+      followers: followers
+
+    })
 })
diff --git a/public/css/stylesheet.css b/public/css/stylesheet.css
@@ -46,5 +46,9 @@ p {font-size: 16px;}
   color: #222;
 }
 button{
-  color:#222;
+  background-color: #222;
+  border: none;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 5px;
 }
diff --git a/views/index.ejs b/views/index.ejs
@@ -52,17 +52,73 @@
   <p><h4>Check out some live tweets for a certain word or hashtag</h4> </p>
 
   <div align = 'center'>
-<form id = 'input' action = "/sendit" method = "post">
+<script>
+    function openform(){
+      var userstatsform = document .getElementById('streamer');
+      var twitterstream = document.getElementById('stream');
+      var locationtrends = document.getElementById('location');
+      if (userstatsform.style.display === 'none'){
+        userstatsform.style.display= 'block';
+      }else {
+        userstatsform.style.display== 'none';
+      }
+
+
+    }
+</script>
+
+    <div id = "options">
+
+      <span>
+        <button id ="userstats" onclick = 'openform();'>user stats</button>
+        <button id = "stream" onclick = 'openform();'>tweet stream</button>
+        <button id ="location" onlclick = 'openform();'> location trends</button>
+      </span>
+    </div>
+<div id = 'streamer' style = "display: none">
+<form id = 'twitterstream' action = "/sendit" method = "post" >
   <div class="input-group mb-3">
-    <span><input type="text" name = 'tag' class="form-control" placeholder="l0bster..." aria-label="Enter a tag..."  aria-describedby="basic-addon2"></input>
-    <div class="input-group-append" align = 'center'>
+      <div class="input-group-append">
+    <span>
+      <input type="text" name = 'tag' id= 'userstatsform' class="form-control" placeholder="l0bster..." aria-label="Enter a tag..."  aria-describedby="basic-addon2"></input>
+       <!-- <button id = 'submitbutton' class="btn btn-outline-secondary" type="button" value = "Submit">Submit</button> -->
+     </span>
 
-      <span> <button id = 'submitbutton' class="btn btn-outline-secondary" type="button" value = "Submit">Submit</button></span>
+    </div>
+  </div>
+</form>
+</div>
+
+<div id = 'streamer1' style ="display:none">
+<form id = 'userstatsform' action = "/userstatspage" method = "post" style = 'visibility:hidden'>
+  <div class="input-group mb-3">
+      <div class="input-group-append">
+    <span>
+      <input type="text" name = 'tag' class="form-control" placeholder="@twitterdev" aria-label="Enter a username."  aria-describedby="basic-addon2"></input>
+       <!-- <button id = 'submitbutton' class="btn btn-outline-secondary" type="button" value = "Submit">Submit</button> -->
+     </span>
 
+    </div>
   </div>
+</form>
+</div>
+
+<div id = "locations" style = "visibility:  hidden">
+<form id = 'locationtrends' action = "/locationpage" method = "post">
+  <div class="input-group mb-3">
+      <div class="input-group-append">
+    <span>
+      <input type="text" name = 'tag' class="form-control" placeholder="New York City" aria-label="Enter a location..."  aria-describedby="basic-addon2"></input>
+       <!-- <button id = 'submitbutton' class="btn btn-outline-secondary" type="button" value = "Submit">Submit</button> -->
+     </span>
+
+    </div>
   </div>
 </form>
+
+
 </div>
+
 </div>
 
 <!-- Third Container (Grid) -->