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