Dashboard

Developer
Anthony Keithley
Size
2,803 Kb
Views
6,072
  1. Dashboard Previews
  2. Dashboard HTML Codes
  3. Dashboard CSS Codes
  4. Dashboard JS Codes

How do I make an dashboard?

What is a dashboard? How do you make a dashboard? This script and codes were developed by Anthony Keithley on 24 December 2022, Saturday.

Dashboard Previews
IQ Test

Dashboard - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>dashboard</title> <script src='http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp'></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Hello! Today is <span id="date"></span></h1>
<br>
<h2><span id="weather"></span></h2>
<br>
<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>
<h3>My Google Maps Demo</h3> <div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"> </script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dashboard - Script Codes CSS Codes

#map { height: 400px; width: 100%; position: fixed; top: 0;
}
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;
}

Dashboard - Script Codes JS Codes

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 = "b2880944de7a9b3fdc9c3f081acebf18"; function success() { var latitude = 37.73249; var longitude = -122.1561; $.getJSON(url + apiKey + "/" + latitude + "," + longitude + "?callback=?", function(data) { weather.text("Based on your current location, it is " + data.currently.temperature + "ºF right now"); }); } success(); weather.text("fetching weather...");
} //Closing loadWeather
loadWeather();
function loadNews() { var news = $("#news"); var url = "https://newsapi.org/v1/articles?source=google-news&sortBy=top&apiKey="; var apiKey = "e48a106b7b204d86ac3c048e48bc9e47"; $.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...");
}
loadNews();
loadDate();
function initMap() { var sanLeandro = {lat: 37.73249, lng: -122.1561}; var oakland = {lat: 37.8044, lng: -122.2711}; var middle = {lat: 37.769345, lng: -122.21355}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: middle }); var markerOne = new google.maps.Marker({ position: sanLeandro, map: map }); var markerTwo = new google.maps.Marker({ position: oakland, map: map });
}
initMap();
Dashboard - Script Codes
Dashboard - Script Codes
Home Page Home
Developer Anthony Keithley
Username KeithleySLHS
Uploaded December 24, 2022
Rating 3
Size 2,803 Kb
Views 6,072
Do you need developer help for Dashboard?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Keithley (KeithleySLHS) Script Codes
Name
Portfolio
Happy Monday
SystemsSolver
CSS Borders
Input and Output Test
News
Organizing Your HTML
Quadratic
TipCalc
My Interests
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!