progway — программирование, IT

Сколько времени читается статья?

Очень интересная фишка в блогах и на других текстовых сайтах — указывать рядом со статьёй время её чтения. Видели что-то подобное: “Время чтения: менее 5 минут”?

Реализовать это максимально просто, для этого нужно два вводных параметра:
— количество символов в статье
— количество картинок в статье

В среднем, взрослый человек может прочитать за 1 минуту 1500 символов, а каждую картинку просмотреть за 12 секунд. Из этих параметров не сложно получить время прочтения в секундах:

const CHARACTERS_PER_MINUTE = 1500;
const SECONDS_PER_IMAGE = 12;
const SECONDS_IN_MINUTE = 60;

const calculateReadingTimeInSeconds = (articleLength: number, numberOfImages = 0) => {
    const charactersReadingTime = 
     articleLength / CHARACTERS_PER_MINUTE * SECONDS_IN_MINUTE;
    const imagesReadingTime = numberOfImages * SECONDS_PER_IMAGE;

    const readingTime = Math.ceil(charactersReadingTime + imagesReadingTime);

    return readingTime;
}

А далее секунды можно легко форматировать в читаемый промежуток времени через конструкцию switch (true), например, вот так:

const formatReadingTime = (seconds: number) => {
    switch (true) {
        case seconds < SECONDS_IN_MINUTE:
            return "Менее 1 минуты"
        case seconds < SECONDS_IN_MINUTE * 5:
            return "Менее 5 минут"
        case seconds >= SECONDS_IN_MINUTE * 5:
            return "Более 5 минут"
        default:
          return null
    }
}

Кода получается совсем не много, зато мы сильно улучшаем UX. Есть идеи какие ещё фишки можем разобрать? Пишите в комментарии)

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #code

❤27🔥16👍4🐳1

www.tgoop.com/prog_way_blog/259

1.59K viewsMay 11, 2024 at 11:17

Сколько времени читается статья?

Очень интересная фишка в блогах и на других текстовых сайтах — указывать рядом со статьёй время её чтения. Видели что-то подобное: “Время чтения: менее 5 минут”?

Реализовать это максимально просто, для этого нужно два вводных параметра:
— количество символов в статье
— количество картинок в статье

В среднем, взрослый человек может прочитать за 1 минуту 1500 символов, а каждую картинку просмотреть за 12 секунд. Из этих параметров не сложно получить время прочтения в секундах:

const CHARACTERS_PER_MINUTE = 1500;
const SECONDS_PER_IMAGE = 12;
const SECONDS_IN_MINUTE = 60;

const calculateReadingTimeInSeconds = (articleLength: number, numberOfImages = 0) => {
    const charactersReadingTime = 
     articleLength / CHARACTERS_PER_MINUTE * SECONDS_IN_MINUTE;
    const imagesReadingTime = numberOfImages * SECONDS_PER_IMAGE;

    const readingTime = Math.ceil(charactersReadingTime + imagesReadingTime);

    return readingTime;
}

const formatReadingTime = (seconds: number) => {
    switch (true) {
        case seconds < SECONDS_IN_MINUTE:
            return "Менее 1 минуты"
        case seconds < SECONDS_IN_MINUTE * 5:
            return "Менее 5 минут"
        case seconds >= SECONDS_IN_MINUTE * 5:
            return "Более 5 минут"
        default:
          return null
    }
}

BY progway — программирование, IT