25 Готовых программ на JavaScript для Middle-разработчиков - UPROGER

JavaScript — это один из самых популярных языков программирования, который используется для создания широкого спектра приложений: от веб-сайтов до серверных решений. Для middle-разработчиков, которые уже знакомы с основами, важно не только углубить свои знания, но и развивать практические навыки, создавая проекты с использованием различных технологий.

В этой статье мы собрали 25 Готовых программ на JavaScript для Middle-разработчиков, которые помогут улучшить навыки и продемонстрировать вам, как эффективно решать различные задачи, как с помощью Vanilla JS, так и с использованием популярных фреймворков. Сначала идет описание проектов, а после код, на случай, если вы хотите сделать проекты самостоятельно.

1. Калькулятор (Vanilla JS)

Простой калькулятор, который может выполнять базовые арифметические операции. Такой проект помогает освоить работу с событиями, DOM и простыми математическими вычислениями.

Что можно улучшить:

Добавить поддержку более сложных операций (например, скобки или степень).
Реализовать историю вычислений.

2. Чат на WebSockets

Используйте WebSockets для создания чат-приложения, которое позволяет обмениваться сообщениями в реальном времени. Приложение может работать как на клиентской, так и на серверной стороне с помощью Node.js.

Что можно улучшить:

Добавить систему аутентификации.
Реализовать шифрование сообщений.

3. To-Do List с использованием LocalStorage

Создайте приложение для управления задачами, где данные сохраняются в браузере с помощью localStorage. Включите возможность добавления, редактирования и удаления задач.

Что можно улучшить:

Использовать внешнюю базу данных через API.
Реализовать сортировку задач по приоритету или срокам.

4. Галерея изображений с API

Используйте API для загрузки изображений (например, Unsplash API) и создайте галерею, в которой пользователи могут просматривать изображения, фильтровать их по категориям и теги.

Что можно улучшить:

Добавить функцию поиска.
Реализовать бесконечную прокрутку (infinite scroll).

5. Магазин с корзиной покупок

Простой интернет-магазин с возможностью добавления товаров в корзину, подсчета общей суммы и оформления заказа. Это поможет научиться работать с состоянием приложения и взаимодействовать с DOM.

Что можно улучшить:

Реализовать авторизацию пользователей.
Добавить функциональность для обработки платежей.

6. Таймер Pomodoro

Реализуйте приложение, которое будет следить за временем в рамках методики Pomodoro (25 минут работы и 5 минут отдыха). Приложение может показывать уведомления и отслеживать прогресс.

Что можно улучшить:

Добавить статистику по количеству завершенных циклов.
Поддержка настройки времени работы и отдыха.

7. Интерактивная карта с использованием Leaflet

Создайте веб-приложение с интерактивной картой с использованием библиотеки Leaflet. На карте могут отображаться маркеры с дополнительной информацией (например, метки с местами на карте).

25 Готовых программ на JavaScript

Что можно улучшить:

Интеграция с внешними API для получения данных о географических объектах.
Добавить возможность прокладывать маршруты.

8. RSS-ридер

Приложение для чтения RSS-лент, которое позволяет пользователю добавлять новые каналы, получать обновления и читать статьи.

Что можно улучшить:

Добавить функциональность для поиска по статьям.
Поддержка сохранения любимых каналов и статей.

9. Секретарь задач (Task Scheduler)

Приложение для планирования задач с возможностью установки напоминаний, настройки уведомлений и отслеживания выполнения.

Что можно улучшить:

Возможность интеграции с календарем Google.
Поддержка многозадачности и делегирования задач.

10. Система аутентификации и авторизации

Создайте систему, которая позволит пользователю регистрироваться, входить в систему и восстанавливать пароль. Для этого можно использовать JWT (JSON Web Tokens) и Node.js.

Что можно улучшить:

Подключение к реальной базе данных (например, MongoDB).
Реализация двухфакторной аутентификации.

11. Генератор случайных цитат

Приложение, которое генерирует случайные цитаты из базы данных или API. Пользователи могут делиться цитатами в социальных сетях.

Что можно улучшить:

Добавить возможность пользователю добавлять свои цитаты.
Интеграция с API для получения цитат известных людей.

12. Многостраничное SPA (Single Page Application)

