Создание формы опроса
Цель: Создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/VPaoNP . Выполните приведенные ниже пользовательские истории и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если вы хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! Пользовательская история # 1: Я вижу заголовок с id="title" в формате H1. Пользовательская история # 2: Я вижу короткое описание с id="description" в формате P. Пользовательская история # 3: Я вижу элемент form с id="survey-form" . Пользовательская история # 4: Внутри элемента формы мне нужно ввести мое имя в поле с id="name" . Пользовательская история # 5: Внутри элемента формы мне нужно ввести электронную почту в поле с id="email" . Пользовательская история # 6: Если я введу электронную почту, которая не отформатирована правильно, я увижу HTML5 ошибку валидации. Пользовательская история # 7: Внутри формы я могу ввести число в поле с id="number" . Пользовательская история # 8: Если я введу нечисловое значение в поле ввода, я увижу HTML5 ошибку валидации. Пользовательская история # 9: Если я ввожу число за пределами диапазона ввода, которые определены атрибутами min и max , я увижу ошибку проверки HTML5. Пользовательская история # 10: Для полей ввода имени, электронной почты и числа внутри формы я могу видеть соответствующие метки, которые описывают назначение каждого поля со следующими идентификаторами: id="name-label" , id="email-label" и id="number-label" . Пользовательская история # 11: Для полей ввода имени, электронной почты и ввода числа я вижу плейсхолдер, который дает мне описание или инструкции для каждого поля. Пользовательская история # 12: Внутри элемента формы я могу выбрать опцию из раскрывающегося списка, имеющего соответствующий id="dropdown" . Пользовательская история # 13: Внутри элемента формы я могу выбрать поле из одной или нескольких групп переключателей. Каждая группа должна быть сгруппирована с использованием атрибута name . Пользовательская история # 14: Внутри элемента формы я могу выбрать несколько полей из ряда флажков, каждый из которых должен иметь атрибут value . Пользовательская история # 15: Внутри элемента формы, в конце, я вижу textarea для дополнительных комментариев. Пользовательская история # 16: Внутри элемента формы есть кнопка с id="submit" для отправки всех моих введённых данных. Вы можете создать свой проект от данного CodePen шаблона . Или вы можете использовать ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми выполненными тестами. Не забудьте использовать Read-Search-Ask, если вы зашли в тупик.