🚀 JavaScript Universe

Интерактивная среда разработки для TypeScript и JavaScript с подсветкой синтаксиса.

✨ Особенности

• 🌐 Универсальный язык: Поддержка TypeScript и JavaScript в едином режиме
• 🎨 Подсветка синтаксиса: Красивая подсветка кода с темой Monokai
• ⚡ Автоматический запуск: Код выполняется автоматически при изменении
• 🔍 Отображение ошибок: Подробная информация об ошибках TypeScript с указанием строки
• 📱 Адаптивный дизайн: Полная поддержка мобильных устройств и планшетов
• 🌙 Космическая тема: Современный темный интерфейс

📱 Адаптивность

Проект полностью адаптирован для различных устройств:

• 🖥️ Десктоп: Полнофункциональный интерфейс с большими областями редактирования
• 📱 Мобильные устройства: Оптимизированный интерфейс с вертикальным расположением элементов
• 📟 Планшеты: Адаптированный дизайн для средних экранов
• 🔄 Поворот экрана: Автоматическая адаптация при смене ориентации

Поддерживаемые разрешения:

• Мобильные: 320px - 768px
• Планшеты: 769px - 1024px
• Десктоп: 1025px+

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

Редактор кода

• Подсветка синтаксиса TypeScript/JavaScript
• Нумерация строк
• Автоматическое завершение строк
• Темная тема Monokai

Выполнение кода

• Автоматическая компиляция TypeScript
• Безопасное выполнение в песочнице
• Перехват console.log и console.error
• Отображение результатов в реальном времени

Отображение ошибок

• Подробная диагностика TypeScript
• Указание строки и символа ошибки
• Цветовое кодирование типов ошибок
• Иконки для быстрой идентификации

🛠️ Быстрый старт

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

   git clone [url-репозитория]
   cd JavaScript-Universe-Code

2. Откройте index.html

   • В браузере или через локальный сервер

3. Начните писать код

   • Используйте TypeScript или JavaScript
   • Код выполняется автоматически

4. Наслаждайтесь подсветкой синтаксиса

   • Красивая подсветка ключевых слов
   • Цветовое кодирование типов
   • Подсветка строк и комментариев

📝 Примеры использования

Базовый TypeScript

interface User {
    name: string;
    age: number;
}

const user: User = {
    name: "Иван",
    age: 25
};

console.log(user);

Работа с массивами

const numbers: number[] = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled);

Асинхронные функции

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Ошибка:', error);
    }
}

🎯 Технологии

• HTML5: Семантическая разметка
• CSS3: Адаптивные стили и анимации
• JavaScript ES6+: Современный JavaScript
• TypeScript: Типизированный JavaScript
• CodeMirror: Редактор кода
• Monokai: Темная тема

📱 Мобильная оптимизация

• Сенсорная поддержка: Оптимизировано для касаний
• Предотвращение зума: Настроено для предотвращения случайного масштабирования
• Адаптивные кнопки: Увеличенные области касания на мобильных
• Оптимизированные шрифты: Читаемые размеры на всех устройствах
• Горизонтальная прокрутка: Поддержка ландшафтной ориентации

🔧 Настройка

Проект не требует установки зависимостей - все библиотеки загружаются через CDN.

Локальная разработка

# Запуск через Python
python -m http.server 8000

# Запуск через Node.js
npx serve .

# Запуск через PHP
php -S localhost:8000

📄 Лицензия

MIT License - свободное использование и модификация.

---

Создано с ❤️ для изучения JavaScript и TypeScript