Разработайте многостраничное приложение с использованием React или Vue.js, где каждая страница будет загружаться динамически, без перезагрузки всей страницы.

Что можно улучшить:

Реализовать клиентский роутинг.
Добавить поддержку серверного рендеринга.

13. Календарь событий

Приложение, которое позволяет пользователю добавлять события на календарь и получать напоминания о них. Можно использовать библиотеки вроде FullCalendar для отображения событий.

Что можно улучшить:

Возможность интеграции с внешними календарями (Google, Outlook).
Поддержка повторяющихся событий.

14. Простой блог с возможностью комментариев

Создайте систему блогов, где пользователи могут писать посты, а другие — оставлять комментарии. Используйте базу данных для хранения постов и комментариев.

Что можно улучшить:

Реализовать систему тегов для постов.
Добавить систему лайков и рейтингов.

15. Игра “Крестики-нолики”

Простой проект, где создается классическая игра на поле 3×3. Это поможет вам научиться работать с состоянием игры, логикой и обработкой пользовательского ввода.

Что можно улучшить:

Сделать игру многопользовательской через WebSockets.
Добавить искусственный интеллект для одиночной игры.

16. Конвертер валют с использованием API

Используйте публичный API для получения актуальных курсов валют и создайте простой конвертер валют.

Что можно улучшить:

Добавить возможность выбора базовой валюты.
Реализовать сохранение последних конвертаций.

17. Приложение для заметок с Markdown

Приложение для создания заметок с поддержкой разметки Markdown. Пользователи могут писать и просматривать заметки в Markdown формате, а приложение будет отображать их в HTML.

Что можно улучшить:

Сохранение заметок в локальной базе данных (например, IndexedDB).
Реализовать синхронизацию заметок с облачным хранилищем.

18. Weather App (Приложение для прогноза погоды)

Создайте приложение для отображения прогноза погоды, используя внешнее API, например, OpenWeatherMap.

Что можно улучшить:

Добавить поддержку нескольких языков.
Отображать прогноз на неделю и в реальном времени.

19. Парсер CSV-файлов

Приложение для загрузки и обработки CSV-файлов. Оно должно отображать данные из файлов в виде таблицы с возможностью фильтрации и сортировки.

Что можно улучшить:

Поддержка других форматов данных, например, JSON или XML.
Возможность редактировать данные и экспортировать их обратно в файл.

20. Платформа для опросов

Создайте платформу для создания и прохождения опросов. Пользователи могут создавать вопросы с вариантами ответов и анализировать результаты.

Что можно улучшить:

Поддержка различных типов вопросов (например, выбор из списка, открытые вопросы).
Добавить визуализацию результатов.

21. Подсказки для ввода (Autocomplete)

Разработайте компонент автозаполнения для ввода данных (например, для поиска городов или товаров). Используйте API для получения данных.

Что можно улучшить:

Поддержка поиска по нескольким параметрам.
Кэширование результатов для повышения производительности.

22. Флеш-карточки для изучения языка

Создайте приложение для создания и использования флеш-карточек для изучения нового языка. Пользователь может добавлять новые карточки с вопросами и ответами.

Что можно улучшить:

Добавить функциональность для тренировок и повторений.
Реализовать таймер для повторений.

23. Приложение для тренировок (Workout App)

Разработайте приложение, которое поможет пользователям создавать расписания тренировок, отслеживать их прогресс и сохранять историю.

Что можно улучшить:

Реализовать систему отслеживания здоровья (пульс, калории).
Интеграция с внешними сервисами для мониторинга активности.

24. Генератор паролей

Создайте приложение для генерации случайных паролей. Пользователь может настроить параметры (длину пароля, наличие спецсимволов, цифр и т.д.).

А теперь мы приведем примеры этих программ с кодом на javascript, но вы можете реализовать код на любом языке.

Давайте напишем код для каждого из этих проектов по очереди. Каждый проект будет представлен с объяснением его ключевых частей. Учтите, что это базовые версии, которые можно улучшать и развивать дальше.

