Очень простые задачи для очень юного фронтэндера

Вот Вам ещё пачка очень простых задачек по Javascript/HTML+CSS. Для их решения можно практически не знать ничего программирование/вёрстку, идеальные для тех, кто только решил вкатываться.

Задачи идут с возрастающей сложностью, и задуманы так, что решение прошлой задачи можно пере использовать в решении следующей, чтобы делать поменьше однотипных действий.

1. Сверстать простейшую страничку

• Заголовок страницы: "Task # 1"
• Блок шириной 300px расположенный по центру с сереньким фоном и отступами по краям
• H1 заголовок "Task # 1"

2. Сверстать чуть более сложную страничку

Похоже на задание №1, только добавляется 2 блока "Пост" с датой выделенной цветом, автор, выделенный другим цветом и сообщением расположенным ниже. Блок выделяется чертой снизу.

3. Добавить форму ввода

Нужно добавить форму ввода: текстовый инпут для имени пользователя, кнопка, и textarea растянутая на всю ширину блока, и с минимальной высотой 100px. Форма отделена от постов жирной горизонтальной чертой.

4. Проверить форму ввода, на пустые данные

4. По нажатию на кнопку "SEND MESSAGE", проверить форму ввода, если хоть в одном инпуте пусто, то вывести алерт .

5. По нажатию на кнопку "SEND MESSAGE" добавить новый пост ниже.

Сперва, конечно, проверяем форму на пустые данные, и, если всё ок, то добавляем новый блок с сообщением ниже остальных сообщений.

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

6. Первые сообщения в списке генерировать а не хардкодить

Сейчас, наверняка, первые два сообщения от имени "Ololoev" и "Sychov" - это захардкоженые 2 блока внутри странички. Теперь это нужно переделать. Список сообщений должен лежать в отдельном массиве.

<script>
let postList = [
  {
    id: 0,
    date: new Date(),
    name: 'Ololoev',
    message: 'Hello this is first pos'
  },
  {
    id: 1,
    date: new Date(),
    name: 'Sychov',
    message: 'Hello this is second post'
  }
];
</script>

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

Не забудьте, когда добавляете новое сообщение оно должно сперва добавиться в postList, а затем пересоздаём сообщение на страничке.

7. Сделать поиск

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

На этом пока всё. А если Вы застряли на каком-то задании, вот архив с решениями, но лучше не подглядывайте, а то атата!