JavaScript UTC time format

I was literally going to sit down and do the math and then try to come up with some long (and undoubtedly horrid) JavaScript solution to this! Thank you, Dave! You're the man!

Dave McFarland, Yeah I tired that but it tells me that date that was back then versus the date now in comparison. My console log using your code.

Sat Jan 17 1970 04:54:07 GMT-0600 (Central Standard Time)
application2.js:105 Sat Jan 17 1970 04:55:33 GMT-0600 (Central Standard Time)
application2.js:105 Sat Jan 17 1970 04:57:00 GMT-0600 (Central Standard Time)
application2.js:105 Sat Jan 17 1970 04:58:26 GMT-0600 (Central Standard Time)
application2.js:105 Sat Jan 17 1970 04:59:52 GMT-0600 (Central Standard Time)
application2.js:105 Sat Jan 17 1970 05:01:19 GMT-0600 (Central Standard Time)
application2.js:105 Sat Jan 17 1970 05:02:45 GMT-0600 (Central Standard Time)
application2.js:105 Sat Jan 17 1970 05:04:12 GMT-0600 (Central Standard Time)

get full year returns 1970 for each instance.

@john weland Can you post an example of the data that Forecast.io sends back?

This is the time it send back unformated. I had found a website (calculator) that if I input the milliseconds would tell me the date it will be (all this weeks coming forecast).

application2.js:105 1421647200
application2.js:105 1421733600
application2.js:105 1421820000
application2.js:105 1421906400
application2.js:105 1421992800
application2.js:105 1422079200
application2.js:105 1422165600
application2.js:105 1422252000

this is the JSON I am worried about the 'currently' and the 'daily'. Daily is how I am going to build my weekly forecast.

