How to make a countdown on iphone

Using just a few lines of JavaScript, you can create a countdown timer application for your iPhone to measure the days or hours before an important event. All you need is a text editor program and a Web server to host the files. The basic JavaScript code, inspired by Dave Taylor for an HTML Web page, is opened using the iPhone's Safari web browser. After modifying the basic page with your own content and formatting, you can then add an icon and a few more lines of code to create a stand-alone application on your iPhone's home screen.

Basic Code

1.

Launch a basic text editor or HTML editor. Type the following code into a new blank document to create a header containing the JavaScript for a basic countdown timer:


2.

Replace "10 January, 2020" with any date you wish to use as the target countdown date. To have the countdown shown in days instead of hours, replace "(6060)" with "(6060*24)" in the hoursLeft line.


3.

Type the following code beneath the header to create the text for the timer:
Countdown ends in 11268 hours.


4.

Save the file as a basic text file with an ".html" extension, such as "timer.html." Upload the file to a Web server, and then test this basic countdown timer using Safari on any iPhone. You can add additional code and content to dress up this basic application.

Creating an Offline Application

1.

Select an image to use as your application icon or create your own using any graphic design program. Save the image as a PNG file that is 114 by 114 pixels in size, with a file name such as "time-icon.png." Upload the image to the same directory as your timer.html file.


2.

Create a new text file in Notepad and type these three lines in the file:

CACHE MANIFEST CACHE timer.html

Save the file as "manifest" in plain text format without a file extension. Include any other files, such as CSS or JavaScript files, that you use to modify the application. This tells the iPhone which files to save into cache so the application is accessible offline. Upload this file to the same folder as your timer.html file on the Web server.


3.

Locate the ".htaccess" file in the root folder of your Web server. Type "AddType text/cache-manifest .manifest" as a new line in the file. This tells the iPhone where the manifest file is located.


4.

Type the following lines of code above the "" tag in the timer.html file:

These two lines will tell the iPhone where the icon and manifest file are located.


5.

Navigate to the timer.html file using Safari on an iPhone. Click the "Send" icon at the bottom of the screen, and then select "Add to Home Screen." The iPhone saves the icon on the iPhone home screen and stores the relevant files into cache so you can access it offline at any time.

Share this post