<section id="description">
Цель. Создайте приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/MJyNMd" target="_blank">https://codepen.io/freeCodeCamp/full/MJyNMd</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Придайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и используются на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я должен видеть внешний контейнер с соответствующим <code>id="drum-machine"</code> который содержит все остальные элементы. User Story # 2: Внутри <code>#drum-machine</code> я вижу элемент с соответствующим <code>id="display"</code> . User Story # 3: В <code>#drum-machine</code> я могу увидеть 9 кликабельных элементов ударной площадки, каждая из которых имеет имя класса <code>drum-pad</code> , уникальный идентификатор, который описывает аудиоклип, который будет настроен на ударную площадку для запуска, и внутренний текст, который соответствует одной из следующих клавиш на клавиатуре: Q, W, E, A, S, D, Z, X, C. Барабанные площадки должны быть в этом порядке. User Story # 4: внутри каждого <code>.drum-pad</code> должен быть <code>audio</code> элемент HTML5, который имеет атрибут <code>src</code> указывающий на аудиоклип, имя класса <code>clip</code> и идентификатор, соответствующий внутреннему тексту его родительского <code>.drum-pad</code> (например, <code>id="Q"</code> , <code>id="W"</code> , <code>id="E"</code> и т. д.). User Story # 5: Когда я нажимаю элемент <code>.drum-pad</code> , должен запускаться аудиоклип, содержащийся в его дочернем <code>audio</code> элементе. User Story # 6: Когда я <code>.drum-pad</code> клавишу триггера, связанную с каждым <code>.drum-pad</code> , должен запускаться аудиоклип, содержащийся в его дочернем <code>audio</code> элементе (например, нажатие клавиши Q должно запускать ударную панель, содержащую строку «Q», нажатие клавиши W должно запускать ударную панель, содержащую строку «W» и т. д.). User Story # 7: Когда <code>.drum-pad</code> , строка, описывающая связанный аудиоклип, отображается как внутренний текст элемента <code>#display</code> (каждая строка должна быть уникальной). Вы можете создать свой проект, <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</section>

Build a Drum Machine

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/GrZVVO" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVVO</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу элемент <code>textarea</code> с соответствующим <code>id="editor"</code> . User Story # 2: Я вижу элемент с соответствующим <code>id="preview"</code> . User Story # 3: Когда я ввожу текст в элемент <code>#editor</code> элемент <code>#preview</code> обновляется по мере ввода текста для отображения содержимого текстового поля. User Story # 4: Когда я <code>#editor</code> GitHub в элемент <code>#editor</code> , текст отображается как HTML в элементе <code>#preview</code> мере ввода (СОВЕТ: вам не нужно самостоятельно анализировать Markdown - вы можете импортировать отмеченную библиотеку для этого: <a href="https://cdnjs.com/libraries/marked" target="_blank">https://cdnjs.com/libraries/marked</a> ). User Story # 5: Когда мой предварительный просмотр по <code>#editor</code> сначала загружается, текст по умолчанию в поле <code>#editor</code> должен содержать допустимую уценку, которая представляет собой по крайней мере один из следующих элементов: заголовок (размер H1), заголовок sub (размер H2) , ссылку, встроенный код, блок кода, элемент списка, блок-образец, изображение и полужирный текст. User Story # 6: Когда мой предварительный просмотр по <code>#editor</code> сначала загружается, <code>#editor</code> по умолчанию в поле <code>#editor</code> должна отображаться как HTML в элементе <code>#preview</code> . Дополнительный бонус (вам не нужно проходить этот тестовый проход). Мой предварительный просмотр markdown интерпретирует возврат каретки и отображает их как элементы <code>br</code> (line break). Вы можете создать свой проект, <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</section>