{
latitude: 37.8267,
longitude: -122.423,
timezone: "America/Los_Angeles",
offset: -8,
currently: {
time: 1421713170,
summary: "Clear",
icon: "clear-day",
nearestStormDistance: 1,
nearestStormBearing: 149,
precipIntensity: 0,
precipProbability: 0,
temperature: 57.78,
apparentTemperature: 57.78,
dewPoint: 48.81,
humidity: 0.72,
windSpeed: 4.36,
windBearing: 321,
visibility: 8.31,
cloudCover: 0.17,
pressure: 1022.76,
ozone: 287.05
},
minutely: {},
hourly: {},
daily: {
summary: "No precipitation throughout the week, with temperatures rising to 65°F on Saturday.",
icon: "clear-day",
data: [
{
time: 1421654400,
summary: "Mostly cloudy throughout the day.",
icon: "partly-cloudy-day",
sunriseTime: 1421681021,
sunsetTime: 1421716759,
moonPhase: 0.97,
precipIntensity: 0.0001,
precipIntensityMax: 0.0008,
precipIntensityMaxTime: 1421690400,
precipProbability: 0.03,
precipType: "rain",
temperatureMin: 52.5,
temperatureMinTime: 1421737200,
temperatureMax: 58.06,
temperatureMaxTime: 1421712000,
apparentTemperatureMin: 52.5,
apparentTemperatureMinTime: 1421737200,
apparentTemperatureMax: 58.06,
apparentTemperatureMaxTime: 1421712000,
dewPoint: 51.16,
humidity: 0.87,
windSpeed: 3.34,
windBearing: 1,
visibility: 7.05,
cloudCover: 0.52,
pressure: 1023.97,
ozone: 282.37
},
{
time: 1421740800,
summary: "Mostly cloudy in the morning.",
icon: "partly-cloudy-day",
sunriseTime: 1421767393,
sunsetTime: 1421803224,
moonPhase: 0.02,
precipIntensity: 0,
precipIntensityMax: 0,
precipProbability: 0,
temperatureMin: 51.23,
temperatureMinTime: 1421766000,
temperatureMax: 58.61,
temperatureMaxTime: 1421794800,
apparentTemperatureMin: 51.23,
apparentTemperatureMinTime: 1421766000,
apparentTemperatureMax: 58.61,
apparentTemperatureMaxTime: 1421794800,
dewPoint: 49.45,
humidity: 0.85,
windSpeed: 4.91,
windBearing: 313,
visibility: 9.1,
cloudCover: 0.5,
pressure: 1019.11,
ozone: 316.64
},
{
time: 1421827200,
summary: "Partly cloudy starting in the evening.",
icon: "partly-cloudy-night",
sunriseTime: 1421853763,
sunsetTime: 1421889690,
moonPhase: 0.05,
precipIntensity: 0,
precipIntensityMax: 0,
precipProbability: 0,
temperatureMin: 50.04,
temperatureMinTime: 1421848800,
temperatureMax: 58.09,
temperatureMaxTime: 1421881200,
apparentTemperatureMin: 50.04,
apparentTemperatureMinTime: 1421848800,
apparentTemperatureMax: 58.09,
apparentTemperatureMaxTime: 1421881200,
dewPoint: 46.95,
humidity: 0.79,
windSpeed: 2.63,
windBearing: 335,
visibility: 10,
cloudCover: 0.16,
pressure: 1018.95,
ozone: 310.23
},
{
time: 1421913600,
summary: "Partly cloudy until evening.",
icon: "partly-cloudy-day",
sunriseTime: 1421940131,
sunsetTime: 1421976155,
moonPhase: 0.08,
precipIntensity: 0,
precipIntensityMax: 0,
precipProbability: 0,
temperatureMin: 49.12,
temperatureMinTime: 1421935200,
temperatureMax: 59.86,
temperatureMaxTime: 1421967600,
apparentTemperatureMin: 47.07,
apparentTemperatureMinTime: 1421935200,
apparentTemperatureMax: 59.86,
apparentTemperatureMaxTime: 1421967600,
dewPoint: 43.49,
humidity: 0.68,
windSpeed: 3.67,
windBearing: 43,
visibility: 10,
cloudCover: 0.39,
pressure: 1023.73,
ozone: 306.62
},
{
time: 1422000000,
summary: "Mostly cloudy overnight.",
icon: "partly-cloudy-night",
sunriseTime: 1422026497,
sunsetTime: 1422062622,
moonPhase: 0.12,
precipIntensity: 0,
precipIntensityMax: 0,
precipProbability: 0,
temperatureMin: 50.11,
temperatureMinTime: 1422021600,
temperatureMax: 61.9,
temperatureMaxTime: 1422054000,
apparentTemperatureMin: 50.11,
apparentTemperatureMinTime: 1422021600,
apparentTemperatureMax: 61.9,
apparentTemperatureMaxTime: 1422054000,
dewPoint: 46.2,
humidity: 0.72,
windSpeed: 0.99,
windBearing: 307,
cloudCover: 0.11,
pressure: 1025.55,
ozone: 290.01
},
{
time: 1422086400,
summary: "Partly cloudy in the morning.",
icon: "partly-cloudy-night",
sunriseTime: 1422112862,
sunsetTime: 1422149088,
moonPhase: 0.16,
precipIntensity: 0,
precipIntensityMax: 0,
precipProbability: 0,
temperatureMin: 50.98,
temperatureMinTime: 1422111600,
temperatureMax: 64.74,
temperatureMaxTime: 1422140400,
apparentTemperatureMin: 50.98,
apparentTemperatureMinTime: 1422111600,
apparentTemperatureMax: 64.74,
apparentTemperatureMaxTime: 1422140400,
dewPoint: 46.69,
humidity: 0.7,
windSpeed: 3.57,
windBearing: 69,
cloudCover: 0.4,
pressure: 1022.31,
ozone: 277.23
},
{
time: 1422172800,
summary: "Clear throughout the day.",
icon: "clear-day",
sunriseTime: 1422199224,
sunsetTime: 1422235555,
moonPhase: 0.2,
precipIntensity: 0,
precipIntensityMax: 0,
precipProbability: 0,
temperatureMin: 52.1,
temperatureMinTime: 1422194400,
temperatureMax: 64.55,
temperatureMaxTime: 1422226800,
apparentTemperatureMin: 52.1,
apparentTemperatureMinTime: 1422194400,
apparentTemperatureMax: 64.55,
apparentTemperatureMaxTime: 1422226800,
dewPoint: 46.66,
humidity: 0.68,
windSpeed: 5.09,
windBearing: 64,
cloudCover: 0.02,
pressure: 1018.61,
ozone: 284.15
},
{
time: 1422259200,
summary: "Mostly cloudy throughout the day.",
icon: "partly-cloudy-night",
sunriseTime: 1422285585,
sunsetTime: 1422322022,
moonPhase: 0.23,
precipIntensity: 0,
precipIntensityMax: 0,
precipProbability: 0,
temperatureMin: 52.95,
temperatureMinTime: 1422280800,
temperatureMax: 62.78,
temperatureMaxTime: 1422313200,
apparentTemperatureMin: 52.95,
apparentTemperatureMinTime: 1422280800,
apparentTemperatureMax: 62.78,
apparentTemperatureMaxTime: 1422313200,
dewPoint: 47.23,
humidity: 0.69,
windSpeed: 3.72,
windBearing: 62,
cloudCover: 0.52,
pressure: 1016.51,
ozone: 299.36
}
]
},
alerts: [],
flags: {}
}

