Counter Task
Создать схожую верстку: две кнопки и текстовое поле с отображением начального числа счетчика. Реализовать следующий функционал: при нажатии на кнопку "+" увеличивать счетчик на 1, когда счетчик станет равен 10, кнопка должна стать не активной (по нажатию, счетчик больше не увеличивается) и появиться сообщение (alert), что достигнут максимум счетчика, при нажатии на кнопку "-" уменьшать счетчик на 1, если счетчик станет равен 0, вывести сообщение (alert) что достигнут минимум счетчика.
Comment Form Task
Создать схожую верстку: четыре текстовых поля и кнопка отправки комментария. Создать пустой массив, для хранения созданных комментариев. Реализовать следующий функционал: при нажатии на кнопку, проверить чтобы все четыре поля не были пустыми, если они не пустые, сформировать объект со следующими пятью свойствами: id, title, body, rating, author. Свойству id присваивать число, равное длине массива плюс один. После создания объекта, поместить его в конец созданного вами массива с комментариями и очистить все поля. Массив с комментариями вывести при помощи console
Comment Section Task
Создать схожую верстку: карточки с комментариями, а также форму для вывода комментариев, которая содержит: четыре поля и кнопку. Новые комментарии добавляются в конце уже созданных комментариев. Форма создания комментариев дублирует функционал предыдущего задания, с добавлением следующего, нового функционала: если строка с сообщением (свойство body) больше 55 символов, обрезать ее и вставить в конце три точки; провести проверку поля автора, если комментарий с таким же автором уже был написан, изменить рейтинг доверия на "5".
News Task
Создать схожую верстку: Кнопка с отображением постов, кнопка с сортировкой по названию, select с выбором имени автора, кнопка удалить все. Скачать предоставленный файл с массивом новостей, вывести новости на экран и реализовать следующий функционал: сортировку новостей по названию, фильтр новостей по имени автора, удаление всех новостей по нажатию на кнопку. Скачать файл
Accordions Task
Создать схожую верстку: Четыре аккордеона (общий блок, внутри него: блок с вопросом и блок с ответом). Реализовать следующий функционал: изначально все вопросы открыты. В начальном положении вопросы должны быть "закрыты", стрелочка направлена вправо, по нажатию на вопрос или стрелочку вопрос открывается (ответ появляется снизу), стрелочка направлена вниз. *Класс поворота стрелочки необходимо написать самостоятельно. Стили для аккордеона можно скачать по этой ссылке или найти в исходниках в папке "css -> components -> accordion".
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, repellat!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, repellat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium blanditiis cum debitis esse ex illo iure neque optio quas! Aliquam asperiores, eaque et in ipsam iure labore mollitia, officia provident quaerat quas repudiandae sapiente suscipit? Ab illo incidunt, laborum magnam minima nobis suscipit ullam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, repellat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium blanditiis cum debitis esse ex illo iure neque optio quas! Aliquam asperiores, eaque et in ipsam iure labore mollitia, officia provident quaerat quas repudiandae sapiente suscipit? Ab illo incidunt, laborum magnam minima nobis suscipit ullam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, repellat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium blanditiis cum debitis esse ex illo iure neque optio quas! Aliquam asperiores, eaque et in ipsam iure labore mollitia, officia provident quaerat quas repudiandae sapiente suscipit? Ab illo incidunt, laborum magnam minima nobis suscipit ullam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, repellat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium blanditiis cum debitis esse ex illo iure neque optio quas! Aliquam asperiores, eaque et in ipsam iure labore mollitia, officia provident quaerat quas repudiandae sapiente suscipit? Ab illo incidunt, laborum magnam minima nobis suscipit ullam.
todo list
Создать схожую верстку. У вас есть кнопка создания новой заметки и кнопка "удалить все". По нажатию на кнопку "удалить все" - удаляются все элементы списка. Рядом с каждой заметкой есть три кнопки: удалить, редактировать, готово. Кнопка "удалить" - удаление текущей заметки; Кнопка "редактировать" - редактирование текущей заметки, повторное нажатие сохраняет изменения; Кнопка "готово" - зачеркивает текущую заметку и делает остальные кнопки данной заметки неактивными, повторное нажатие возвращает поле в исходное состояние
Open Comment
Создать схожую верстку. Реализовать следующее: если длина комментария больше 150 символов, необходимо обрезать его, и предварительно, текст комментария поместить в атрибут "title", и сделать комментарий кликабельным, по нажатию на комментарий, открывается модальное окно, в котором отображается полный текст комментария. При повторном нажатии на окно, комментарий закрывается. Класс для "открытия" модального окна displayShow. Для демонстрации нажмите на 2й комментарий.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam
11.02.2024 -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam lLorem ipsum dolor sit amet, consectetur adipisicing elit. Aut impedit modi obcaecati tenetur voluptas! Consequuntur, ea, earum? Alias corporis delectus dolor eius enim maiores modi placeat, quis ratione rerum sed sequi sit temporibus! At deleniti dolorum earum, eius iusto nisi obcaecati possimus sequi tenetur voluptas voluptate voluptatem. Aliquid dicta earum hic laudantium maiores nostrum quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid commodi consequatur corporis cumque ea eaque, eveniet ex ipsam molestiae nesciunt nulla odio odit pariatur ratione sint totam veritatis! Alias aspernatur atque autem cum, est ipsum magnam maiores mollitia provident soluta! Aut deserunt, dolorem doloremque ipsam iste minima nihil nostrum officiis quaerat quod, tempore temporibus!
189.03.2024 -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam
12.03.2024 -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam
22.05.2020 -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam
08.06.2021 -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam
01.01.2019 -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam
21.09.2014 -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam
11.07.2023 -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam
22.02.2022 -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cumque dolore doloremque facere laudantium, minus nemo quaerat quibusdam
11.08.2020
Fetch Data
Создать схожую верстку!!! Реализовать следующее: у Вас есть форма для отправки данных на сервер (создание постов), Вам необходимо реализовать функционал формы: 1. поля не должны быть пустыми; После того, как Вы заполните эти поля, какими-либо данными постов, по нажатию на кнопку "Отправить", данные должны сохраниться на сервер, а Ваш вновь созданный пост, должен отобразиться справа. По нажатию на кнопку получить посты, все Ваши посты должны быть отображены справа от формы. URL для получения всех постов: http://make-run-now.ru/v${номер вашего варианта}/users. URL для добавления поста: http://make-run-now.ru/v${номер вашего варианта}/create-user; URL для изменения поста: http://make-run-now.ru/v${номер вашего варианта}/change-user; URL для удаления поста: http://make-run-now.ru/v${номер вашего варианта}/delete-user. Свойства которые вам приходят для отображения: title, body, author
-
Alex
alex@gmail.com
89001554455
-
Alex
alex@gmail.com
89001554455
-
Alex
alex@gmail.com
89001554455
-
Alex
alex@gmail.com
89001554455
-
Alex
alex@gmail.com
89001554455
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate deleniti est non quos ullam.
Id: 15
Rating: 3
Alex
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate deleniti est non quos ullam.
Id: 15
Rating: 3
Alex
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate deleniti est non quos ullam.
Id: 15
Rating: 3
Alex
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate deleniti est non quos ullam.
Id: 15
Rating: 3
Alex
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate deleniti est non quos ullam.
Id: 15
Rating: 3
Alex
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate deleniti est non quos ullam.
Id: 15
Rating: 3
Alex
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate deleniti est non quos ullam.
Id: 15
Rating: 3
Alex
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate deleniti est non quos ullam.
Id: 15
Rating: 3
Alex