Build a Markdown Previewer

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально подобное этому: <a href="https://codepen.io/freeCodeCamp/full/XpKrrW" target="_blank">https://codepen.io/freeCodeCamp/full/XpKrrW</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу элемент с <code>id="break-label"</code> который содержит строку (например, "Break Length"). User Story # 2: Я вижу элемент с <code>id="session-label"</code> который содержит строку (например, «Длина сеанса»). User Story # 3: Я вижу два интерактивных элемента с соответствующими идентификаторами: <code>id="break-decrement"</code> и <code>id="session-decrement"</code> . User Story # 4: Я вижу два интерактивных элемента с соответствующими идентификаторами: <code>id="break-increment"</code> и <code>id="session-increment"</code> . User Story # 5: Я вижу элемент с соответствующим <code>id="break-length"</code> , который по умолчанию (при загрузке) отображает значение 5. User Story # 6: я могу видеть элемент с соответствующим <code>id="session-length"</code> , который по умолчанию отображает значение 25. User Story # 7: я могу увидеть элемент с соответствующим <code>id="timer-label"</code> , который содержит строку, указывающую, что сеанс инициализирован (например,« Session ») , User Story # 8: Я вижу элемент с соответствующим <code>id="time-left"</code> . ПРИМЕЧАНИЕ. При приостановке или запуске значение в этом поле должно всегда отображаться в формате <code>mm:ss</code> (т.е. 25:00). User Story # 9: Я вижу кликабельный элемент с соответствующим <code>id="start_stop"</code> . User Story # 10: Я вижу кликабельный элемент с соответствующим <code>id="reset"</code> . User Story # 11: Когда я нажимаю элемент с идентификатором <code>reset</code> , любой рабочий таймер должен быть остановлен, значение в <code>id="break-length"</code> должно возвращаться к <code>5</code> , значение в <code>id="session-length"</code> должно возвращаться до 25, а элемент с <code>id="time-left"</code> должен сбрасываться в состояние по умолчанию. User Story # 12: Когда я нажимаю элемент с идентификатором <code>break-decrement</code> , значение в <code>id="break-length"</code> уменьшается на значение 1, и я могу видеть обновленное значение. User Story # 13: Когда я нажимаю на элемент с идентификатором <code>break-increment</code> , значение в <code>id="break-length"</code> увеличивается на значение 1, и я могу видеть обновленное значение. User Story # 14: Когда я нажимаю элемент с идентификатором сокращения <code>session-decrement</code> , значение в <code>id="session-length"</code> уменьшается на значение 1, и я могу видеть обновленное значение. User Story # 15: Когда я нажимаю элемент с идентификатором <code>session-increment</code> , значение в <code>id="session-length"</code> увеличивается на значение 1, и я могу видеть обновленное значение. User Story # 16: Я не должен был устанавливать длину сеанса или прерывания до &#x3C;= 0. User Story # 17: Я не должен был устанавливать сессию или длину прерывания до 60. Пользовательская история № 18: Когда я сначала нажмите элемент с <code>id="start_stop"</code> , таймер должен начать работать со значения, отображаемого в настоящее время в <code>id="session-length"</code> , даже если значение было увеличено или уменьшено с первоначального значения 25. User Story # 19 : Если таймер запущен, элемент с id <code>time-left</code> должен отображать оставшееся время в формате <code>mm:ss</code> (декрементирование на значение 1 и обновление дисплея каждые 1000 мс). User Story # 20: Если таймер запущен, и я нажимаю на элемент с <code>id="start_stop"</code> , обратный отсчет должен приостанавливаться. User Story # 21: Если таймер приостановлен, и я нажимаю на элемент с <code>id="start_stop"</code> , обратный отсчет должен возобновиться с точки, в которой он был приостановлен. User Story # 22: Когда обратный отсчет сеанса достигает нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), и начинается новый обратный отсчет, элемент с идентификатором <code>timer-label</code> должен отображать строку, указывающую, что начался перерыв. User Story # 23: Когда обратный отсчет сеанса достигнет нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН доходить до 00:00), начинается новый обратный отсчет, отсчитывающий от значения, отображаемого в настоящее время в элементе <code>id="break-length"</code> . User Story # 24: Когда обратный отсчет доходит до нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), и начинается новый обратный отсчет, элемент с идентификатором <code>timer-label</code> должен отображать строку, указывающую, что сеанс начался. User Story # 25: Когда обратный отсчет доходит до нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), должен начинаться отсчет нового сеанса, отсчитывающий от значения, отображаемого в настоящее время в элементе <code>id="session-length"</code> . User Story # 26: Когда обратный отсчет достигает нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), должен звучать звук, указывающий, что время вверх. Это следует использовать в HTML5 <code>audio</code> тегов и имеет соответствующий <code>id="beep"</code> . User Story # 27: Звуковой элемент с <code>id="beep"</code> должен быть 1 секунду или дольше. User Story # 28: Звуковой элемент с идентификатором <code>beep</code> должен прекратить воспроизведение и перематываться до начала, когда щелкнут элемент с идентификатором <code>reset</code> . Вы можете создать свой проект, <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</section>

