Проект на JavaScript "Имитация загрузки файла". Задание
Клон плейлиста на Яндекс.Дзен: https://dzen.ru/suite/3764854c-4f30-4...
Задание:
1. При загрузке приложения должно появляться уведомление о загрузке файла «Файл загружается».
2. Процесс загрузки должен обновляться и отображаться каждую секунду с указанием процентов.
3. Процесс увеличивается на случайное значение от 5 до 10% за шаг.
4. По окончании загрузки пользователь должен уведомляться об окончании процесса сообщением «Загрузка файла успешно завершена».
5. После завершения загрузки должна инициироваться «обработка файла» с выводом сообщения «Файл обрабатывается…», затем сообщения «Файл обработан». Дальше происходит «сохранение» файла, при этом сначала выводится сообщение «Сохранение файла…», после него сообщения – «Файл успешно сохранен и готов к использованию». Имитация происходит с помощью setTimeout, интервалы времени могут быть любыми (ориентируемся на 1-2 секунды).
Результат, показанный в видео: https://github.com/alexeirybak/JavaSc...
Ваше задание:
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/JavaSc...
#ПроектНаJavaScript #ИмитацияЗагрузкиФайла #JavaScriptДляНачинающих #ПрактикаJavaScript #СозданиеПроектовНаJS