Практика №1. Простая веб-страница с HTML

Общее описание

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

Задания обязано быть сделано в собственной директории используя изначальный шаблон html файла из ресурсов index.html (может быть модернизирован) и внешний js файл в той же папке (создается самостоятельно).

Ресурсы

index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Изучаем JS в рамках html страницы</title>
</head>
<body>
	Эта страница содержит JS код который выполняется на стороне клиента.
	
	<br/>
	<button id="button-1">
	    Эта кнопка выводит сообщение в консоль
	</button>
	<button id="button-2">
	    Эта кнопка выводит оповещение в браузере
	</button>
	<br/>
	<button id="button-3">
	    Эта кнопка меняет цвет фона на красный
	</button>
	<button id="button-4">
	    Эта кнопка меняет цвет фона на белый
	</button>
	<br/>
	<textarea id="text-1">
	
	</textarea>
	<br/>
	<button id="button-5">
	    Сложить число выше с числом 6
	</button>
	
	<div id="answer">
	    ТУТ БУДЕТ ОТВЕТ
	</div>

</body>
</html>

Техническое задание

Необходимо добавить логику для кнопок:

  1. Первые две кнопки должны выводить информацию в консоль и в качестве оповещения в браузере.
  2. Кнопки 3-4 должны менять цвет фона в соответствии с текстом кнопки
  3. Кнопка 5 должна получить текст из текстового поля text-1, получить число из строки при помощи функции parseFloat, и проверить на NaN при помощи функции isNaN. Если это число - сложить с числом 6 и записать ответ в div с id answer.

Дополнительная часть

Вам необходимо добавить дополнительное поле ввода для 5 кнопки.
В итоге пользователь должен вписать два числа в два поля и в итоге получить ответ сложениях этих двух чисел.

Время на выполнение

На выполнение выделяется 1 практическая пара.
Градация баллов после дедлайна:

  • 1 пара: 50%
  • 2 пара: 0%

Баллы

Статус выполнения Количество баллов
Не сдано -2
Сдано 2
Дополнительное задание +2