Btw, I will stop running that API code because I just checked out that you can only do up to 1,000 API calls for free. You may wish to delete your code, as well, so that no one else can use your API key.

Marcus Parsons from my original post? yeah I edited it to remove the API, unless you're seeing the key in the JSON I just posted.

Yeah, from your original post. Good deal! I had the entire code copied, but I went ahead and deleted it. I'm just going to watch this conversation now because I'm interested to see how it turns out.

Hi John

I don't know what the time numbers sent from Forecast.io mean. They are off by a magnitude of 3. For example you got this:

1422086400, but a date from this year would look like this

1422086400000

So I don't really know what Forecast.io is sending you.

I don't know either Dave McFarland, I was using http://www.esqsoft.com/javascript_examples/date-to-epoch.htm to check the times and its giving me this weeks dates, but looking at them they seem off.

Dave is absolutely right. All you have to do is multiply the time you are receiving back by 1000 because they are sending you back seconds, not milliseconds. You need a milliseconds representation to get the accurate date.

So instead of using just "this.time" use "this.time * 1000" and you'll get back the correct date. i.e.

var currentDate = new Date(this.time * 1000);
console.log(currentDate.getFullYear());

Awesome I just checked and I am getting back the actual dates, any idea on how to format it ?

 Mon Jan 19 2015 00:00:00 GMT-0600 (Central Standard Time)

to

 Monday 

for example?

Also how can I select two best answers? you guys are amazing. I have SO many grey hair from this thing today!

It was Dave's idea that led to mine, so Dave deserves it for sure! :D

But, you could use the "getDay()" method to extract the current day ( 0 is Sunday, 1 is Monday, and so until Saturday which is 6). Then, make an array filled with what the actual names of the day are like so and append it to whatever you need to:

var currentDate = new Date(this.time * 1000);
var currentDay = currentDate.getDay();

var weekday = new Array(7);
weekday[0]=  "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

console.log("Today is " + weekday[currentDay] + " and isn't it freaking awesome?");

Worked like a charm Marcus Parsons, now I just need to trim the first .each in the loop because its today which I am already using. in data.currently. Dave McFarland I think I am going to go back and REtake the JavaScript and jQuery courses with you and Andrew Chalkley, I still don't think I have a full grasp on it. I get it when people are talking to me and I understand what they say / can follow logically in the conversation but when left to my own devices I draw a blank.

Well I'm just glad to hear I did something useful besides drive up your API calls through the roof! Haha!

I get 1000 a day. Not to worried about it lol.

Well, you have exactly 72 of those left today. You're welcome! Just kidding! lol

Can I trouble you two for one more spot of help?

I am now working on my fiveday forecast and if I go in to my .each() and log to the console

     console.log(week[currentDay]);

it returns "Wednesday" "Thursday" "Friday" "Saturday" "Sunday"

yet when I target my div #fiveDayForecast and try to add in the html it only returns once.

                   var dailyData = data.daily.data;
            $.each(dailyData, function (key, value){
                //4.4 Skip current day and get next 5 days 
                if (key > 0  && key < 6) {
                    var currentDate = new Date(this.time * 1000);
                    var currentDay = currentDate.getDay();
                    var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
                    console.log(weekday[currentDay]);
                    $('#fiveDayForecast').html(
                        '<div>' +
                            '<div>' + weekday[currentDay] + '</div>' +
                            '<div>' + '<img src="img/icons/' + icon + '.png" />' + '</div>' +
                            '<div>' + summary + '</div>' +
                        '</div>'
                    );
                }       
            });

