Генератор JavaScript (JS) кода: ИИ-нейросеть создания скриптов онлайн

Вот код для создания таймера до конца акции 31 декабря 23:59 по времени посетителя. Код написан на JavaScript и использует асинхронные функции с обработкой ошибок.

<!-- index.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>
    <div id="timer"></div>
    <script src="timer.js"></script>
</body>
</html>

// timer.js
const timerElement = document.getElementById('timer');

const countdownEndDate = new Date('2023-12-31T23:59:59').getTime();

async function updateTimer() {
    try {
        const now = new Date().getTime();
        const timeLeft = countdownEndDate - now;

        if (timeLeft < 0) {
            timerElement.innerHTML = 'Акция завершена';
            return;
        }

        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        timerElement.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
    } catch (error) {
        console.error('Ошибка обновления таймера:', error);
    }
}

function startTimer() {
    updateTimer();
    setInterval(updateTimer, 1000);
}

startTimer();

Описание кода:

1. index.html:
   • Основная HTML-страница, где создается элемент для отображения таймера и подключается JavaScript-файл timer.js.
2. timer.js:
   • countdownEndDate: Переменная, задающая дату завершения акции.
   • updateTimer(): Асинхронная функция, которая обновляет таймер. Если время вышло, отображает сообщение "Акция завершена". Использует try/catch для обработки ошибок.
   • startTimer(): Запускает таймер, обновляя его каждую секунду с помощью setInterval.

Настройка:

• Чтобы изменить дату окончания акции, замените значение в new Date('2023-12-31T23:59:59') на нужное.

Ошибка Uncaught TypeError: Cannot read properties of undefined (reading 'map') возникает потому, что products не передан в компонент ProductList, и, соответственно, его значение равно undefined. Чтобы избежать этой ошибки, нужно убедиться, что products определён, прежде чем вызывать метод .map() на нём.

Вот исправленный код:

// ProductList.jsx
import React, { useEffect, useState } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);

  const fetchProducts = async () => {
    try {
      const response = await fetch('https://example.com/api/products');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      setProducts(data); // Убедитесь, что здесь правильная структура данных
    } catch (error) {
      console.error('Ошибка при загрузке продуктов:', error);
    }
  };

  useEffect(() => {
    fetchProducts();
  }, []);

  return (
    <ul>
      {products.length > 0 ? (
        products.map(p => <li key={p.id}>{p.name}</li>)
      ) : (
        <li>Нет доступных продуктов.</li>
      )}
    </ul>
  );
}

export default ProductList;

Описание изменений:

1. Использование useState: Создано состояние products для хранения списка товаров.
2. Функция fetchProducts: Асинхронная функция для получения данных о товарах с сервера. Использует try/catch для обработки ошибок.
3. useEffect: Вызывает fetchProducts при первом монтировании компонента.
4. Проверка на наличие товаров: Перед методом .map() добавлена проверка на наличие товаров, чтобы избежать ошибки.

Замена:

• Замените https://example.com/api/products на актуальный адрес вашего API для получения списка товаров. Убедитесь, что структура данных соответствует тому, как вы обращаетесь к полям p.id и p.name.

// файл: index.mjs
import { promises as fs } from 'fs';
import fetch from 'node-fetch';

const API_URL = process.env.API_URL;
const OUTPUT_FILE = 'data/latest.json';

async function fetchData() {
    try {
        const response = await fetch(API_URL);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        await fs.mkdir('data', { recursive: true });
        await fs.writeFile(OUTPUT_FILE, JSON.stringify(data, null, 2));
        console.log('Data saved successfully.');
    } catch (error) {
        console.error('Error fetching data:', error.message);
    }
}

async function startFetching() {
    while (true) {
        await fetchData();
        await new Promise(resolve => setTimeout(resolve, 3600000)); // 1 hour
    }
}

startFetching();

Вот пример тестов для вашего кода на JavaScript с использованием встроенного модуля node:test. Тесты охватывают обычные случаи, граничные и ошибочные вводы, а также используют заглушки для сетевых запросов и таймеров.

// formatPrice.test.js
import { test, expect } from 'node:test';
import { formatPrice } from './formatPrice.js';

test('formatPrice should format a valid number correctly', () => {
  const result = formatPrice(1234567.89);
  expect(result).toBe('1 234 567,89 ₽');
});