1. Калькулятор (Vanilla JS)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор</title>
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled />
        <div>
            <button class="button" onclick="appendToDisplay('1')">1</button>
            <button class="button" onclick="appendToDisplay('2')">2</button>
            <button class="button" onclick="appendToDisplay('3')">3</button>
            <button class="button" onclick="appendToDisplay('+')">+</button>
        </div>
        <div>
            <button class="button" onclick="appendToDisplay('4')">4</button>
            <button class="button" onclick="appendToDisplay('5')">5</button>
            <button class="button" onclick="appendToDisplay('6')">6</button>
            <button class="button" onclick="appendToDisplay('-')">-</button>
        </div>
        <div>
            <button class="button" onclick="appendToDisplay('7')">7</button>
            <button class="button" onclick="appendToDisplay('8')">8</button>
            <button class="button" onclick="appendToDisplay('9')">9</button>
            <button class="button" onclick="appendToDisplay('*')">*</button>
        </div>
        <div>
            <button class="button" onclick="appendToDisplay('0')">0</button>
            <button class="button" onclick="clearDisplay()">C</button>
            <button class="button" onclick="calculate()">=</button>
            <button class="button" onclick="appendToDisplay('/')">/</button>
        </div>
    </div>

    <script>
        let display = document.getElementById('display');

        function appendToDisplay(value) {
            display.value += value;
        }

        function clearDisplay() {
            display.value = '';
        }

        function calculate() {
            try {
                display.value = eval(display.value);
            } catch (e) {
                display.value = 'Ошибка';
            }
        }
    </script>
</body>
</html>

Объяснение:

В этом проекте мы создаём калькулятор с базовыми операциями (сложение, вычитание, умножение, деление).
Кнопки калькулятора вызывают функцию appendToDisplay, которая добавляет символы в поле ввода.
При нажатии на кнопку “=” выполняется вычисление через функцию calculate, используя метод eval для обработки математических операций.
В случае ошибки (например, деление на ноль) выводится сообщение “Ошибка”.

2. Чат на WebSockets (Node.js + HTML)

Сервер (Node.js):

javascriptКопировать кодconst WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Новый пользователь подключился');
    ws.on('message', (message) => {
        console.log('Получено сообщение: ', message);
        // Рассылаем сообщение всем клиентам
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

Клиент (HTML + JS):

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Чат на WebSockets</title>
</head>
<body>
    <div id="chat">
        <div id="messages"></div>
        <input type="text" id="message" placeholder="Введите сообщение" />
        <button onclick="sendMessage()">Отправить</button>
    </div>

    <script>
        const socket = new WebSocket('ws://localhost:8080');
        const messagesDiv = document.getElementById('messages');
        const messageInput = document.getElementById('message');

        socket.onmessage = function(event) {
            const message = event.data;
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            messagesDiv.appendChild(messageElement);
        };

        function sendMessage() {
            const message = messageInput.value;
            if (message) {
                socket.send(message);
                messageInput.value = '';
            }
        }
    </script>
</body>
</html>

Объяснение:

На сервере создаём WebSocket-сервер с помощью библиотеки ws. Когда клиент подключается, он получает возможность отправлять и получать сообщения.
Клиентская часть подключается к серверу WebSocket и отправляет/получает сообщения через него.
Когда сервер получает сообщение от одного клиента, он отправляет его всем остальным подключённым клиентам.

3. To-Do List с использованием LocalStorage

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
    <div>
        <input type="text" id="task" placeholder="Введите задачу" />
        <button onclick="addTask()">Добавить</button>
    </div>
    <ul id="taskList"></ul>

    <script>
        // Загрузка задач из LocalStorage
        function loadTasks() {
            const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';
            tasks.forEach(task => {
                const li = document.createElement('li');
                li.textContent = task;
                taskList.appendChild(li);
            });
        }

        // Добавление задачи
        function addTask() {
            const taskInput = document.getElementById('task');
            const task = taskInput.value.trim();
            if (task) {
                const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
                tasks.push(task);
                localStorage.setItem('tasks', JSON.stringify(tasks));
                taskInput.value = '';
                loadTasks();
            }
        }

        loadTasks(); // Инициализация списка задач при загрузке страницы
    </script>
</body>
</html>

Объяснение:

Каждая задача сохраняется в localStorage в виде массива строк. При каждом обновлении страницы мы загружаем задачи с помощью loadTasks и отображаем их на странице.
При добавлении новой задачи она сохраняется в localStorage, и список задач обновляется без перезагрузки страницы.

4. Галерея изображений с API

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Галерея изображений</title>
</head>
<body>
    <div id="gallery"></div>

    <script>
        // Получаем изображения с API
        fetch('https://api.unsplash.com/photos?client_id=YOUR_ACCESS_KEY')
            .then(response => response.json())
            .then(images => {
                const gallery = document.getElementById('gallery');
                images.forEach(image => {
                    const img = document.createElement('img');
                    img.src = image.urls.small;
                    img.alt = image.alt_description;
                    gallery.appendChild(img);
                });
            });
    </script>
</body>
</html>

Объяснение:

Мы используем Unsplash API, чтобы получить изображения для галереи. В коде нужно заменить YOUR_ACCESS_KEY на ваш ключ API.
После получения изображений мы отображаем их в элементе <div> с помощью динамического создания <img>.

5. Магазин с корзиной покупок

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Магазин</title>
</head>
<body>
    <div>
        <h2>Товары</h2>
        <button onclick="addToCart('Товар 1')">Товар 1</button>
        <button onclick="addToCart('Товар 2')">Товар 2</button>
        <button onclick="addToCart('Товар 3')">Товар 3</button>
    </div>
    <div>
        <h3>Корзина</h3>
        <ul id="cart"></ul>
        <p>Итого: <span id="total"></span></p>
    </div>

    <script>
        let cart = [];

        function addToCart(item) {
            cart.push(item);
            updateCart();
        }

        function updateCart() {
            const cartList = document.getElementById('cart');
            cartList.innerHTML = '';
            cart.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item;
                cartList.appendChild(li);
            });
            document.getElementById('total').textContent = cart.length;
        }
    </script>