The reason it is only returning once is that the "html" jQuery command replaces the html within the selected element with the given HTML. What you need to do is change the "html" to "append" like so:

r dailyData = data.daily.data;
            $.each(dailyData, function (key, value){
                //4.4 Skip current day and get next 5 days 
                if (key > 0  && key < 6) {
                    var currentDate = new Date(this.time * 1000);
                    var currentDay = currentDate.getDay();
                    var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
                    console.log(weekday[currentDay]);
                   //Changed html to append so that HTML data will be appended to #fiveDayForecast instead of replaced
                    $('#fiveDayForecast').append(
                        '<div>' +
                            '<div>' + weekday[currentDay] + '</div>' +
                            '<div>' + '<img src="img/icons/' + icon + '.png" />' + '</div>' +
                            '<div>' + summary + '</div>' +
                        '</div>'
                    );
                }       
            });

Yeah I just figured that out. Thanks for the quick reply man. Almost done with v1... I already see where I can improve/bug fix some things but its going to be hard as I have to figure out how to do a JavaScript equivalent to select X where Y. and of course I need to clean up the code.

No problem man. If you need any help with anything JavaScript related, you can tag me on here. I'll try to help as best I can.

Only thing I'm not getting is now when I have it write through .each and build my divs instead of my forecast showing "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" right to left its writing "Sunday", "Saturday", "Friday", "Thursday", " Wednesday" left to right. The only thing I can thing it that it is building each div firing it off and building the next and attaching it etc etc.

What is your console showing that "weekday[currentDay]" is? Also, did you modify the order of where these divs come into your page? append always puts data at the very end of the block so that as your each method iterates through each data point, it should be going from the currentDate forward. I also noticed, though, that you are testing whether the key is above 0 or below 6. I have no idea how that works with the API, so that may be where your error is. I haven't had time to dive into that Forecast API.

The api by default outputs today plus 7 days for a total of 8 objects in the array. The if statement just cuts out today and trims after the next 5 objects.

I had to use .insert after() .append() was being a bear with some other html I have in the target container.

I'm guessing you got it working then! Awesome!

No, I am assuming .insertAfte(); is the cause but if I append using .append() to my #fiveDayForecast div it gets put in before my H1 in that div. If I append to the H1 (assumed it would append to the end) it puts it in my H1.

Ah, okay! I'll keep that in mind. Thanks, Dave!

Hey man I don;t know what I was thinking... I'm working a few projects in tandem, I think I might have had the .append() problem else where because its working like a charm today when I tried it again. Also I found a bug today and fixed it. I was passing the zipcode as an int so with a zipcode like 02108 it was passing 2108. because I trim the leading 0. I changed it to a string and it works like a charm now.

Awesome man! I don't know about you, but I love when I figure out the solutions to my own bugs lol I'm glad to hear it's working.

I added in the user input so it first loads with a default zipcode then when the user inputs a zip or location-name it updates and fires again. New problem the .append() in my code for the 5 day forecast jut keeps appending so I have ot find a way to clear out the container and then append. I'm using my Google-fu now.

and DONE, I tried .html(""); and it wasn't working because I called it in my for each loop just before my .append(); so I spoke the code out loud debugging it and realized I was saying foreach clear and append... I move the clear .html() outside of the foreach (before it) and it works. BAM!

10 points for talking to myself.

This looks great John! I found it difficult to discover the zip code form field at the bottom of the screen -- it blended in with the browser's controls. But this is fantastic work!

I see what you mean.

My goals are a revamped UI. I even thought of making various background colors for the current weather. A 'slider' for the fiveDayForecast when in mobile view.

I know I REALLY need to rework the JS, its sloppy. For example I had to nest my call to the forecast.io function in my googleMapsApi function to make them fire in the correct order. Unfortunately this makes it hard to make the google function usable for other stuff because it will call the forecast function. I'm sure I could find a way to build my html as objects and then pass the information I need versus building it all on the fly. All stuff I need guidance on.

Made some minor UI tweaks should be easier to find the user input field and layout a little nicer on mobile. In the long run I think I need to pull away from bootstrap and build a full custom Sass setup. Maybe I'll re watch Guil Hernandez's course where he built Poly UI and make my own version of it with the needed tweaks I need for my setup.

Looking at my nasty JavaScript though, I NEED to clean that up if I want to share it to my portfolio.

