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

Работа моделью

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

На ng-blur

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

Дан массив стран. Выведите его в виде списка <ul>. Сделайте инпут, в который вводится новая страна. По потери фокуса эта страна должна добавляться в конец списка <ul>.

На ng-checked

Дан чекбокс. Даны две ссылки. По нажатию на первую ссылку сделайте чекбокс отмеченным, а по нажатию на второю - не отмеченным.

Дан чекбокс. Дана ссылка. По нажатию на ссылку меняйте состояние чекбокса на противоположное (с отмеченного на неотмеченное и наоборот).

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

Дан массив курсов с пометкой 'пройден' (принимает значение true или false):

var courses = {
	'html': true,
	'css': true,
	'php': false,
	'js': true,
	'angular': false,
};

Выведите эти курсы в виде списка <ul> так, чтобы перед каждым языком стоял отмеченный или неотмеченный чекбокс:

<ul>
	<li><input type="checkbox" checked> html</li>
	<li><input type="checkbox" checked> css</li>
	<li><input type="checkbox"> php</li>
	<li><input type="checkbox" checked> js</li>
	<li><input type="checkbox"> angular</li>
</ul>

Закрепление

Дан массив курсов с пометкой 'пройден' (passed, принимает значение true или false):

var courses = [
	{lang: 'html', passed: true},
	{lang: 'css', passed: true},
	{lang: 'php', passed: false},
	{lang: 'js', passed: true},
	{lang: 'angular', passed: false},
];

Выведите эти курсы в виде списка <ul> так, чтобы перед каждым языком стоял отмеченный или неотмеченный чекбокс:

<ul>
	<li><input type="checkbox" checked> html</li>
	<li><input type="checkbox" checked> css</li>
	<li><input type="checkbox"> php</li>
	<li><input type="checkbox" checked> js</li>
	<li><input type="checkbox"> angular</li>
</ul>

Дан массив стран. Выведите его в виде списка <ul>. Сделайте инпут, с помощью которого можно будет добавлять в список новые страны. Каждый раз после добавления страны список должен сортироваться. Сделайте также инпут, в который будет писаться номер страны. По окончанию ввода эта страна должна удалиться из списка.

Решите предыдущую задачу при условии, что в инпут будет писаться не номер страны, а ее название (в любом регистре).

Дан массив стран. Выведите его в виде списка <ul>. Сделайте чекбокс. Если чекбокс не отмечен - показываются все страны, а если отмечен - только те страны, в которых есть буква 'б'.

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

Дан массив пользователей ['Коля', 'Вася', 'Петя']. Выведите его в виде списка <ul>. Дан еще один массив ['Иван', 'Дима', 'Кирилл']. Дана кнопка. По нажатию на кнопку отрезайте первый элемент из второго массива и добавляйте его в конец списка <ul> пока элементы в массиве не закончатся.

Дан массив с числами. Выведите его в виде списка <ul>. Под списком должна стоять сумма элементов этого массива. Сделайте инпут, с помощью которого будут добавляться новые числа в список. Сумма при этом должна пересчитываться заново.