Skip to content

✈️ NYC travel guide with live flight time search & advanced layouts.

Notifications You must be signed in to change notification settings

aniqatc/nyc-travel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

96 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NYC Travel Guide Landing

https://nyc.aniqa.dev/

✈️ A responsive landing page about New York City that serves as a travel guide. Packed with content in different grid and flex layouts along with subtle animations, and content toggling. Utilizes the DistanceTo API to provide flight times and distance to users.

Tech

  • HTML5
  • CSS3
  • JavaScript
  • DistanceTo
  • OpenWeather API

Design

Key Features

Design

  • Widget-based hero section, detailing current time and weather in NYC, flight times to NYC, and menu
  • Fully responsive with a muted color palette
  • Advanced grid and flexbox layouts throughout each section
  • Subtle transitions for button and image hovering
  • Card system inside a scroll container for top destinations

Data

  • Weather data from OpenWeather API
  • Flight times and distance to NYC from the DistanceTo API
  • Text content generated by ChatGPT
  • Hotel and neighborhood information pulled from JSON files compiled by me

Interactive Elements

  • Search 3-letter airport codes to see flight time and distance to NYC
  • Location button uses Geolocation API to calculate flight time and distance to NYC
  • ‘See Map’ button in Top Destinations section toggles an iframe element to show the destination location on a map
  • Hotel guide: toggle between different top hotels to see their respective content

Behind-the-Scenes

  • Set time to New York using Date() object
  • mouseleave and mouseenter events for menu buttons hover styling
  • Set custom icons based on current weather along with appropriate alt attributes
  • Use fetch() API to get render data from APIs
  • localStorage to save last inputted airport
  • Pull content from .json files to render into the DOM
  • Hotel information (picture, name, address, phone, booking link) updated based on the hotel that is selected

About

✈️ NYC travel guide with live flight time search & advanced layouts.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published