Skip to content

Commit 9b5fd7b

Browse files
author
nickwhite
committed
first commit
0 parents  commit 9b5fd7b

4 files changed

Lines changed: 2146 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# JavaScript & TypeScript Playground
2+
3+
Интерактивная веб-платформа для написания и выполнения кода на JavaScript и TypeScript в браузере.
4+
5+
## Возможности
6+
7+
- ✨ **Поддержка JavaScript и TypeScript** - переключение между языками
8+
- 🎨 **Современный интерфейс** - красивый дизайн с подсветкой синтаксиса
9+
- 🔧 **Редактор кода** - CodeMirror с автодополнением и подсветкой
10+
- 📤 **Вывод результатов** - отображение console.log, ошибок и предупреждений
11+
- 🛡️ **Безопасное выполнение** - код выполняется в песочнице
12+
- ⌨️ **Горячие клавиши** - Ctrl+Enter для быстрого запуска
13+
- 📱 **Адаптивный дизайн** - работает на всех устройствах
14+
15+
## Использование
16+
17+
1. Откройте `index.html` в браузере
18+
2. Выберите язык программирования (JavaScript или TypeScript)
19+
3. Напишите код в редакторе
20+
4. Нажмите "Запустить" или Ctrl+Enter
21+
5. Результаты появятся в правой панели
22+
23+
## Примеры кода
24+
25+
### JavaScript
26+
```javascript
27+
console.log('Привет, мир!');
28+
29+
const numbers = [1, 2, 3, 4, 5];
30+
const doubled = numbers.map(n => n * 2);
31+
console.log('Удвоенные числа:', doubled);
32+
```
33+
34+
### TypeScript
35+
```typescript
36+
interface User {
37+
id: number;
38+
name: string;
39+
email: string;
40+
}
41+
42+
class UserService {
43+
private users: User[] = [];
44+
45+
addUser(user: User): void {
46+
this.users.push(user);
47+
console.log('Пользователь добавлен:', user);
48+
}
49+
}
50+
```
51+
52+
## Технологии
53+
54+
- **HTML5** - структура страницы
55+
- **CSS3** - стили и анимации
56+
- **JavaScript ES6+** - основная логика
57+
- **CodeMirror** - редактор кода
58+
- **TypeScript Compiler API** - компиляция TypeScript
59+
60+
## Безопасность
61+
62+
- Код выполняется в изолированной песочнице
63+
- Ограниченный доступ к API браузера
64+
- Защита от вредоносного кода
65+
66+
## Запуск
67+
68+
Просто откройте `index.html` в любом современном браузере. Никаких дополнительных зависимостей не требуется - все библиотеки загружаются через CDN.
69+
70+
## Лицензия
71+
72+
MIT License

‎index.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>🚀 JavaScript Universe</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/show-hint.css">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/lint/lint.css">
12+
</head>
13+
<body>
14+
<div class="container">
15+
<header class="cosmic-header">
16+
<div class="stars-bg"></div>
17+
<div class="header-content">
18+
<div class="title-section">
19+
<div class="logo">
20+
<div class="planet"></div>
21+
<div class="orbit"></div>
22+
<div class="satellite"></div>
23+
</div>
24+
<h1>JavaScript Universe</h1>
25+
</div>
26+
<div class="controls">
27+
<!-- <div class="language-selector">
28+
<label>🌍 Язык:</label>
29+
<select id="languageSelect" class="cosmic-select">
30+
<option value="javascript">📜 JavaScript</option>
31+
<option value="typescript">📘 TypeScript</option>
32+
</select>
33+
</div> -->
34+
<div class="action-buttons">
35+
<button id="runBtn" class="cosmic-btn primary">
36+
<span class="btn-icon">🚀</span>
37+
<span class="btn-text">Запустить</span>
38+
</button>
39+
<button id="clearBtn" class="cosmic-btn secondary">
40+
<span class="btn-icon">🗑</span>
41+
<span class="btn-text">Очистить</span>
42+
</button>
43+
</div>
44+
<div class="auto-run-toggle">
45+
<label class="toggle-switch">
46+
<input type="checkbox" id="autoRunToggle" checked>
47+
<span class="slider"></span>
48+
<span class="toggle-label">🔄 Автозапуск</span>
49+
</label>
50+
</div>
51+
</div>
52+
</div>
53+
</header>
54+
55+
<main class="cosmic-main">
56+
<div class="editor-section cosmic-panel">
57+
<div class="panel-glow"></div>
58+
<div class="editor-header">
59+
<h3>🌌 Редактор кода</h3>
60+
</div>
61+
<div class="editor-container">
62+
<textarea id="codeEditor"></textarea>
63+
</div>
64+
</div>
65+
66+
<div class="output-section cosmic-panel">
67+
<div class="panel-glow"></div>
68+
<div class="output-header">
69+
<h3>🌟 Результат выполнения</h3>
70+
<button id="clearOutputBtn" class="cosmic-btn secondary">
71+
<span class="btn-icon">🗑</span>
72+
<span class="btn-text">Очистить</span>
73+
</button>
74+
</div>
75+
<div id="output" class="output-area">
76+
</div>
77+
</div>
78+
</main>
79+
</div>
80+
81+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
82+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
83+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/typescript/typescript.min.js"></script>
84+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/show-hint.js"></script>
85+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/javascript-hint.js"></script>
86+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/anyword-hint.js"></script>
87+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/closebrackets.js"></script>
88+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/matchbrackets.js"></script>
89+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/lint/lint.js"></script>
90+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/lint/javascript-lint.js"></script>
91+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/selection/active-line.js"></script>
92+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/trailingspace.js"></script>
93+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/mode/simple.js"></script>
94+
<script src="https://unpkg.com/typescript@latest/lib/typescript.js"></script>
95+
<script src="script.js"></script>
96+
</body>
97+
</html>

0 commit comments

Comments
 (0)