Weather/README.md
Fovway 2d947941b5 modified: .gitignore
modified:   README.md
	modified:   index.html
	new file:   input.css
	new file:   output.css
	modified:   package-lock.json
	modified:   package.json
	new file:   postcss.config.js
	modified:   script.js
	new file:   tailwind.config.js
2025-10-08 12:57:03 +07:00

5.1 KiB
Raw Blame History

Weather App v1.0.0

Приложение для просмотра погоды с интерактивным интерфейсом и поддержкой тем.

Описание

Это веб-приложение отображает текущую погоду, почасовой и недельный прогноз с использованием API WeatherAPI.com. Современный адаптивный интерфейс построен на Tailwind CSS с поддержкой светлой и темной тем.

Функциональность

  • Текущая погода: температура, влажность, скорость ветра, описание условий
  • Таймлапс: почасовой прогноз погоды на день с визуализацией
  • Недельный прогноз: погода на 7 дней вперед
  • Интерактивные графики: температура и осадки с помощью Chart.js
  • Адаптивный дизайн: корректное отображение на всех устройствах
  • Выбор городов: предустановленный список российских городов
  • Система тем: светлая, темная и автоматическая (по системным настройкам)
  • Анимации: плавные переходы и hover-эффекты

Технологии

Backend

  • Node.js v8+ (устаревшая версия, рекомендуется обновить до LTS)
  • Express.js v4.17.1 - веб-сервер

Frontend

  • HTML5 - семантическая разметка
  • JavaScript (Vanilla) - клиентская логика
  • Tailwind CSS v3.4.16 - утилитарный CSS фреймворк
  • PostCSS v8.5.6 - обработка CSS
  • Autoprefixer v10.4.21 - вендорные префиксы

Библиотеки и CDN

  • Lucide Icons - современные SVG иконки
  • Swiper.js v11 - слайдер для таймлапса
  • Chart.js - построение графиков
  • Google Fonts (Inter) - шрифты

Стилизация

  • CSS переменные для тематизации
  • Плавные анимации переходов
  • Цветовые схемы для разных погодных условий

Установка и запуск

Системные требования

  • Node.js v8+ (⚠️ устаревшая версия, рекомендуется использовать LTS версию Node.js 18+)
  • npm для управления пакетами

Установка

  1. Клонируйте репозиторий:

    git clone <repository-url>
    cd weather-app
    
  2. Установите зависимости:

    npm install
    
  3. Соберите CSS (если необходимо):

    npm run build-css
    
  4. Запустите сервер:

    npm start
    
  5. Откройте браузер: Перейдите по адресу http://localhost:3000

Доступные скрипты

  • npm start - запуск сервера разработки
  • npm run build-css - сборка Tailwind CSS из input.css в output.css
  • npm run watch-css - автоматическая пересборка CSS при изменениях

API и внешние сервисы

  • WeatherAPI.com - источник данных о погоде
  • Google Fonts API - загрузка шрифтов Inter
  • CDN сервисы для библиотек JavaScript (jsDelivr, unpkg)

Разработчик

Разработано: Fovway

Контакты:

Рекомендации

Обновление Node.js

Текущая конфигурация требует Node.js v8, но рекомендуется использовать актуальную LTS версию (18+) для повышения безопасности и производительности.

Настройка API ключа

Для полноценной работы приложения необходимо:

  1. Зарегистрироваться на WeatherAPI.com
  2. Получить бесплатный API ключ
  3. Добавить ключ в переменные окружения или конфигурацию сервера(server.js - const API_KEY = "API_KEY_HERE";)

Производительность

  • Приложение использует CDN для внешних библиотек, что обеспечивает быструю загрузку
  • CSS собирается с помощью Tailwind CSS для оптимального размера файлов
  • Используйте npm run watch-css во время разработки для автоматической пересборки стилей

Лицензия

MIT