tgoop.com/prog_way_blog/259
Create:
Last Update:
Last Update:
Сколько времени читается статья?
Очень интересная фишка в блогах и на других текстовых сайтах — указывать рядом со статьёй время её чтения. Видели что-то подобное: “Время чтения: менее 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
BY progway — программирование, IT
Share with your friend now:
tgoop.com/prog_way_blog/259