Генератор случайных открыток с поздравлениями

Введение

В этом проекте вы научитесь создавать открытку поздравления, которая отображает случайные поздравления при нажатии кнопки "Написать". Этот проект поможет вам понять, как работать с функциями JavaScript, слушателями событий и манипуляцией с DOM.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать проектную среду;
• реализовывать функцию для случайного выбора поздравления из заранее определенного массива;
• реализовывать функцию для отображения выбранного поздравления на открытке;
• добавлять слушатель событий к кнопке "Написать", чтобы запускать отображение поздравления.

🏆 Достижения

После завершения этого проекта вы сможете:

• использовать функции JavaScript для генерации случайного содержания;
• манипулировать с DOM для обновления содержания HTML-элемента;
• добавлять слушатели событий для запуска конкретных действий;
• работать с предоставленной структурой проекта и следовать пошаговым инструкциям.

Skills Graph

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталога выглядит так:

├── index.css
├── index.html
└── index.js

где:

• index.css - файл стилей для этого задания.
• index.js - JavaScript-файл, который необходимо завершить для этого задания.
• index.html - страница открытки поздравления.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Реализация функции writeGreeting()

В этом шаге вы реализуете функцию writeGreeting(), чтобы случайным образом выбрать поздравление из предоставленного массива greetings.

1. Откройте файл index.js.
2. Найдите функцию writeGreeting() и замените комментарий // TODO следующим кодом:

return greetings[Math.floor((Math.random() * 10) % greetings.length)];

Этот код генерирует случайный индекс в массиве greetings и возвращает соответствующее поздравление.

Реализация функции show()

В этом шаге вы реализуете функцию show(), чтобы отобразить поздравление в элементе greetingDisplay.

1. Откройте файл index.js.
2. Найдите функцию show() и замените комментарий // TODO следующим кодом:

greetingDisplay.innerHTML = writeGreeting();

Этот код вызывает функцию writeGreeting() для получения случайного поздравления и затем устанавливает innerHTML элемента greetingDisplay, чтобы отобразить поздравление.

3. Сохраните файл index.js.
4. Обновите представление "Web 8080" в ВМ, чтобы увидеть работу открытки поздравления. Нажмите кнопку "Написать", чтобы отобразить случайное поздравление.

Поздравляем! Вы завершили проект "Открытка с праздничным поздравлением".

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.