I agree. It does look really good! By the way, if you have trouble with contacting him or what not, you can go on this Flaticon.com page and I found some really nifty and totally free icons that you can use in various formats.

Awesome, thanks Marcus Parsons.

That reminds me another thing I want to make work its an icon arrow or compass needle and then use css transforms to rotate that icon based tom the degrees returned for wind direction. 0deg is North 180deg is south etc. I could build some preset directions and apply a class on a given range but I think it would be cooler to actually turn that icon by a single degree. I don't think I can write JavaScript to my external stylesheet so I would have to apply the CSS to the html element itself.

You don't need to write CSS to your external stylesheet because you can apply CSS stylings directly through JavaScript, and this includes keyframes and animations. I think a good way would be to set the keyframes and animations inside of JavaScript. See this page on rhumaric.com about CSS animation and JavaScript.

@Dave McFarland, I just finished your Javascript Basics course. I think I can rewrite some of my functions and clean up some of that mess I made. I wonder if I should have written this in vanilla JavaScript or as I have in jQuery...

Hey hey John! The problem with using jQuery/JavaScript to pump out HTML to the page, is that you have to make sure you have a fallback of markup for those people who have JavaScript turned off on their browsers. If you're using jQuery to pump out some important things such as navigation, input boxes, etc., the user won't be able to see these things if they have JavaScript turned off.

They are few and far between, but they do exist. I don't know if you've dealt with anything like that before, but it's extremely simple to get around. All you have to do is write up the HTML as you would if you were putting it on the page instead of delivering it via jQuery and then put it in between a <noscript></noscript> tag. That's it. That HTML will only be delivered to the page if they have JavaScript turned off.

If you're still talking about your Weather program (which looks brilliant), I would use that <noscript> tag to write something like this because your weather app runs exclusively via JavaScript (but maybe not exactly like this and you'll see why lol):

<noscript>
  <p>This application runs on JavaScript.  So, you should turn on JavaScript you blithering idiot!</p>
</noscript>

Yeah, I figured. Since it requires JavaScript I'm not sure if I ought to have jQuery pump out the HTML that deals with the weather. I'm not sure best practices and performance.

Ah, yes, it would be quicker to have the HTML already set up beforehand and just append the weather data to the DOM, I believe, for the simple fact that you don't have to have JavaScript set a bunch of the same div elements every single time you make a different call to the server. I didn't know if you were still talking about the weather program which is why I mentioned the noscript element.

Btw, I literally just now got your Google Hangouts message from Jan. 19th. My phone went off and said I had a message from you, and that was today...a week later. I don't know if I should be mad at my crappy Android phone or Google's service but for now both will suffice lol

No worries on the hangout message, it happens.

I'm nearing the 'end' on the weather project for now. I want to finish out this iteration and move on to another project to add to the portfolio. I am thinking Andrew Chalkley's shopping list app he build in his JavaScript course, but adding writting JSON as they do in the ember course to make the list persistent.

I wouldn't mind adding categories like "meat", " dairy", etc etc.

You could make the data persistent without using Ember by using the HTML5 local storage.

Oh, some cool features, too, might be to allow the user to set the text size and color of the event on the list so that more important things can be highlighted over standard things. Or perhaps that could just be a checkbox that says "Important?" and makes it bright, giant, and red! lol

Oh no I meant on the ember course the write to JSON. I could do something similar. I've not used local storage before I'll have to learn that.

This article is an excellent article on HTML5 local storage from diveintohtml5.info

http://johnweland.github.io/weather/ well here is the latest. I realize I could maybe change a few things in the mobile view but it works.

It looks great, John, even in mobile view, and it's something you can be proud to put into your portfolio!

Thanks Marcus Parsons. I think tomorrow I might spend a few more minutes and try to wrap up some of the "currently" in a for each loop which should safe about 10 lines of code. Then its off to a new project

I added full screen mode when its added to the home screen of a mobile device. I'm not sure if I like that. while it feels more 'appy' it gets rid of browser controls. While true you can still access the site via browser and get those controls. They can be handy to have.

Thoughts form the user end anyone?

I'd make a new forum post so that more people will see your site and give you feedback on it. Perhaps you could put it under "General Discussion" so that a best answer can't be selected and it won't look like it is "solved" per se.