</body>
</html>

Объяснение:

В этом проекте добавляются товары в корзину. Мы храним данные о товарах в массиве cart и отображаем их в списке на странице.
В корзине отображается общее количество товаров, и при добавлении новых товаров это число увеличивается.

Эти проекты — это лишь начало. В следующих ответах можно рассмотреть оставшиеся проекты, включая таймер Pomodoro, игру в крестики-нолики и другие. Если хотите, можем продолжить!

6. Таймер Pomodoro

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Таймер Pomodoro</title>
</head>
<body>
    <div id="pomodoro">
        <h2>Таймер Pomodoro</h2>
        <div>
            <p>Оставшееся время: <span id="time">25:00</span></p>
            <button onclick="startTimer()">Старт</button>
            <button onclick="stopTimer()">Стоп</button>
        </div>
    </div>

    <script>
        let timer;
        let minutes = 25;
        let seconds = 0;
        let isRunning = false;

        function startTimer() {
            if (isRunning) return;
            isRunning = true;
            timer = setInterval(updateTime, 1000);
        }

        function stopTimer() {
            isRunning = false;
            clearInterval(timer);
        }

        function updateTime() {
            if (seconds === 0) {
                if (minutes === 0) {
                    clearInterval(timer);
                    alert("Время истекло!");
                    isRunning = false;
                    return;
                }
                minutes--;
                seconds = 59;
            } else {
                seconds--;
            }

            document.getElementById("time").textContent = formatTime(minutes, seconds);
        }

        function formatTime(min, sec) {
            return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
        }
    </script>
</body>
</html>

Объяснение:

Это базовый таймер Pomodoro, который отсчитывает 25 минут работы и показывает оставшееся время в формате мм:сс.
Таймер запускается по нажатию на кнопку Старт, и останавливается по нажатию на кнопку Стоп.
Когда время заканчивается, выводится уведомление.

7. Интерактивная карта с использованием Leaflet

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Интерактивная карта</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <h2>Интерактивная карта</h2>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        // Инициализация карты
        const map = L.map('map').setView([51.505, -0.09], 13); // Координаты Лондона

        // Подключаем слой карты (например, OpenStreetMap)
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Добавление маркера на карту
        L.marker([51.505, -0.09]).addTo(map)
            .bindPopup('Здесь я!')
            .openPopup();
    </script>
</body>
</html>

Объяснение:

Мы используем библиотеку Leaflet для отображения карты.
Задаём начальные координаты (Лондон) и масштаб карты, а затем добавляем маркер на карту.
Карта может быть кастомизирована с использованием других слоёв (например, для отображения данных).

8. RSS-ридер

