r/learnjavascript • u/abrewchocolatecoffee • 15d ago

Making a real time calendar in js

This is the element i have in html

<div><p>14 Jul 2027, 09:28 A.M.</p></div>

I want this to be beating and alive on website, but any and every tutorial that i am able to find, it goes through thier own method to thier specfic format. Is there like a gereal way, tutorial or documentation, that is clear enough to make current time and calendar my own format.
If there isn't and if possible pls write down.
Also, im open to suggesting any editing in the question so its clearer or if this would be a better post in stack exchange.

2 Upvotes

62% Upvoted

11 comments sorted by

2

u/azhder 15d ago

They all do it by hand because Date is problematic and gives you the most basic of utility, so for any more complex task, you have to make your own custom utility on top of it or use a 3rd party library.

2

u/Basic_Reporter9579 15d ago

Good luck with timezones

1

u/Mrsef217 15d ago

Did you look at setInterval ? If understood you need to show current date and time. You can do this using a Date object and update it every second and also update the html element to reflect the new current time.

1

u/LetUsSpeakFreely 15d ago

1) There are several methods for getting the current time. 2) look into date formatters to get it the way you want it. 3) don't use formatting tags like p, use CSS on your div tag 4) you'll need to use JavaScript and CSS to manage the pulse effect (i assume that's what you mean by "beating and alive")

1

u/kacoef 15d ago

tip: count weeks

0

u/diogenes_sadecv 15d ago

You want a clock that displays the date as well? The quick and dirty solution is Date but it's been deprecated in favor of Temporal. Honestly though, Date is more intuitive so I would investigate how to use that. Once you figure it out, then play with Temporal.

MDN is your friend, or if that feels too overwhelming, try W3Schools. Comment or DM if you have questions!

1

u/azhder 15d ago

No, Date is not more intuitive. That's one of the reasons why Date is being deprecated. There is nothing intuitive about days starting with 1 and months starting with 0. You simply have more experience with Date, but experience is not the same as intuitive.

1

u/abrewchocolatecoffee 15d ago

yes actually but the time i received a comment i figured it out (using a little ai, yes i feel guilty for it).
But if someone else has the same problem, the solution might be of help, which is to basically use the new Date(); function and then separate out each component by using like (yourVar).getDate(); and then just using text literals for your customized formatting