final ver

README.md

@@ -1 +1,22 @@
-Instanews is a great way to look at news from the NEW York Times top stories API.
+# Project#2-Instanews
+
+Instanews is a great way to look at news from the NEW York Times top stories API. It will allow users to select from several news categories and display the top stories. Only 12 articles with a photo will be displayed at once.
+
+## Getting Started
+
+These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
+
+## Built With
+
+Javascript
+Jquery
+Ajax
+Scss
+
+## Author
+
+- Victor Guo
+
+## Acknowledgments
+
+- Everyone in WEBDEV_is_DOPE!

index.html

@@ -11,7 +11,7 @@
   <!-- jQuery CDN -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <!-- Selectric -->
-  <script src="./lcdsantos-jQuery-Selectric-0b92c26/src/jquery.selectric.js"></script>
+  <script async src="./lcdsantos-jQuery-Selectric-0b92c26/src/jquery.selectric.js"></script>
   <!-- My Script -->
   <script src="./build/js/script.min.js"></script>
   <!-- Selectric stylesheet -->
@@ -47,6 +47,8 @@ <h3>Choose A Selection</h3>
   <footer>
     <h4>&copy;Copyright 2019 INSTANEWS</h4>
   </footer>
+
+
 </body>
 
 </html>

js/script copy.js

@@ -0,0 +1,76 @@
+$(document).ready(function() {
+  //Selectric
+  $(function() {
+    $('select').selectric();
+  });
+
+  $('#select-section').on('change', function() {
+    $('.list').empty();
+    $('.load').append(
+      '<img class="loadingIcon" src="./Images/assets/ajax-loader.gif">'
+    );
+
+    $('header').addClass('mininav');
+
+    let userinput = $(this).val();
+    console.log(userinput);
+
+    sayHello(userinput);
+
+    if (userinput == 'sections') {
+      // alert('dont select home dumbass!');
+      // console.log('hihi');
+    }
+    let url =
+      'https://api.nytimes.com/svc/topstories/v2/' + userinput + '.json';
+    url +=
+      '?' +
+      $.param({
+        'api-key': 'e9a1e979e8aa462e9143ac6fbdaa8557'
+      });
+
+    $.ajax({
+      method: 'GET',
+      url: url,
+      dataType: 'JSON'
+    })
+
+      .always(function() {
+        $('.load').remove();
+      })
+
+      .done(function(data) {
+        const filteredResults = data.results
+          .filter(function(value) {
+            //     console.log(data.results.multimedia[4]);
+            return value.multimedia.length > 1;
+          })
+          .slice(0, 12);
+
+        // filtering through the data.results Array, and if any object within calle multimedia has more than 0 items in it we
+        // return that object. the slice is chained to it, saying we only want 12 results.
+
+        $.each(filteredResults, function(key, value) {
+          // console.log();
+
+          $('.list').append(
+            ' <li style="background-image: url(' +
+              value.multimedia[4].url +
+              ');background-size:cover;background-position: 50%;"><a target="_blank" href="' +
+              value.url +
+              '"><p class="newstext">' +
+              value.abstract +
+              '</p></a></li>'
+          );
+        });
+      })
+
+      .fail(function() {
+        console.log('fail');
+      });
+  });
+
+  function sayHello(cat) {
+    alert(cat);
+  }
+}); // end doc ready

js/script.js

@@ -15,10 +15,10 @@ $(document).ready(function() {
     let userinput = $(this).val();
     console.log(userinput);
 
-    sayHello(userinput);
+    // sayHello(userinput);
 
     if (userinput == 'sections') {
-      // alert('dont select home dumbass!');
+      alert('Not sure what you want to read? try Sports');
       // console.log('hihi');
     }
     let url =
@@ -70,7 +70,9 @@ $(document).ready(function() {
       });
   });
 
-  function sayHello(cat) {
-    alert(cat);
-  }
+  // function sayHello(userSelection) {
+  //   if (userinput == 'sections') {
+  //     alert('cannot make selection?');
+  //   }
+  // }
 }); // end doc ready

scss/partials/_list.scss

@@ -48,3 +48,5 @@
     }
   }
 }
+
+

scss/partials/_mininav.scss

@@ -36,7 +36,8 @@
       margin-top: 0;
     }
     @include desktop {
-      width: 20%;
+      width: 35%;
+      margin-left: 0;
     }
   }
 }