HTML + JavaScript (с использованием Fetch API):

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RSS-ридер</title>
</head>
<body>
    <h2>RSS-ридер</h2>
    <ul id="rssFeed"></ul>

    <script>
        const feedUrl = 'https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml'; // Пример RSS-ленты

        fetch(feedUrl)
            .then(response => response.text())
            .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
            .then(data => {
                const items = data.querySelectorAll('item');
                const feedList = document.getElementById('rssFeed');
                items.forEach(item => {
                    const title = item.querySelector('title').textContent;
                    const link = item.querySelector('link').textContent;
                    const li = document.createElement('li');
                    li.innerHTML = `<a href="${link}" target="_blank">${title}</a>`;
                    feedList.appendChild(li);
                });
            })
            .catch(err => console.error('Ошибка загрузки RSS:', err));
    </script>
</body>
</html>

Объяснение:

Этот проект использует Fetch API для загрузки данных RSS-ленты.
Парсим XML-данные, используя DOMParser, и отображаем заголовки новостей на странице.
В ссылке отображаются новости, которые можно открыть в новом окне.

9. Секретарь задач (Task Scheduler)

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Секретарь задач</title>
</head>
<body>
    <h2>Секретарь задач</h2>
    <input type="text" id="taskInput" placeholder="Введите задачу" />
    <button onclick="addTask()">Добавить задачу</button>
    <ul id="taskList"></ul>

    <script>
        let tasks = [];

        function addTask() {
            const taskInput = document.getElementById('taskInput');
            const task = taskInput.value.trim();
            if (task) {
                tasks.push({ task, completed: false });
                taskInput.value = '';
                updateTaskList();
            }
        }

        function updateTaskList() {
            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';
            tasks.forEach((task, index) => {
                const li = document.createElement('li');
                li.textContent = task.task;
                li.style.textDecoration = task.completed ? 'line-through' : 'none';
                li.onclick = () => toggleTaskCompletion(index);
                taskList.appendChild(li);
            });
        }

        function toggleTaskCompletion(index) {
            tasks[index].completed = !tasks[index].completed;
            updateTaskList();
        }
    </script>
</body>
</html>

Объяснение:

Этот проект позволяет добавлять задачи в список и помечать их как выполненные (перечёркивая текст).
Используется массив tasks для хранения задач, каждая из которых имеет свойство completed, указывающее на её состояние.
Для каждой задачи есть возможность щелкнуть и переключить её статус.

10. Система аутентификации и авторизации

HTML + JavaScript (без использования сервера):

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Аутентификация</title>
</head>
<body>
    <h2>Вход в систему</h2>
    <input type="text" id="username" placeholder="Имя пользователя" />
    <input type="password" id="password" placeholder="Пароль" />
    <button onclick="login()">Войти</button>
    <p id="message"></p>

    <script>
        const users = [{ username: 'admin', password: 'password123' }];

        function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const messageElement = document.getElementById('message');
            
            const user = users.find(user => user.username === username && user.password === password);
            if (user) {
                messageElement.textContent = 'Вход выполнен!';
                messageElement.style.color = 'green';
            } else {
                messageElement.textContent = 'Неверное имя пользователя или пароль';
                messageElement.style.color = 'red';
            }
        }
    </script>
</body>
</html>

Объяснение:

Здесь создаётся очень простая система аутентификации, где хардкодим список пользователей.
При вводе имени пользователя и пароля система проверяет их и вывод

11. Система поиска по данным

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Система поиска</title>
</head>
<body>
    <h2>Поиск данных</h2>
    <input type="text" id="searchInput" placeholder="Введите запрос" />
    <ul id="resultList"></ul>

    <script>
        const data = ['JavaScript', 'HTML', 'CSS', 'Node.js', 'React', 'Vue', 'Angular', 'Python'];

        function search() {
            const query = document.getElementById('searchInput').value.toLowerCase();
            const results = data.filter(item => item.toLowerCase().includes(query));
            displayResults(results);
        }

        function displayResults(results) {
            const resultList = document.getElementById('resultList');
            resultList.innerHTML = '';
            results.forEach(result => {
                const li = document.createElement('li');
                li.textContent = result;
                resultList.appendChild(li);
            });
        }

        document.getElementById('searchInput').addEventListener('input', search);
    </script>
</body>
</html>

Объяснение:

Это простая система поиска по статическому массиву данных.
При вводе текста в поле поиска, массив фильтруется с использованием метода filter, и результаты отображаются в списке.

