In this workshop we’ll build and design a real-time interface—a window into a location, showing its current time, weather, and a camera view. Instead of writing code ourselves, we’ll describe what we're imagining in plain language, and work with AI to create it.
Title
Currently…
Clock
14:32:07
Camera
[live view]
Weather
12°C Cloudy
1
Setup
Install Cursor
Download and install from cursor.com if you don't have it yet.
Open Cursor
Launch Cursor — it's a code editor with a built-in AI agent. You can get started for free, but if interested you can apply for a student account.
Install Live Preview
This shows your HTML updating in real-time inside the editor.
- Cmd+Shift+X to open Extensions
- Search Live Preview by Microsoft
- Click Install
Create your project
- Create a folder called
currently-somewhere
- In Cursor: File → Open Folder → select it
- Create a new file:
index.html
Open the preview
- Open
index.html
- Cmd+Shift+P → type Live Preview → select Show Preview
You now have three panels: your file, the preview, and the AI chat.
2
Initial Prompt
Open the AI chat (Cmd+L) and paste this:
Initial Prompt
Create a page in 4 quadrants. The overall container is full viewport width and height. Make each quadrant background a different shade of gray. Use 16px Arial regular as the only font, in black, aligned to the top left of each quadrant. In the top-left quadrant is the text "Currently Somewhere", in top-right is a digital clock showing the time 00:00:00 (placeholder for now), in bottom-left is this image as object-cover (https://workshop-princeton.observingtime.cam/assets/clouds.jpg), in bottom-right is the current weather (placeholder for now). The project should be a self-contained HTML file.
Accept the changes. Save (Cmd+S). You just described an interface in a sentence.
3
Choose a Place
The US National Parks Service maintains a collection of webcams for monitoring air quality. Choose one of these cameras to build your interface around.
View the cameras on a map or the list of the cameras are below:
Prompt Idea
Replace "Currently Somewhere" with "Currently [PLACE NAME]" in the top-left quadrant. Also update the html page title.
4
Clock
The clock currently shows a placeholder time. Make it reflect the current time where your place is:
Prompt Idea
Turn the placeholder time into a digital clock reflecting the current time in [PLACE NAME]
- You may need to add the timezone
- You can make it a 12 hour clock with am and pm
5
Weather
Replace the placeholder weather with real data from the OpenWeather API (openweathermap.org):
Prompt Idea
Replace the placeholder weather with the current weather from [PLACE NAME]. Use the OpenWeather API. Use this API key: 53ff53b5be52c2b3e83aeb82762cb512. Show the temperature, weather description (e.g. sunny, cloudy, rainy), and wind speed. Update every 5 minutes. Keep everything in a single HTML file.
- You may need to look up the latitude and longitude
6
Camera
Replace the cloud photo with the live air quality camera view for your location:
Prompt Idea
Replace the static cloud image with a live webcam feed. Load the image from [WEBCAM URL] and auto-refresh it every 30 seconds so it stays current. Keep filling the quadrant.
7
Expand
Once the basic functionality is in, consider the typography and other elements you can expand upon.
Choose a single Google Fonts typeface for your project. Try adding to your prompt:
Prompt Idea
Replace Arial with the Google Font "[FONT NAME]" for all text on the page
Explore
Try these prompt directions, combine them, or invent your own.
- "Change the background colors based on whether it's day or night at the location."
- "Make the weather quadrant's background shift from cool blue to warm orange with temperature."
- "Add a gradient overlay on the camera that gets darker at nighttime."
- "Use only black and white. No grays."
- "Make 'Currently Somewhere' as large as possible, filling the top-left quadrant."
- "Show the temperature as a single enormous number filling the weather quadrant."
- "Add latitude and longitude as small text in each quadrant corner."
- "Add a slow pulsing animation to the clock's colon separator."
- "Turn the digital clock into an analog clock using css transforms."
- "Add a thin line at the bottom of the clock quadrant that fills over each minute, then resets."
- "Slowly rotate the background hue over 60 seconds."
- "Visualize the current weather type with a simple css animation."
- "Visualize rain as animated characters falling across the weather quadrant."
- "Draw wind as thin horizontal lines moving at the actual wind speed."
- "If it's cloudy, apply a CSS blur to the camera image."
- "If it's cloudy, apply a CSS blur to the entire page."
8
Submit
- Save your file as
index.html.
- In this workshop page, click Log in in the top right.
- Upload that file in the right panel.
- Add your location name and click Save.
- Open your submitted card to confirm everything loads correctly.
- You can replace your file with a new one at any time.