Weather App

A simple weather application that shows current temperature for any city with intelligent city name autocomplete.

Features

  • Smart City Search: Auto-complete with city suggestions as you type
  • Accurate Spelling: Helps users find the correct city name and location
  • Keyboard Navigation: Use arrow keys to navigate suggestions, Enter to select, Escape to close
  • Display current temperature in Celsius and Fahrenheit
  • Show additional weather details (humidity, wind speed, conditions)
  • Clean, responsive interface with glassmorphism design
  • Uses Open-Meteo API (no API key required)

Structure

  • backend/index.ts - Main HTTP server with API endpoints
  • frontend/index.html - Main HTML template
  • frontend/index.tsx - React frontend application with autocomplete
  • frontend/style.css - Custom styles including autocomplete dropdown

API Endpoints

  • GET / - Serves the main application
  • GET /api/cities?q={query} - Returns city suggestions for autocomplete
  • GET /api/weather?city={cityName} - Returns weather data for the specified city

Usage

  1. Start typing a city name in the search box
  2. Select from the autocomplete suggestions or continue typing
  3. Click "Get Weather" or press Enter
  4. View the current temperature and weather conditions
  5. Toggle between Celsius and Fahrenheit

Autocomplete Features

  • Shows up to 5 city suggestions as you type
  • Displays city name, state/province, and country
  • Keyboard navigation with arrow keys
  • Click or press Enter to select a suggestion
  • Automatic spelling correction and location disambiguation