Проект на JavaScript "Имитация загрузки файла". Задание

12+
12+

26 просмотров

год назад

ПожаловатьсяНарушение авторских прав
12+
12+

26 просмотров

год назад

ПожаловатьсяНарушение авторских прав
12+
12+

26 просмотров

год назад

Клон плейлиста на Яндекс.Дзен: https://dzen.ru/suite/3764854c-4f30-4e4e-8af9-d6a8f7be0988?share_to=link Задание: 1. При загрузке приложения должно появляться уведомление о загрузке файла «Файл загружается». 2. Процесс загрузки должен обновляться и отображаться каждую секунду с указанием процентов. 3. Процесс увеличивается на случайное значение от 5 до 10% за шаг. 4. По окончании загрузки пользователь должен уведомляться об окончании процесса сообщением «Загрузка файла успешно завершена». 5. После завершения загрузки должна инициироваться «обработка файла» с выводом сообщения «Файл обрабатывается…», затем сообщения «Файл обработан». Дальше происходит «сохранение» файла, при этом сначала выводится сообщение «Сохранение файла…», после него сообщения – «Файл успешно сохранен и готов к использованию». Имитация происходит с помощью setTimeout, интервалы времени могут быть любыми (ориентируемся на 1-2 секунды). Результат, показанный в видео: https://github.com/alexeirybak/JavaScript-course/tree/Module-3-project-2-task Ваше задание: 1. Реализовать рендеринг прогресс бара. Для этого у нас в файле index.html есть элемент с id “progressFill”, ширина которого задается в процентах от ширины родительского блока с id “progressBar”. Используйте стилизацию с помощью document.getElementById(“progressFill”).style.width = `${progress}%`; При этом по умолчанию блок с прогресс-баром и выводимыми процентами отсутствует (так определено в styles.css) и появляется только в начале загрузки файла, а после загрузки блок с id “progressInfo” должен исчезать. 2. Реализовать рендеринг всех выводимых пользователю сообщений в элемент файла index.html с id “notifications”. Сообщения последовательно сменяют друг друга по мере выполнения скрипта. Последнее сообщение «Файл успешно сохранен и готов к использованию» остается на странице по окончании работы скрипта. Постарайтесь вывод всех сообщений реализовать в виде отдельной функции. То есть все, что у нас сейчас выводится в консоль, мы должны отрендерить в index.html. Предупреждение: файлы index.html и styles.css изменять нельзя. 3. Кусок кода, отвечающий за вывод сообщений «Файл обрабатывается», «Файл обработан», «Сохранение файла…», «Файл успешно сохранен и готов к использованию», поместить в отдельную функцию uploadCompleted, которую в виде callback пробросить в функцию startUpload и затем вызвать внутри функции startUpload. Подсказка: поскольку это будет callback, не забудьте функцию uploadCompleted пробросить в качестве параметра в функцию startUpload при ее вызове в самом конце кода: startUpload(uploadCompleted). Лайфхаки: 1. Чтобы во время тестирования приложения долго не ждать загрузки прогресс-бара, увеличьте инкремент не на 5, как у меня задано, а сразу на 50 или даже более. 2. Тестируйте выполнение скрипта в консоли отладчика в браузере, а не в терминале редактора кода, так как Node.js не работает с DOM. Готовый результат: https://github.com/alexeirybak/JavaScript-course/tree/Module-3-project-2-ready #Про?

, чтобы оставлять комментарии