aniqa.dev
← Archive06 / 16

Lab noteNo. 06

NYC Travel

A travel guide for New York with live NYC time and weather, flight times from your airport, top destinations and a hotel guide.

Made
Sep 2023
Type
Landing page
Stack
JS / OpenWeather / DistanceTo
Links
Live ↗Code ↗
The NYC Travel landing page: “New York City” over a dark skyline, with cards for the time and weather in New York, a flight time from SFO to JFK, and a flight search bar.
Click the screenshot to open the live sitenyc.aniqa.dev ↗

Why I built it

A guide to my own city, and a reason to put two APIs and more ambitious layouts on one page.

What I learned

  1. Content from JSON: 27 hotels, the neighbourhoods and weather icons load from files I compiled.
  2. Two APIs side by side: weather on page load, flight data on search by airport code or your location.
  3. A live clock in New York time, updated every second.
  4. Many CSS layouts on one page, often nested: grid and flexbox in every section, and a horizontal scroll container for the destinations.

Revisited

  1. Nov 2023: cleaned up the code and moved data fetching to async functions.
  2. Sep 2024: improved the mobile layouts for the neighbourhood and destination cards.