Build a Pomodoro Clock

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank">https://codepen.io/freeCodeCamp/full/qRZeGZ</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу элемент оболочки с соответствующим <code>id="quote-box"</code> . User Story # 2: В <code>#quote-box</code> я вижу элемент с соответствующим <code>id="text"</code> . User Story # 3: В <code>#quote-box</code> я вижу элемент с соответствующим <code>id="author"</code> . User Story # 4: В <code>#quote-box</code> я вижу элемент с кликабелем с соответствующим <code>id="new-quote"</code> . User Story # 5: В <code>#quote-box</code> я вижу кликабельную <codea< code=""> элемент с соответствующим <code>id="tweet-quote"</code> . User Story # 6: При первой загрузке моя машина цитирования отображает случайную цитату в элементе с <code>id="text"</code> . User Story # 7: При первой загрузке моя машина цитирования отображает автора случайной цитаты в элементе с <code>id="author"</code> . User Story # 8: Когда нажата кнопка <code>#new-quote</code> , моя машина цитирования должна получить новую цитату и отобразить ее в элементе <code>#text</code> . User Story # 9: Моя машина цитирования должна использовать автора <code>#new-quote</code> нажатии кнопки <code>#new-quote</code> и отображать ее в элементе <code>#author</code> . User Story # 10: Я могу прокрутить текущую цитату, щелкнув элемент <code>#tweet-quote</code> <code>a</code> . Этот элемент должен включать <code>a</code> <code>"twitter.com/intent/tweet"</code> путь в этом <code>href</code> атрибута чирикать текущую котировку. User Story # 11: Элемент оболочки <code>#quote-box</code> должен располагаться по горизонтали. Запустите тесты с уровнем масштабирования браузера на 100% и увеличьте страницу. Вы можете создать свой проект, <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли. </codea<>
</section>

Build a Random Quote Machine

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank">https://codepen.io/freeCodeCamp/full/wgGVVX</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Мой калькулятор должен содержать интерактивный элемент, содержащий знак <code>=</code> (знак равенства) с соответствующим <code>id="equals"</code> . User Story # 2: Мой калькулятор должен содержать 10 интерактивных элементов, содержащих по одному номеру от 0 до 9, со следующими идентификаторами: <code>id="zero"</code> , <code>id="one"</code> , <code>id="two"</code> , <code>id="three"</code> , <code>id="four"</code> , <code>id="five"</code> , <code>id="six"</code> , <code>id="seven"</code> , <code>id="eight"</code> и <code>id="nine"</code> . User Story # 3: Мой калькулятор должен содержать 4 элемента с возможностью клика, каждый из которых содержит один из 4 основных математических операторов со следующими идентификаторами: <code>id="add"</code> , <code>id="subtract"</code> , <code>id="multiply"</code> , <code>id="divide"</code> , User Story # 4: Мой калькулятор должен содержать интерактивный элемент, содержащий a <code>.</code> (десятичной точки) с соответствующим <code>id="decimal"</code> . User Story # 5: Мой калькулятор должен содержать интерактивный элемент с <code>id="clear"</code> . User Story # 6: Мой калькулятор должен содержать элемент для отображения значений с соответствующим <code>id="display"</code> . User Story # 7: В любое время нажатие кнопки очистки очищает входные и выходные значения и возвращает калькулятор в исходное состояние; 0 должен отображаться в элементе с идентификатором <code>display</code> . User Story # 8: Когда я вводил числа, я должен был видеть мой ввод в элементе с идентификатором <code>display</code> . User Story # 9: В любом порядке я должен иметь возможность добавлять, вычитать, умножать и делить цепочку чисел любой длины, а когда я нажимаю <code>=</code> , правильный результат должен отображаться в элементе с идентификатором <code>display</code> . User Story # 10: при вводе чисел мой калькулятор не должен допускать, чтобы число начиналось с нескольких нулей. User Story # 11: После нажатия десятичного элемента a <code>.</code> следует добавить к отображаемому в данный момент значению; два <code>.</code> в одном номере не должны приниматься. User Story # 12: Я должен выполнять любую операцию (+, -, *, /) для чисел, содержащих десятичные точки. User Story # 13: Если последовательно введено 2 или более операторов, выполняемая операция должна быть последним введенным оператором. User Story # 14: нажатие оператора, следующего за <code>=</code> должно начать новый расчет, который работает в результате предыдущей оценки. User Story # 15: Мой калькулятор должен иметь несколько десятичных знаков точности, когда дело доходит до округления (обратите внимание, что нет точного стандарта, но вы должны иметь возможность обрабатывать вычисления, такие как <code>2 / 7</code> с разумной точностью, по крайней мере, до 4 знаков после запятой) , Примечание. В калькуляторе калькулятора. Следует отметить, что есть две основные школы мышления в логике ввода калькулятора: логика <dfn>непосредственного выполнения и логика</dfn> <dfn>формулы</dfn> . В нашем примере используется логика формулы и соблюдается порядок приоритетности операций, немедленное выполнение не выполняется. Любой из них является приемлемым, но учтите, что в зависимости от того, какой вы выбираете, ваш калькулятор может давать разные результаты, чем наши, для определенных уравнений (см. Пример ниже). Пока ваша математика может быть проверена другим калькулятором производства, пожалуйста, не считайте это ошибкой. ПРИМЕР: <code>3 + 5 x 6 - 2 / 4 =</code> <ul><li> Немедленная логика выполнения: <code>11.5</code> </li><li> Логика формулы / выражения: <code>32.5</code> </li></ul> Вы можете создать свой проект, <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</section>