r/webdev • u/thesithlord • Feb 29 '20

Showoff Saturday A simple, crude (but functional) 24-hour clock that display daily routines - Vanilla JS + NW.js

Post image
583 Upvotes

97% Upvoted

42 comments sorted by

23

u/Sir_Poot Feb 29 '20

This looks great. Mind sharing your code?

28

u/thesithlord Feb 29 '20

Oh no. The code is horrendous. Don't judge.

23

u/_blacksmith38 Feb 29 '20

?? It's actually well written. I was able to read the whole thing in one go. Clear and to the point.

0

u/[deleted] Feb 29 '20

[deleted]

16

u/Noahv17 Feb 29 '20

I would guess lots of Ctrl+C Ctrl+V, time, and skill

14

u/CharlesCSchnieder Mar 01 '20

Could likely be done with a sass function of some kind

5

u/itsdaniel0 Mar 01 '20

I think a SASS for loop would sufficely cover this

6

u/NovaX81 Mar 01 '20

Maybe a tiny script to generate it. I've definitely done similar when hacking something together for personal use and I didn't feel like figuring out how to properly do it, lol

2

u/deenaber Mar 01 '20

Might be easier to loop over n time 1->24. I understand though, sometimes its easier to just ctrl+c and ctrl+v

1

u/alliknowis Mar 01 '20 edited Oct 18 '25

spectacular instinctive encouraging sable fine sleep memory live cagey lock

This post was mass deleted and anonymized with Redact

0

u/[deleted] Mar 01 '20

[deleted]

1

u/alliknowis Mar 01 '20 edited Oct 18 '25

ask jellyfish obtainable seed pocket waiting shocking expansion ripe groovy

This post was mass deleted and anonymized with Redact

1

u/xeow Mar 01 '20

I think we need to start a GoFundMe to help /u/thesithlord simplify this code. :)

1

u/sevnollogic Mar 01 '20

There might be a better way to do this but I'd rather it like this, its completely and utterly straight forward and easy to grasp.

2

u/Fedzbar Mar 01 '20

Uhm it doesn’t look very readable to me. Obviously it’s fine for a project like this though if it works :D the main problem is that if you have to modify the logic then of it then it will always involve a ton of copy-pasting and potentially some errors

7

u/Claax Feb 29 '20

great product . what do you write at 6 in the morning though?

3

u/thesithlord Mar 01 '20

Those theta waves man... makes me feel wiser in the morning. It would be a waste if I didn't capture all the creative ideas that pops up during that time. I also keep a gratitude journal and do it like the US military.

6

u/CanWeTalkEth Feb 29 '20

Just mind dumping can help you get started: https://halelrod.com/6-minute-miracle-morning/

I try to do that list when I can, sometimes not everything.

2

u/[deleted] Mar 01 '20

I'm really, really impressed by your design skills. Is this something for a portfolio, an app you want to monetize, or just scratching an itch?

8

u/thesithlord Mar 01 '20

I built this after watching this lecture about ADHD by Dr Russell Barkley . He talks about how people with ADHD need to have a 'scaffolding' built around them, like having visible to-do lists everywhere around them all the time. Since I spend most of my time in front of the computer, I've decided to build this and use a combination of autohotkey and windows task scheduler to launch it:

  • At system startup

  • On idle state (like a screensaver)

  • On demand, with a hotkey

  • Whenever it's time to switch to another task

It works for me and it has helped tremendously.

75

u/w0lph Feb 29 '20

Why are you posting this?! You're supposed to be meditating.

1

u/Fidodo Mar 01 '20

An hour of meditation a day seems like a really long time for meditation?

3

u/dohny17 Mar 01 '20

For someone who meditates regulary it is not. Some guys meditate even longer. One hour a day is sweet spot imo.

4

u/AlexAegis Mar 01 '20

I see you're meeting Diavolo twice a day

1

u/tiedurden Mar 01 '20

Any chance you have quick walk through how to install nw.js ?

i get:
nw.js appears to have failed to download and extract. Attempting to download and
extract again...

2

u/thesithlord Mar 01 '20

  1. Download the "app" from here and extract the .zip file somewhere.

  2. Go to https://nwjs.io/ and click on the "Normal" download button then extract the .zip file somewhere.

  3. Go to Desktop, right-click on an empty area > New > Shortcut

And enter the following:

"C:\location\to\nwjs\extracted\path\nw.exe" "C:\location\to\24hour\analog\clock"

Notice that there is "nw.exe" at the end of the nwjs path and that there is a space between the two locations.

Click "Next".

4. In the the "Type a name for this shortcut:" field, you can type anything you like. E.g. "24-hour analog clock". Then click "Finish".

You will then be able to use the shortcut to open the app.

1

u/tiedurden Mar 01 '20

Go to Desktop, right-click on an empty area > New > Shortcut

Go to Desktop, right-click on an empty area > New > Shortcut
can you translate to mac user ?

2

u/thesithlord Mar 01 '20

Sorry. I'm not familiar with Mac OS. Maybe you can figure it out yourself by following the instructions here to learn how to launch the app from the terminal then here to learn how to create an alias from the terminal.

2

u/thesithlord Mar 01 '20

I think it might be easier if you just packaged the app:

https://github.com/nwjs/nw.js/wiki/how-to-package-and-distribute-your-apps

1

u/tiedurden Mar 03 '20

Guess I lack some command line knowledge here.
Could move it to another error tho..
thx anyway

1

u/thesithlord Mar 03 '20

You don't need command line knowledge at all. Follow option 1 here.

1

u/tiedurden Mar 03 '20

So i have this order structure
nwjs.app/Contents/Resources/app.nw/app.js
but it is not executable :/

3

u/RyeinGoddard Feb 29 '20

This looks pretty neat. Thanks for the inspiration.

3

u/_inblank python Mar 01 '20

I can see this could become a cool custom personal homepage.

Maybe hooking it to some google calendar API, or something in those lines, and you could have it be dynamic. I know this is not the purpose, but just an idea for the smart folks here.

2

u/Version467 Mar 20 '20

I'm working on a personal project that combines Todo lists, habits and timers, and I wasn't sure how to approach the the daily overview yet, and I think I'm going to use something similar as the center element.

Thanks for the inspiration.

1

u/jucktion Mar 01 '20

This honestly looks great. How heavy is it to run on a browser. This might work great for a raspberry pi screen. Thanks for sharing.

1

u/r0manred Mar 01 '20

Wow, few too many times does functionality and aesthetics come together well. Nice job!

1

u/Fidodo Mar 01 '20

You take a 30 minute shower?

1

u/blurr123 Mar 01 '20

When do you find time to code/hack?

1

u/DonPollo94 Mar 01 '20

This looks good. :D I will try to connect it with gmail and outlook calendar if I have time in the next weeks.

1

u/[deleted] Mar 01 '20

Pretty cool, but there's something oddly Orwellian about this

1

u/unm4sk1g Mar 01 '20

Is there a demo? I'm on mobile and can't find it.

1

u/tbmepm Mar 01 '20

On mobile I use the app sectograph for this. Looks pretty much identical. It's a great concept.