12. Панель управления для сайта (Admin Panel)

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Панель управления</title>
</head>
<body>
    <h2>Панель управления</h2>
    <button onclick="showDashboard()">Показать панель</button>
    <div id="dashboard" style="display:none;">
        <h3>Добро пожаловать в панель управления</h3>
        <p>Здесь вы можете управлять сайтом.</p>
        <button onclick="logout()">Выйти</button>
    </div>

    <script>
        function showDashboard() {
            document.getElementById('dashboard').style.display = 'block';
        }

        function logout() {
            document.getElementById('dashboard').style.display = 'none';
        }
    </script>
</body>
</html>

Объяснение:

Здесь создаётся базовая панель управления, которая скрыта по умолчанию.
При нажатии на кнопку “Показать панель” она становится видимой. Кнопка “Выйти” скрывает панель.

13. Конвертер валют

HTML + JavaScript (используя API):

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Конвертер валют</title>
</head>
<body>
    <h2>Конвертер валют</h2>
    <input type="number" id="amount" placeholder="Сумма" />
    <select id="currencyFrom">
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
    </select>
    в
    <select id="currencyTo">
        <option value="RUB">RUB</option>
        <option value="JPY">JPY</option>
    </select>
    <button onclick="convertCurrency()">Конвертировать</button>
    <p id="result"></p>

    <script>
        async function convertCurrency() {
            const amount = document.getElementById('amount').value;
            const from = document.getElementById('currencyFrom').value;
            const to = document.getElementById('currencyTo').value;

            const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${from}`);
            const data = await response.json();
            const rate = data.rates[to];
            const convertedAmount = (amount * rate).toFixed(2);

            document.getElementById('result').textContent = `${amount} ${from} = ${convertedAmount} ${to}`;
        }
    </script>
</body>
</html>

Объяснение:

В этом проекте используется внешнее API для получения текущих курсов валют.
Пользователь вводит сумму и выбирает валюты для конвертации. Программа получает курс валюты и выполняет конвертацию, отображая результат.

14. Генератор случайных чисел

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Генератор случайных чисел</title>
</head>
<body>
    <h2>Генератор случайных чисел</h2>
    <button onclick="generateRandomNumber()">Сгенерировать число</button>
    <p id="result"></p>

    <script>
        function generateRandomNumber() {
            const randomNumber = Math.floor(Math.random() * 100) + 1;
            document.getElementById('result').textContent = `Случайное число: ${randomNumber}`;
        }
    </script>
</body>
</html>

Объяснение:

Это простой проект для генерации случайного числа в диапазоне от 1 до 100.
Встроенная функция Math.random() генерирует число, а Math.floor() округляет его до целого числа.

15. Игра “Угадай число”

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Игра "Угадай число"</title>
</head>
<body>
    <h2>Игра "Угадай число"</h2>
    <p>Угадайте число от 1 до 100.</p>
    <input type="number" id="guess" placeholder="Введите число" />
    <button onclick="checkGuess()">Проверить</button>
    <p id="result"></p>

    <script>
        const numberToGuess = Math.floor(Math.random() * 100) + 1;

        function checkGuess() {
            const guess = parseInt(document.getElementById('guess').value);
            const result = document.getElementById('result');
            
            if (guess < numberToGuess) {
                result.textContent = 'Слишком маленькое!';
            } else if (guess > numberToGuess) {
                result.textContent = 'Слишком большое!';
            } else {
                result.textContent = 'Поздравляем, вы угадали!';
            }
        }
    </script>
</body>
</html>

Объяснение:

Игра генерирует случайное число, и пользователю нужно угадать его, вводя число.
В зависимости от того, больше или меньше введённое число, пользователю даются подсказки.

16. Секундомер

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Секундомер</title>
</head>
<body>
    <h2>Секундомер</h2>
    <p id="timer">00:00</p>
    <button onclick="startStopTimer()">Старт/Стоп</button>

    <script>
        let seconds = 0;
        let timerInterval;

        function startStopTimer() {
            if (timerInterval) {
                clearInterval(timerInterval);
                timerInterval = null;
            } else {
                timerInterval = setInterval(updateTimer, 1000);
            }
        }

        function updateTimer() {
            seconds++;
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            document.getElementById('timer').textContent = `${minutes < 10 ? '0' + minutes : minutes}:${remainingSeconds < 10 ? '0' + remainingSeconds : remainingSeconds}`;
        }
    </script>
</body>
</html>

Объяснение:

Секундомер увеличивает счётчик каждую секунду, пока не нажата кнопка стоп. Время отображается в формате мм:сс.

17. Формы с валидацией

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Валидация формы</title>
</head>
<body>
    <h2>Регистрация</h2>
    <form id="registrationForm">
        <label for="email">Email:</label>
        <input type="email" id="email" required />
        <br/>
        <label for="password">Пароль:</label>
        <input type="password" id="password" required />
        <br/>
        <button type="submit">Зарегистрироваться</button>
    </form>

    <script>
        document.getElementById('registrationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;

            if (!email || !password) {
                alert('Заполните все поля!');
                return;
            }

            alert('Регистрация успешна!');
        });
    </script>
</body>
</html>

Объяснение:

Валидация формы на основе простого условия. Если какое-то поле не заполнено, выводится предупреждение.

18. Калькулятор

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор</title>
</head>
<body>
    <h2>Калькулятор</h2>
    <input type="text" id="display" disabled />
    <br />
    <button onclick="appendNumber(1)">1</button>
    <button onclick="appendNumber(2)">2</button>
    <button onclick="appendNumber(3)">3</button>
    <button onclick="appendNumber(4)">4</button>
    <br />
    <button onclick="appendNumber(5)">5</button>
    <button onclick="appendNumber(6)">6</button>
    <button onclick="appendNumber(7)">7</button>
    <button onclick="appendNumber(8)">8</button>
    <br />
    <button onclick="appendNumber(9)">9</button>
    <button onclick="appendNumber(0)">0</button>
    <button onclick="clearDisplay()">C</button>
    <button onclick="calculate()">=</button>
    <br />
    <button onclick="appendOperator('+')">+</button>
    <button onclick="appendOperator('-')">-</button>
    <button onclick="appendOperator('*')">*</button>
    <button onclick="appendOperator('/')">/</button>

    <script>
        let expression = '';

        function appendNumber(number) {
            expression += number;
            document.getElementById('display').value = expression;
        }

        function appendOperator(operator) {
            expression += operator;
            document.getElementById('display').value = expression;
        }

        function clearDisplay() {
            expression = '';
            document.getElementById('display').value = '';
        }

        function calculate() {
            try {
                expression = eval(expression).toString();
                document.getElementById('display').value = expression;
            } catch (error) {
                document.getElementById('display').value = 'Ошибка';
            }
        }
    </script>
</body>
</html>

Объяснение:

Это простой калькулятор, который позволяет выполнять базовые арифметические операции.
Пользователь нажимает кнопки с цифрами и операциями, которые добавляются к выражению. Когда нажимается кнопка “=” — выполняется вычисление с помощью eval().

19. Список дел с возможностью редактирования

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Список дел</title>
</head>
<body>
    <h2>Список дел</h2>
    <input type="text" id="taskInput" placeholder="Введите задачу" />
    <button onclick="addTask()">Добавить</button>
    <ul id="taskList"></ul>

    <script>
        let tasks = [];

        function addTask() {
            const taskInput = document.getElementById('taskInput');
            const task = taskInput.value.trim();
            if (task) {
                tasks.push(task);
                taskInput.value = '';
                renderTasks();
            }
        }

        function renderTasks() {
            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';
            tasks.forEach((task, index) => {
                const li = document.createElement('li');
                li.textContent = task;
                const editButton = document.createElement('button');
                editButton.textContent = 'Редактировать';
                editButton.onclick = () => editTask(index);
                li.appendChild(editButton);
                taskList.appendChild(li);
            });
        }

        function editTask(index) {
            const newTask = prompt('Измените задачу:', tasks[index]);
            if (newTask) {
                tasks[index] = newTask;
                renderTasks();
            }
        }
    </script>
</body>
</html>

Объяснение:

Это список дел, где можно добавить, редактировать и просматривать задачи.
Каждая задача отображается с кнопкой для редактирования, которая вызывает prompt, позволяя пользователю изменить текст задачи.

20. Темная и светлая тема

HTML + CSS + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Переключатель темы</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        body.dark {
            background-color: #333;
            color: #fff;
        }
        body.light {
            background-color: #fff;
            color: #000;
        }
    </style>
</head>
<body class="light">
    <h2>Переключатель темы</h2>
    <button onclick="toggleTheme()">Переключить тему</button>

    <script>
        function toggleTheme() {
            const body = document.body;
            body.classList.toggle('dark');
            body.classList.toggle('light');
        }
    </script>
</body>
</html>

Объяснение:

С помощью этого проекта можно переключать между светлой и темной темой на странице.
Используется класс light для светлой темы и класс dark для темной, которые меняют стили страницы.

21. Интерфейс для загрузки файлов

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Загрузка файлов</title>
</head>
<body>
    <h2>Загрузка файлов</h2>
    <input type="file" id="fileInput" multiple />
    <ul id="fileList"></ul>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const files = event.target.files;
            const fileList = document.getElementById('fileList');
            fileList.innerHTML = '';
            for (const file of files) {
                const li = document.createElement('li');
                li.textContent = file.name;
                fileList.appendChild(li);
            }
        });
    </script>
</body>
</html>

Объяснение:

Этот проект позволяет пользователю загружать несколько файлов.
Когда файлы выбираются, их имена отображаются в списке на странице.

22. Простой чат

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Простой чат</title>
    <style>
        #chatBox {
            width: 100%;
            height: 200px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: scroll;
        }
        #chatInput {
            width: 80%;
        }
    </style>
</head>
<body>
    <h2>Чат</h2>
    <div id="chatBox"></div>
    <input type="text" id="chatInput" placeholder="Введите сообщение" />
    <button onclick="sendMessage()">Отправить</button>

    <script>
        function sendMessage() {
            const input = document.getElementById('chatInput');
            const message = input.value.trim();
            if (message) {
                const chatBox = document.getElementById('chatBox');
                const p = document.createElement('p');
                p.textContent = `Вы: ${message}`;
                chatBox.appendChild(p);
                input.value = '';
                chatBox.scrollTop = chatBox.scrollHeight;
            }
        }
    </script>
</body>
</html>

Объяснение:

В этом проекте создаётся простой чат, где пользователь вводит сообщение, а оно отображается в чат-окне.
При отправке сообщения оно добавляется в div#chatBox и автоматически прокручивается вниз.

23. Таблицы с сортировкой

HTML + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Сортировка таблицы</title>
</head>
<body>
    <h2>Таблица с сортировкой</h2>
    <table id="myTable" border="1">
        <thead>
            <tr>
                <th onclick="sortTable(0)">Имя</th>
                <th onclick="sortTable(1)">Возраст</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>Алексей</td><td>30</td></tr>
            <tr><td>Мария</td><td>25</td></tr>
            <tr><td>Иван</td><td>35</td></tr>
        </tbody>
    </table>

    <script>
        function sortTable(n) {
            const table = document.getElementById('myTable');
            const rows = Array.from(table.rows).slice(1);
            const isNumeric = n === 1;

            rows.sort((a, b) => {
                const cellA = a.cells[n].textContent;
                const cellB = b.cells[n].textContent;
                return isNumeric 
                    ? parseInt(cellA) - parseInt(cellB)
                    : cellA.localeCompare(cellB);
            });

            rows.forEach(row => table.appendChild(row));
        }
    </script>
</body>
</html>

Объяснение:

Это таблица с возможностью сортировки по клику на заголовок.
При клике на заголовок столбца сортировка выполняется по возрастанию или убыванию.

24. Анимация загрузки

HTML + CSS + JavaScript:

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Загрузка</title>
    <style>
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <h2>Загрузка...</h2>
    <div class="spinner"></div>
</body>
</html>

Объяснение:

В этом проекте используется CSS-анимированное изображение загрузки (спиннер).
Элемент .spinner вращается благодаря анимации CSS.

25. Картографический интерфейс с Google Maps

HTML + JavaScript (использование Google Maps API):

htmlКопировать код<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <h2>Карта</h2>
    <div id="map"></div>

    <script>
        function initMap() {
            const map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 37.7749, lng: -122.4194 },
                zoom: 10
            });

            const marker = new google.maps.Marker({
                position: { lat: 37.7749, lng: -122.4194 },
                map: map,
                title: "Сан-Франциско"
            });
        }
    </script>
</body>
</html>