add files for dashboard project

xeliot · xeliot · commit 8731fdcb4743 · 2018-01-21T20:26:36.000-08:00
diff --git a/dashboard/app.js b/dashboard/app.js
@@ -0,0 +1,52 @@
+function loadDate() {
+  var currentDate = new Date();
+  var dateString = currentDate.toString()
+                     .split(" ")
+                     .splice(0, 4)
+                     .join(" ");
+
+  $("#date").text(dateString);
+}
+
+function loadWeather() {
+  var weather = $("#weather");
+  var url = "https://api.forecast.io/forecast/";
+  var apiKey = "8c3b1be59891dcd2d60a0a88e1b0c0fb";
+
+  function success(position) {
+    var latitude = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    $.getJSON(url + apiKey + "/" + latitude + "," + longitude + "?callback=?", function(data) {
+      weather.text("Based on your current location, it is " + data.currently.temperature + "° F right now");
+    });
+  }
+
+  function error() {
+    alert("Unable to retrieve your location for weather");
+  }
+
+  navigator.geolocation.getCurrentPosition(success, error);
+
+  weather.text("fetching weather...");
+}
+
+function loadNews() {
+  var news = $("#news");
+  var url = "https://newsapi.org/v1/articles?source=google-news&sortBy=top&apiKey=";
+  var apiKey = "c3384798975942aa9b84fac44cbe2c9c";
+
+  $.getJSON(url + apiKey, function(data) {
+    var titles = data.articles.map(function(articles) {
+      return "<a href='" + articles.url + "'>" + articles.title + "</a>";
+    });
+
+    news.html(titles.join("<br><br>"));
+  });
+
+  news.text("fetching news...");
+}
+
+loadDate();
+loadWeather();
+loadNews();
diff --git a/dashboard/index.html b/dashboard/index.html
@@ -1,12 +1,32 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <link rel="stylesheet" href="styles.css"/>
-    </head>
-    <body>
-        <img src="https://github.com/hackclub/dinosaurs/raw/master/smart_dinosaur_docs.png"/>
-        <h1>Prophet Orpheus</h1>
-        <p>Coder Dino</p>
-        <p>Will code for food</p>
-    </body>
+  <head>
+    <title>My Dashboard</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+
+    <h1>Hello! Today is <span id="date"></span></h1>
+    <hr>
+
+    <h2><span id="weather"></span></h2>
+    <hr>
+
+    <h2>Latest news:</h2>
+    <div id="news">
+    </div>
+    <p>Powered by <a href="https://newsapi.org/">NewsAPI</a> and <a href="https://darksky.net/poweredby/">Dark Sky</a></p>
+
+    <script
+        src="https://code.jquery.com/jquery-3.1.1.min.js"
+        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+        crossorigin="anonymous"></script>
+    <script type="text/javascript" src="app.js"></script>
+  </body>
 </html>
diff --git a/dashboard/style.css b/dashboard/style.css
@@ -0,0 +1,25 @@
+html {
+  max-width: 50em;
+  margin: 0 auto;
+  padding: 10px;
+  font-family: Avenir Next, Helvetica, sans-serif;
+}
+
+h1, h2, #news {
+  font-weight: 300;
+}
+
+#news {
+  font-size: 1.5em;
+  line-height: 1.5em;
+}
+
+a {
+  text-decoration: none;
+  color: #000;
+  border-bottom: 2px solid #e42d40;
+}
+
+a:hover {
+  font-style: italic;
+}
diff --git a/dashboard/styles.css b/dashboard/styles.css
