Занимательные задачи JavaScript
788 subscribers
8 links
Ваша цель: решить задачу максимально изящно и просто. Предлагайте свои варианты решения в комментариях. Задачи выходят каждый день в 14.00.
Download Telegram
Задача 40
Случайный чекбокс

На странице есть чекбоксы, отмеченные и нет. Сделайте так, чтобы по нажатию на кнопку случайный чекбокс сменил свое состояние (с отмеченного на неотмеченное и наоборот).
🕊1
Задача 41
Максимальная ячейка таблицы

Дана таблица с числами. По нажатию на кнопку найдите ячейку, в которой хранится максимальное число, и сделайте ее фон красным.
🕊1
Задача 42
Ячейки сетки на канвасе

С помощью canvas нарисуйте сетку и сделайте так, чтобы по клику на любую ячейку сетки эта ячейка становилась закрашенной. А по клику на закрашенную ячейку она должна становится пустой.
👍4🕊1
Задача 43
Наличие полосы прокрутки в элементе

Дан элемент. Узнайте, есть ли в нем полоса прокрутки в данный момент или нет.
🕊1
Задача 44
Повтор чисел в массиве

Дан массив с целыми положительными числами, например, вот такой:
[2, 3, 1, 4]

Сделайте так, чтобы каждое число в массиве повторилось столько раз, какое значение имеет это число: двойка - два раза, тройка - три раза и так далее. То есть у нас должен получится следующий массив:
[2, 2, 3, 3, 3, 1, 4, 4, 4, 4]
👍2🕊1
Задача 45
Перемещение элемента по клику

Дан элемент страницы. Нажмем на этот элемент, тем самым активировав его. Повторное нажатие на страницу должно приводить к перемещению элемента (его центра) в эту точку клика.
🕊1
Задача 46
Селект и радио кнопочки

Дан селект и радио кнопочки, количество радио равно количеству пунктов в селекте. Сделайте так, чтобы при выборе пункта в селекте автоматически становилась отмеченной соответствующая радио кнопочка.
🕊1
Задача 47
Ограничение на чекбоксы

На странице есть чекбоксы, изначально неотмеченные. Сделайте так, чтобы только 3 чекбокса из них могли быть отмеченными. При попытке отметить 4-тый чекбокс ничего не должно происходить.
🕊1
Задача 48
Покрасить body в случайный фон

Сгенерируйте случайное шестнадцатеричное значение для свойства background-color и установите его для тега body. Сделайте так, чтобы цвет менялся каждые 5 секунд.
👍1🕊1
Задача 49
Бешенная кнопка

Сделайте кнопку, которая будет убегать от пользователя на десяток пикселей, при попытке навести на нее мышь, чтобы нажать. Кнопка не должна убегать за экран.
👍1🕊1
Задача 50
Запрет ввода символов

Запретите водить некоторые символы в инпут. Любые другие символы должны вводится, а эти просто не будут появляться, сколько бы мы ни жали на них.
🕊1
Задача 51
Сохранение размера textarea

Дан текстареа. Как известно, его размер можно менять, потянув за уголок. Сделайте так, чтобы можно было изменить размер этого текстареа, а затем обновить страницу - и изменения не должны пропасть.
👍2🕊1
Задача 52
Кружок по клику

По клику на экран в месте клика должен появляться кружок с центром в месте клика и радиусом 10px (при каждом клике новый кружок). Если кликнуть на такой кружок - он должен удалиться.
👍2🕊1
Задача 53
Обратный отсчет с сохранением

По заходу на страницу должен начать тикать обратный отсчет от 100 до 0. Как только отсчет дойдет до нуля - он должен остановится и должна появится надпись о том, что отсчет окончен. Отсчет должен продолжаться с прерванного места и после обновления страницы.
🕊1
Задача 54
Дополнение массива до заданного размера

Реализуйте функцию, которая будет дополнять массив заданными элементами до заданного размера. Пример работы такой функции:
let res = func([1, 2, 3], 6, 0); // дополним нулями до размера 6
console.log(res); // выведет [1, 2, 3, 0, 0, 0]
🕊1
Задача 55
Перемена состояний чекбоксов

Пусть даны чекбоксы, отмеченные и нет. По нажатию на кнопку сделайте так, чтобы все чекбоксы сменили свое состояние.
🕊1
Задача 56
Генератор пароля

Напишите скрипт, который генерирует случайную строку заданного размера. В строке обязательно должны быть маленькие и большие латинские буквы, цифры и подчеркивание.
👍1🕊1
Задача 57
Адаптация ширины инпута

Дан инпут. Сделайте так, чтобы при вводе текста, если текст длиннее ширины инпута, ширина инпута увеличивалась так, чтобы текст в него поместился.
👍1🕊1
Задача 58
Подсчет стран в массиве объектов

Даны города и их страны следующей структуре:
let data = [
{
country: 'Россия',
city: 'Москва',
},
{
country: 'Беларусь',
city: 'Минск',
},
{
country: 'Россия',
city: 'Питер',
},
{
country: 'Россия',
city: 'Владивосток',
},
{
country: 'Украина',
city: 'Львов',
},
{
country: 'Беларусь',
city: 'Могилев',
},
{
country: 'Украина',
city: 'Киев',
},
];
Подсчитайте количество стран. В качестве результата получите объект, в котором ключами будут страны, а значениями - их количество.
👍2🕊1
Задача 59
Конвертация массива городов и стран

Дан список городов и их стран, хранящийся в следующей структуре:
let data = [
{
country: 'country1',
city: 'city11',
},
{
country: 'country2',
city: 'city21',
},
{
country: 'country3',
city: 'city31',
},
{
country: 'country1',
city: 'city12',
},
{
country: 'country1',
city: 'city13',
},
{
country: 'country2',
city: 'city22',
},
{
country: 'country3',
city: 'city31',
},
]

Напишите код, которой переделает структуру данных вот в такую:
{
'country1': [
'city11', 'city12', 'city13',
],
'country2': [
'city21', 'city22'
],
'country3': [
'city31', 'city32'
],
}
👍1🕊1