Dashboard

In this example below you will see how to do a Dashboard with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SKT_Jeremiah, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SKT_Jeremiah ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>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">

  
  
      <link rel="stylesheet" href="css/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/" target="_blank">NewsAPI</a> and <a href="https://darksky.net/poweredby/" target="_blank">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>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SKT_Jeremiah/dashboard-rdoXrN */
html {
  max-width: 50em;
  margin: 0 auto;
  padding: 10px;
  font-family: Avenir Next, Helvetica, sans-serif;
}

a {
  text-decoration: none;
  color: #000;
  border-bottom: 2px solid #e42d40;
}

a:hover {
  font-style: italic;
}
h1, h2, #news {
  font-weight: 300;
}

#news {
  font-size: 1.5em;
  line-height: 1.5em;
}


/*Downloaded from https://www.codeseek.co/SKT_Jeremiah/dashboard-rdoXrN */
loadDate();
loadWeather();
loadNews();


function loadDate() {
  var currentDate = new Date(); 
  var dateString = currentDate.toString()
                     .split(" ") 
                     .splice(0, 4) // making the string contain only the first four words
                     .join(" "); 

  $("#date").text(dateString);
}

function loadWeather() {
  var weather = $("#weather");
  var url = "https://api.forecast.io/forecast/"; // Dark Sky API url
  var apiKey = "2293ba0d9946eb42db52495bdfe97a36"; // API key from Dark Sky

  function success(position) {
    var latitude = 37.73249; // latitude for San Leandro
    var longitude = -122.1561; // longitude for San Leandro

    // API request:
    $.getJSON(url + apiKey + "/" + latitude + "," + longitude + "?callback=?", function(data) {
      weather.text("Based on your current location, it is " + data.currently.temperature + "┬░ F right now");
    });
  }

  // This message is displayed if their is a geolocation error:
  function error() {
    alert("Unable to retrieve your location for weather");
  }

  // calling the geolocation API
  navigator.geolocation.getCurrentPosition(success, error);

  // the text that will be displayed while the function is making the request
  weather.text("fetching weather...");
}

function loadNews() {
  var news = $("#news");
  var url = "https://newsapi.org/v1/articles?source=google-news&sortBy=top&apiKey="; // News API url
  var apiKey = "77c43a374f724db589fbbab0acf6fe45"; // API key from News API

  $.getJSON(url + apiKey, function(data) {

    // map() method to call article urls and titles

    var titles = data.articles.map(function(articles) {
      return "<a href='" + articles.url + "'>" + articles.title + "</a>";
    });

     // joining the titles with two line breaks

    news.html(titles.join("<br><br>"));
  });

  // the text that will be displayed while the function is making the request
  news.text("fetching news..."); 
}

Comments