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

HTMLHTMLBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

Holiday card greeting demo

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/templating("HTML Templating") subgraph Lab Skills html/basic_elems -.-> lab-299867{{"Генератор случайных открыток с поздравлениями"}} html/head_elems -.-> lab-299867{{"Генератор случайных открыток с поздравлениями"}} html/doc_flow -.-> lab-299867{{"Генератор случайных открыток с поздравлениями"}} html/embed_media -.-> lab-299867{{"Генератор случайных открыток с поздравлениями"}} html/inter_elems -.-> lab-299867{{"Генератор случайных открыток с поздравлениями"}} html/templating -.-> lab-299867{{"Генератор случайных открыток с поздравлениями"}} end

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

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

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

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

где:

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

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

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

Image Description

Реализация функции 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, чтобы отобразить поздравление.

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

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

✨ Проверить решение и практиковаться

Резюме

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