Задачи для решения

Урок

Реализуйте калькулятор. Должны быть кнопки цифр и операций. По нажатию на кнопку '=' должен посчитаться результат. Совет: используйте фунцию eval.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте игру крестики-нолики. Играет два человека, на одном поле по очереди.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

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

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

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

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

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

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

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

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

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте автодополнение. Суть: дан, к примеру, массив стран. Дан инпут. Когда вы вводите первые буквы страны под инпутом появляется выпадающий список, в котором расположены страны, которые начинаются на те буквы, которые вы ввели. Чем больше букв вы вводите - тем меньше стран в списке. Страну можно выбрать, кликнув по ней мышкой - в этом случае ее название появится в инпуте. Список стран храните в массиве.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Сделайте игру. Суть - дана таблица с числами, распаложенными в случайном порядке в ячейках таблицы. Числа идут по порядку от 1 до N. Все числа разного размера и цвета. Играющему необходимо по порядку кликать по числам - сначала 1, потом 2 и так далее до N. Когда он кликает на правильную ячейку - она активируется и делает красный фон (предыдущие правильные ячейки не снимают выделение). Должен тикать таймер, на игру дается M секунд. Если не успел найти все числа по порядку - проиграл.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте попап. Суть: когда пользователь прокручивает страницу вниз на N пикселей - появляется баннер поверх содержимого. Этот баннер можно закрыть на крестик и он пропадет.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Решите предыдущую задачу, но при условии, что баннер появлятся не по прокрутке, а через N секунд после захода пользователя на страницу.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте календарик сдедующего вида: показаны дни текущего месяца (в ряд), слева стрелка 'предыдущий месяц', справа ссылка 'следующий месяц'. Сверху показан год и месяц, который мы смотрим. Если мы смотрим текущий месяц текущего года - текущий день должен быть как-то выделен.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Реализуйте квадратный календарик (как в винде).

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

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

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте вкладки - нажимая на каждую вкладку мы будем видеть ниже текст, соответствующий этой вкладке.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Реализуйте аккордион (погуглите, что это).

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

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

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.