Airbnb Listings Viewer

A web application that dynamically loads and displays the first 50 Airbnb listings from a local JSON file using AJAX (fetch and await).

Deployment

Link to Live Site

How to run locally

Due to browser security restrictions (CORS) regarding AJAX fetch requests for local files, simply double-clicking index.html may result in a console error. To run this project locally, you must serve it through a local web server.

• Using Python: python3 -m http.server
• Using Node: npx http-server Then navigate to http://localhost:8000 (or the provided port) in your browser.

Features

• AJAX Fetching: Loads data asynchronously using modern fetch / await JavaScript syntax from the airbnb_sf_listings_500.json file.
• Listing Data: Displays the listing name, description, amenities, host (name and photo), price, and thumbnail as required by the assignment prompt.
• Creative Additions:
  • Dark Mode Toggle: Users can switch between light and dark themes using CSS variables.
  • Live Search: Users can instantly filter the 50 listings by name or description.
  • Responsive Grid & CSS Animations: Uses modern CSS Grid and hover animations to display properties in beautiful cards.