Практика по фреймворку Vue

Реализуйте чеклист. Должен быть инпут с добавлением задачи, а над ним - список с задачами. Возле каждой задачи чекбос. Если нажать на чекбокс - задача становится выполненной, перечеркивается и становится серого цвета, чекбокс при этом пропадает. Справа от любой задачи должен быть крестик для удаления этой задачи.

Пусть новая задача добавляется по нажатию клавиши Enter.

Задачу также можно поредактировать, если сделать двойной клик по ней - в этом случае вместо пункта списка появляется инпут с текстом задачи, можно поредактировать текст задачи, нажать Enter и задача изменится. Инпут при этом исчезнет.

Реализуйте органайзер. Он будет представлять собой календарь. По нажатию на любую дату с боку календаря должен появится список дел, запланированных на эту дату. Дела можно добавлять, удалять, редактировать, помечать сделанными.

Реализуйте блокнотик, в который можно добавлять новые записи. Записи появляются слева от блокнотика в виде ссылок с текстом в виде даты-времени создания этой записи. Можно нажать на ссылку и в блокноте появится текст за эту дату. Пусть сам блокнотик представляет собой textarea, расположенный по центру страницы.

Тесты

Дан массив с вопросами и правильными ответами на них:

[ { question: 'Вопрос 1', answer: 'Ответ 1' }, { question: 'Вопрос 2', answer: 'Ответ 2' }, { question: 'Вопрос 3', answer: 'Ответ 3' }, ]

Реализуйте тест. Покажите все вопросы на экране, а под каждым вопросом выведите инпут для ввода правильного ответа.

Пусть пользователь вбивает свой ответ в инпут и нажимает на Enter. Сразу же проверьте ответ пользователя на данный вопрос. Выведите над инпутом сообщение о правильности или неправильности ответа. Кроме того, покрасьте границу инпута в красный цвет, если дан неправильный ответ, и в зеленый - если дан правильный.

Дан следующий массив с вопросами и вариантами ответов:

[ { question: 'Вопрос 1', answers: [ 'Ответ 1', 'Ответ 2', 'Ответ 3', 'Ответ 4', 'Ответ 5', ], right: 3, // номер правильного ответа }, { question: 'Вопрос 2', answers: [ 'Ответ 1', 'Ответ 2', 'Ответ 3', 'Ответ 4', 'Ответ 5', ], right: 1, // номер правильного ответа }, { question: 'Вопрос 3', answers: [ 'Ответ 1', 'Ответ 2', 'Ответ 3', 'Ответ 4', 'Ответ 5', ], right: 5, // номер правильного ответа }, ]

Реализуйте тест с вопросами и вариантами ответов. Каждый вопрос должен быть в своем абзаце, а под ним - 5 радиокнопочек, с помощью которых можно выбрать один из ответов. Если ответ правильный - вопрос должен покраситься в зеленый цвет, а если неправильный - в красный.

Реализуйте тест, в котором показывается один вопрос, 5 чекбоксов для ответа (может быть несколько правильных ответов). Под чекбоксами ссылка 'следующий вопрос'. По нажатию на эту ссылку вместо текущего вопроса показывается следующий. Когда вопросы заканчиваются, в последнем вопросе будет стоять ссылка не 'следующий вопрос', а 'показать результат'.