ПОМОГИТЕ ПОЖАЛУЙСТА, это должно быть с помощью js и html

Question

В любом блоке создает 2 поля и 1 кнопку
При заполнении полей и нажатии кнопки, Значение 1 поля попадают в Титры, значение второго поля - в описание
В итоге ты получаешь новый список "Новостей", где теперь первая новость это та, которую ты создала
с Сайта JsonePlaceHolder выводишь 3 новости, остальные появляются те, которые ты добавляешь

fetch('jsonplaceholder.typicode.com/posts').then((response) => response.json()).then((json) => {
  let array = [json[0], json[1], json[2]] console.log(array) for (i = 1; i < array.length; i++) {
    let number = '<li>' + i + '</li>'
    let title = '<h4 id="title">' + array[i].title + '</h4>'
    let body = '<p id="news">' + array[i].body + '</p>'
    document.getElementById('base_block_two').innerHTML += number + title + body
  }
})

<div class="news_fields">
  <input class="input_text" type="text" placeholder=" title" />
  <textarea id="textarea_text" cols="30" rows="10" placeholder=" news"></textarea>
  <button class="button_create">create</button>
</div>

Answer 1

const postsBlock = document.querySelector('.posts');
const createPost = document.querySelector('.new-post-btn');
const newPostTitle = document.querySelector('.new-post-title');
const newPostBody = document.querySelector('.new-post-body');

createPost.addEventListener('click', () => {
  if (newPostTitle.value.length < 18) {
    alert('Минимальная длинна заголовка 18 символов!');
    return;
  }

  if (newPostBody.value.length < 32) {
    alert('Минимальная длинна поста 32 символов!');
    return;
  }
  createNewPost(newPostTitle.value, newPostBody.value);
  newPostTitle.value = null;
  newPostBody.value = null;
})

function createNewPost(title, body) {
  let newPost = document.createElement('div');
  newPost.className = 'post';

  let postTitle = document.createElement('h1');
  postTitle.textContent = title;
  postTitle.className = 'post-title';

  let postBody = document.createElement('p');
  postBody.textContent = body;
  postBody.className = 'post-body';

  newPost.append(postTitle);
  newPost.append(postBody);
  postsBlock.append(newPost);
}

let xmlRequest = new XMLHttpRequest();
xmlRequest.open('GET', 'https://jsonplaceholder.typicode.com/posts');

xmlRequest.onload = () => {
  let posts = JSON.parse(xmlRequest.responseText);

  for (let post of posts) {
    createNewPost(post.title, post.body);
    if (post.id == 3) break;
  }
}

xmlRequest.send();

* {
  box-sizing: border-box;
}

.create-post {
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 2px solid #000;
}

.create-post > label {
  width: 100%;
  margin: 24px 0 4px;
}

.new-post-title {
  width: 100%;
  padding: 4px 8px;
}

.posts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.new-post-body {
  width: 100%;
}

.post {
  padding: 12px;
  margin: 12px;
  min-width: 280px;
  width: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, .4);
}

.post-title {
  text-transform: uppercase;
  word-wrap: break-word;
}

.post-body {
  word-wrap: break-word;
}

.post-body:first-letter {
  text-transform: uppercase;
  font-weight: 700;
}

.new-post-btn {
  padding: 6px 12px;
  margin: 64px 0 32px;
  border: 2px solid #000;
  background-color: #FFF;
  cursor: pointer;
}

<div class="create-post">
  <label>Заголовок поста</label>
  <input type="text" class="new-post-title">
  <label>Тески поста</label>
  <textarea rows=5 class="new-post-body"></textarea>
  <button class="new-post-btn">Добавить новый пост</button>
</div>

<div class="posts"></div>

БЛОГ НА HUSL

ПОМОГИТЕ ПОЖАЛУЙСТА, это должно быть с помощью js и html

Ответы (1 шт):