test('formatPrice should throw TypeError for non-number input', () => {
  expect(() => formatPrice('123')).toThrow(TypeError);
  expect(() => formatPrice(null)).toThrow(TypeError);
  expect(() => formatPrice(undefined)).toThrow(TypeError);
  expect(() => formatPrice(NaN)).toThrow(TypeError);
});

test('formatPrice should handle empty input correctly', () => {
  expect(() => formatPrice('')).toThrow(TypeError);
});

test('formatPrice should handle very large numbers', () => {
  const largeNumber = 1e+21;
  const result = formatPrice(largeNumber);
  expect(result).toBe('1 000 000 000 000 000 000 000 ₽');
});

Описание файлов и частей кода:

1. formatPrice.test.js: Этот файл содержит тесты для функции formatPrice.
   • Импортируем необходимые модули для тестирования и саму функцию.
   • Тестируем корректное форматирование для валидного числа.
   • Проверяем, что функция выбрасывает TypeError для некорректных входных данных (строки, null, undefined, NaN).
   • Проверяем обработку пустого ввода.
   • Проверяем форматирование для очень большого числа.

Что изменить под себя:

• В файле formatPrice.test.js вы можете изменить значения, которые тестируются, а также сообщения ошибок в соответствии с вашими требованиями.
• Убедитесь, что функция formatPrice импортируется из правильного пути, если структура вашего проекта отличается.

Вот переписанный код на TypeScript с учетом всех ваших требований:

// groupBy.ts
export interface Item {
  [key: string]: any; // Замените any на нужные типы, если известны
}

export function groupBy<T extends Item>(items: T[], key: keyof T): Record<string, T[]> {
  return items.reduce<Record<string, T[]>>((acc, item) => {
    const k = item[key] as unknown as string; // Приведение типа для ключа
    (acc[k] = acc[k] || []).push(item);
    return acc;
  }, {});
}

Описание

1. Интерфейс Item: Определяет объект с динамическими ключами. Замените any на конкретные типы, если они известны.
2. Функция groupBy:
   • Принимает массив объектов items и ключ key, по которому нужно группировать.
   • Использует reduce для создания объекта, где ключами являются значения поля key, а значениями — массивы объектов, которые имеют соответствующее значение этого поля.
   • Возвращает объект, сгруппированный по значению поля.

Куда менять под себя

• В интерфейсе Item укажите конкретные типы вместо any, если структура объектов в items известна.
• Проверьте, что ключи, которые вы используете для группировки, действительно присутствуют в каждом объекте массива items.

Давай разберем код по частям.

1. Функция debounce

const debounce = (fn, ms) => {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), ms);
  };
};

• Что делает:
  • Функция debounce принимает два аргумента: fn (функция, которую нужно вызывать) и ms (время в миллисекундах).
  • Внутри создается переменная t, которая будет использоваться для хранения идентификатора таймера.
  • Возвращается новая функция, которая принимает любые аргументы (...args).
  • При каждом вызове этой функции:
    • Сначала очищается предыдущий таймер с помощью clearTimeout(t).
    • Затем устанавливается новый таймер (setTimeout), который выполнит функцию fn с переданными аргументами через ms миллисекунд.
• Ошибка:
  • В этом коде нет проверки на пустое значение для fn, что может привести к ошибке, если передать не функцию.

2. Обработчик события

input.addEventListener('input', debounce(e => search(e.target.value), 300));

• Что делает:
  • К элементу input добавляется слушатель события input.
  • При каждом введении текста в поле input срабатывает функция debounce, которая оборачивает вызов функции search.
  • Функция search получает текущее значение поля input (e.target.value) и будет вызвана только после 300 миллисекунд с момента последнего ввода.

Что получится на обычном входе

• При вводе текста в поле input функция search будет вызвана не сразу, а через 300 миллисекунд после последнего символа. Это помогает предотвратить слишком частые вызовы search, что может быть полезно, например, для улучшения производительности при работе с API (поиск по базе данных и т.д.).

Ошибки и недостатки

1. Нет проверки на пустое значение: Если fn не является функцией, это вызовет ошибку при попытке вызова fn.apply(this, args).
2. Потерянный await: Если функция search является асинхронной и должна использовать await, то необходимо убедиться, что обработчик событий корректно обрабатывает это (например, добавить async перед стрелочной функцией).

Итог

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