Чекбоксы + массивы

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

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

Чекбоксы + ифы

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

Дан массив с юзерами:

this.state = {
	users: [
		{name: 'Коля', surname: 'Иванов', age: 30},
		{name: 'Вася', surname: 'Петров', age: 40},
		{name: 'Петя', surname: 'Сидоров', age: 50},
	]
};

Выведите элементы этого массива в виде списка ul. Имя, фамилия и возраст каждого юзера должны стоять в одной li через пробел. Внутри каждой li сделайте чекбокс. Если чекбокс не отмечен, то в li должно быть только имя юзера, а если отмечен - имя, фамилия и возраст.

Редактирование элементов

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

Дан следующий массив:

this.state = {
	users: [
		{name: 'Коля', age: 30},
		{name: 'Вася', age: 40},
		{name: 'Петя', age: 50},
	]
};

Выведите его на экран в виде таблицы:

<table>
	<tr>
		<td>Коля</td><td>30</td>
	</tr>
	<tr>
		<td>Вася</td><td>40</td>
	</tr>
	<tr>
		<td>Петя</td><td>50</td>
	</tr>
</table>

Сделайте так, чтобы внутри каждой td была кнопка 'редактировать', по нажатию на которую текст этой td можно будет поредактировать с помощью появившегося в ней инпута.

Практика

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

Дан текстареа и кнопка. В текстареа пользователь нашего сайта будет вводить свои заметки. После нажатия на кнопку введенный текст должен появится под текстареа в виде блока div. Таких заметок может быть много. В каждой заметке должен стоять заголовок (заметка1, заметка2 и так далее), время создания заметки (часы, минуты, секунды), а также должна быть кнопка 'удалить' и кнопка 'редактировать'.

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

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

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

Дан массив с работниками. У каждого работника есть имя, фамилия, зарплата, пол. Выведите этих работников на экран в виде таблицы. Под таблице сделайте форму, с помощью которой в таблицу можно будет добавить нового работника. В этой форме имя, фамилия, зарплата будут инпутами, а пол - селектом, в котором можно будет выбрать один из двух вариантов.

Дан массив с работниками. У каждого работника есть имя, фамилия, зарплата. Выведите этих работников на экран в виде таблицы. Причем выведите только первых 10 работников, а над таблицей сделайте ссылки: 1, 2, 3, 4 и так далее. По нажатию на каждую ссылку в таблице будет отображаться заданный десяток работников. Ссылки над таблицей должны сгенерироваться автоматически исходя из количества работников.

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

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

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

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

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