How I built a dashboard for the iPad with JavaScript
In this post I’m going to show you how I built a signups counter for the JavaScript Course course, so I can see how many people signed up to the course (signups are open from Nov 15 to Nov 22!)
This counter is a totally superfluous thing, the ones that I do when I’m procrastinating and want to avoid the important work.
I’ve been thinking of different ways to do this, like creating an iOS widget with JavaScript, using Scriptable.
But then I thought, well let’s just make a web page. A web page that I can keep open on the iPad, and I’ll put the iPad next to the desk or somewhere I can look at it from time to time.
I can set the iPad to never put the display to sleep, and I can set the page to automatically refresh every 2 minutes.
The advantage of making a simple web page is that I can access it anywhere. From the iPad, the iPhone, the Mac.
I made a Node.js program that fetches the data I need.
The first step is to write a function that gets the data:
const getData = async () => { return new Promise((resolve, reject) => { let count = 0 //retrieve the count resolve(count) }) }I made it an async function as I use a fetch request, and it’s most likely you’re going to need it too.
If you’re curious, I store all signups into an Airtable record, so inside getData() I put all the code needed to retrieve the count from Airtable.
Then I made a very simple Express server that serves an HTML page that shows the count big, centered in the page:
const express = require('express') const app = express() app.get('/', async (req, res, next) => { const count = await getData() const html = ` <html> <head> <!-- refresh every 2 minutes --> <meta http-equiv="refresh" content="120"> <!-- allow full screen on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <link href="https://fonts.googleapis.com/css2?family=Arvo:wght@400;500;600;700&display=swap" rel="stylesheet" media="all"> <style> html, body { font-family: Arvo,Helvetica,Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Noto Color Emoji,Segoe UI Symbol,Android Emoji,EmojiSymbols,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Noto Sans,sans-serif; margin: 0; font-size: 200px } h1 { display: grid; place-items: center; height: 100vh; } @media (prefers-color-scheme: dark) { body { filter: invert(100%); background-color: #000; } } </style> </head> <body> <h1>${count}</h1> </body> </html> ` res.end(html) }) const listener = app.listen(3000)Here’s the result:
And here’s the same page on the iPhone:
You can run the program locally on your computer and you can access it from devices on the same wi-fi network, as long as the computer is running, or if you prefer you can use a localhost tunnel service, but you can also put this somewhere on the Internet.
I put the app on a server I use for my Node scripts, so I can access it from anywhere, even if I’m on a 4G network.
If I want, I can also AirPlay that on the Apple TV, so I can see the number of signups on the big television screen.
download all my books for free
- javascript handbook
- typescript handbook
- css handbook
- node.js handbook
- astro handbook
- html handbook
- next.js pages router handbook
- alpine.js handbook
- htmx handbook
- react handbook
- sql handbook
- git cheat sheet
- laravel handbook
- express handbook
- swift handbook
- go handbook
- php handbook
- python handbook
- cli handbook
- c handbook
subscribe to my newsletter to get them
Terms: by subscribing to the newsletter you agree the following terms and conditions and privacy policy. The aim of the newsletter is to keep you up to date about new tutorials, new book releases or courses organized by Flavio. If you wish to unsubscribe from the newsletter, you can click the unsubscribe link that's present at the bottom of each email, anytime. I will not communicate/spread/publish or otherwise give away your address. Your email address is the only personal information collected, and it's only collected for the primary purpose of keeping you informed through the newsletter. It's stored in a secure server based in the EU. You can contact Flavio by emailing [email protected]. These terms and conditions are governed by the laws in force in Italy and you unconditionally submit to the jurisdiction of the courts of Italy.