Dynamic Landing Page | JavaScript







In this project we will build a homepage or landing page with the time that we can interact with and save our name/focus to local storage.

Code:
https://codepen.io/bradtraversy/pen/XLrQvz

Sponsor: Freelancer Bundle (Use “brad25” for 25% off)
https://studywebdevelopment.com/freelancing.html

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
https://www.facebook.com/traversymedia

https://www.instagram.com/traversymedia

28 Comments

Add Yours →

I know it has been a bit slower than usual. I think I may make a video on this, but I am taking some extra time this summer to learn new things so that I can further my reach into things like asp.net for instance There is a ton of stuff I want to get into. So YouTube will be 1-2 videos per week for a little while as oppose to 3-4. I am still working on courses as well.

First…Great tutorial. I was pleased that I was easily able to follow along and understand.
My mind was switching between the ES5 and ES6 syntax you were using. I would prefer if you either stuck with ES6 with arrow functions and maybe just say what it would have been had you used ES5 syntax.

I had a question here. Can we show time based on my operating system time format. For example my system format is 24 hours page should display 24 hours format. If my system is 12 hours format page should display 12 hours format time. Is it possible with JS?

Ok, so first up could I say that this was a decent if somewhat brief tutorial. The more interesting part will be the transferring this into a browser extension. I have to admit I'd have dealt with the functionality in very different ways but that's more an argument of semantics than one of syntax!
However I do have a question, and it's about the method you use to access the <span id="name"> element. In other areas of the code you use document.getElementById, yet in this case you use the direct literal (ie: name.textContent, rather than document.getElementById("name").textContent). You could, of course, argue that this is valid (and it is), however I would suggest it's valid due to legacy (IE) issues coupled with it not the preferred method of accessing elements (gEBI and querySelector would be considered "more appropriate"). What's more you use the string "name" for the identifier for your localStorage property. So not only are you going against the coding pattern you originally adopted you are adding ambiguity in regard to the "name" element (is it an element or a property?).

Did you do this on purpose, or was it just a slip of the keyboard? If it's the former, then why would you? Just for clarity, I'm not out to find fault here, just interested as to why that particular element was accessed differently.

Thanks in advance.

This is way easier using the new Intl API. It takes care of the time based on your locale so EU people like me don't get the AM/PM

const options = {

hour: 'numeric',

minute: 'numeric',

second: 'numeric'

};

setInterval(() => {

time.innerHTML = new Intl.DateTimeFormat('default', options).format(Date.now());

}, 1000);

Leave a Reply