| var refresh=1000; // Refresh rate in milli seconds | |
| mytime=setInterval('display_ct()',refresh); | |
| utc_zone = -5; | |
| utc_adjust = -5; | |
| // get the current timestamp - format the clock readout | |
| function display_ct() { | |
| var strcount | |
| var x = new Date() | |
| var seconds = x.getSeconds(); | |
| var minutes = x.getMinutes(); | |
| var hours = x.getHours(); | |
| var pm = false; | |
| // check if the city is in our timezone, if not make the necessary adjustment | |
| if (utc_zone == -5){ | |
| }else{ | |
| utc_hours = (utc_zone - utc_adjust); | |
| } | |
| var adjusted_hours = (hours + utc_hours); | |
| // check if it is am, pm, or am of the next day | |
| if (adjusted_hours > 12) { | |
| new_hours = (adjusted_hours - 12); | |
| pm = true; | |
| if (adjusted_hours > 24){ | |
| new_hours = (adjusted_hours - 24); | |
| pm = false; | |
| console.log(new_hours); | |
| }else{} | |
| } | |
| else { | |
| new_hours = adjusted_hours; | |
| pm = false; | |
| } | |
| // print formatted date | |
| formatted_time = new_hours+':'+('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2); | |
| document.getElementById('date').innerHTML = formatted_date; | |
| if (adjusted_hours > 12 && adjusted_hours < 24){ | |
| document.getElementById('time').innerHTML = formatted_time + '<span style="padding-left:15px;">PM</span>';} | |
| else{ | |
| document.getElementById('time').innerHTML = formatted_time + '<span style="padding-left:15px;">AM</span>'; | |
| } | |
| tt=display_c(); | |
| } | |
| // refresh clock readout each second | |
| function display_c(){ | |
| var refresh=1000; // Refresh rate in milli seconds | |
| mytime=setTimeout('display_ct()',refresh) | |
| } | |
| // build array for months of the year | |
| var m_names = new Array("January", "February", "March", | |
| "April", "May", "June", "July", "August", "September", | |
| "October", "November", "December"); | |
| // format date readout | |
| var today = new Date(); | |
| var hours = today.getHours(); | |
| var curr_date = today.getDate(); | |
| var curr_month = today.getMonth(); | |
| var curr_year = today.getFullYear(); | |
| // find out if we need to adjust date for utc | |
| if (utc_zone == -5){ | |
| console.log('usa! usa!'); | |
| utc_hours = (utc_zone - utc_adjust); | |
| }else{ | |
| utc_hours = (utc_zone - utc_adjust); | |
| } | |
| var adjusted_hours = (hours + utc_hours); | |
| // create adjustment date | |
| var tomorrow = new Date(today); | |
| var tomorrow_date = tomorrow.getDate() + 1; | |
| var tomorrow_month = tomorrow.getMonth(); | |
| console.log(tomorrow_date); | |
| console.log(adjusted_hours); | |
| // print nicely formatted date | |
| if (adjusted_hours > 24){ | |
| var formatted_date = (m_names[curr_month] + " " + tomorrow_date + "," + " " + curr_year); | |
| } else { | |
| var formatted_date = (m_names[tomorrow_month] + " " + curr_date + "," + " " + curr_year); | |
| } | |
| $(document).ready(function(){ | |
| display_ct(); | |
| }); |
| function jsonFlickrApi (response) { | |
| console.log( | |
| "Got response from Flickr-API with the following photos: %o", | |
| response.photos | |
| ); | |
| //console.log(response.photos.photo.length); | |
| for (i = 1; i < 501; ++i) { | |
| console.log(response.photos.photo[i]); | |
| var item = response.photos.photo[i]; | |
| //build the url of the photo in order to link to it | |
| var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_b.jpg' | |
| //turn the photo id into a variable | |
| var photoID = item.id; | |
| //create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string | |
| var imgCont = '<div class="image-bg hiding colorify" id="' + i + '"style="width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;background-image: url(' + photoURL + ');">'+'</div>'; | |
| //append the 'imgCont' variable to the document | |
| $(imgCont).appendTo('#image-container'); | |
| console.log(i); | |
| } | |
| } | |
| //assign your api key equal to a variable | |
| var apiKey = 'b30dc72750a3f089c77c61f800289a1e'; | |
| //specify tags | |
| var tags ='new%20york%20city'; | |
| //specify number of results | |
| var per_page = '500'; | |
| url = 'https://api.flickr.com/services/rest/?&method=flickr.photos.search&api_key='+ apiKey +'&tags='+ tags +'&format=json&sort=random&per_page='+ per_page +';jsoncallback=?'; | |
| $(function(){ | |
| //the initial json request to flickr | |
| console.log(url); | |
| $.getJSON(url, function(response){ | |
| }); | |
| }); | |
| function makeVisible(){ | |
| var rando = Math.floor((Math.random() * 501) + 1); | |
| //console.log(rando); | |
| var element1 = document.getElementById(rando); | |
| element1.classList.toggle('visible'); | |
| //console.log(element1); | |
| setTimeout(function(){element1.classList.toggle('visible');},4000); | |
| } | |
| var refresh=6000; // Refresh rate in milli seconds | |
| mytime=setInterval('makeVisible()',refresh); | |
| $(document).ready(function(){ | |
| makeVisible(); | |
| }); |
| <html> | |
| <head> | |
| <title>New York</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
| <meta name="author" content="github.com/jamesgarrett"> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script type="text/javascript" src="date.js"></script> | |
| <script type="text/javascript" src="image-loader.js"></script> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
| <meta http-equiv="refresh" content="3600"> <!-- This is the refresh Timer - It resets the page every 3600 seconds, 1 hour --> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="over col-md-4 col-md-offset-4"> | |
| <span id='city'>New York<br></span> | |
| <span id='time' height="50" style="font-size:30px;"></span><br> | |
| <span id='date' height="50" style="font-size:30px;"></span> | |
| </div> | |
| <div class="under"> | |
| <span id="image-container" class="container" colorify-main-color><img src="/" class="colorify" alt=""></span> | |
| </div> | |
| </div> | |
| </body> | |
| <footer> | |
| </footer> | |
| </html> |
An app for keeping time and date based on location
This app is designed to find photos from flickr and display them behind a clock overlay
Features slated for development include
| body{ | |
| margin:0px; | |
| } | |
| .under{ | |
| position:fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index:1; | |
| } | |
| .over { | |
| height: 235px; | |
| top: 50vh; | |
| transform: translateY(-50%); | |
| padding: 45px 0; | |
| margin: 10px auto; | |
| background: rgba(0,0,0,0.6); | |
| text-align: center; | |
| position: absolute; | |
| z-index: 99; | |
| text-align: center; | |
| } | |
| .wrap { | |
| color: white; | |
| background: black; | |
| font-family: 'helveticaneue','helvetica'; | |
| text-transform: uppercase; | |
| display:table; | |
| width:100%; | |
| height:100%; | |
| /*z-index:0;*/ | |
| } | |
| .over h4{ | |
| line-height:1.1rem; | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| padding-top:10px; | |
| font-size: 18px; | |
| letter-spacing: 0.4rem; | |
| } | |
| .over span { | |
| font-size: 32px; | |
| letter-spacing: 0.3rem; | |
| } | |
| #time, #date, #power, #runtime, #countdown, #zeros{ | |
| font-size: 2.5rem; | |
| font-weight:normal; | |
| } | |
| .panel-right{ | |
| width:100%; | |
| } | |
| .hiding{ | |
| visibility:hidden; | |
| } | |
| .visible{ | |
| visibility: visible!important; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| } | |
| span#time > span { | |
| display: inline-block; | |
| } | |
| span#time{ | |
| top:104px; | |
| } | |
| span#date { | |
| top: 165px; | |
| } |