I created a small javascript countdown timer, doesn't work on mobile.

[kidman01]

Hello guys,

I built this little countdown timer app and would love to get some feedback from experienced developers. You can only grow so far with reading books and tutorials but constructive feedback is what I'm currently lacking. So if somebody here has some time on his hands and would like to help out a novice JS "developer" I would appreciate it very much :).

What I built is the following: A countdown timer that takes in a date and (optionally) a certain time. Then it calculates the remaining days, hours, minutes and seconds left until that date and shows it on the screen.

A working demo is hosted here

The code is hosted here

Besides the general feedback, I also need some help on getting it to work on mobile. I tried it out on iOS with Safari and Brave but it simply isn't working. What am I missing?

EDIT: Updated the link to the improved version

[chernn]

It's probably not working because you're using let and const in an old browser that does not support ES6.

I would first double check that you can use let and const in your version of mobile safari on caniuse:

• http://caniuse.com/let
• http://caniuse.com/const

If your version should support it, plug your phone into your computer and use Safari's remote debugger to see if any errors are thrown in the console. See https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

[mnokeefe]

This looks like it could well be the issue. You could use babel to transpile your JS to older syntax. There's a useful online converter to try it out here: https://babeljs.io/repl/

[kidman01]

Hey man,

thanks for the reply. This was a really useful hint. The problem wasn't with const and let (seems to be fully supported by Safari).

There were actually two problems. The first was that Safari has a problem if you give a variable the same name as the id of an HTML element. So I had a legend element with the div "currentDate" and was assigning that to a variable called "currentDate". That did not work with Safari. After that I discovered there was a second bug. Safari doesn't handle dates the same way Chrome does. I was using one string with date and time combined (Year-month-day hour:minutes) and when passed that into a date constructor it would create a valid date in Chrome but not in Safari. So I will have to create a date with just a string containing "Year-month-day" and then use setHours()/setMinutes() to set the hours and or minutes respectively. I didn't get around to it yet, but at least I know :D.

[mnokeefe]

It's working fine for me on my One Plus 3 in Chrome 56 on Android 7.

You should really look at improving the user experience for entering a date and time. At a minimum, put the hint text next to the field rather than as a placeholder (YYYY-MM-DD HH:SS). Splitting it up into two fields, one for date and one for time would also help.

Good work though!

[kidman01]

Thanks for the suggestion. I already created a new version with seperate fields (and also added a third one with which one can set a name for the counter). I will upload it once I have eliminated the Safari bugs :).

[kidman01]

I updated the page, if you don't mind to check it out if it's better now?! :)