freeCodeCamp

6.4 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d78af367417b2b2512b03	Build a Survey Form	true	3		Создание формы опроса

Description

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

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

6.4 KiB Raw Blame History Unescape Escape