chamatt

...
<header class="header-container container-fluid">
  <span class="header-title"> Blog Simples</span>
</header>

<main class="container conteudo"><!-- Blog vai aqui --></main>

<footer class="footer-container container-fluid">
  <span class="footer-title"> Copyright ® Matheus Vicente</span>
  <span class="footer-title"> Nenhum direito reservado</span>

chamatt

<h1 class="text-center mt-4 blog-title-header">Adicionar Post</h1>
<hr class="blog-title-separator" />
<div class="add-post-container">
  <form id="add-post-form">
    <input class="form-control add-post-title" type="text" name="title" placeholder="Titulo" />
    <textarea class="form-control add-post-body" name="body" placeholder="Corpo" >
    </textarea>
    <input class="form-control add-post-title" type="text" name="image" placeholder="URL da Imagem"/>
    <div class="text-center">
      <button type="submit" class="btn btn-primary add-post-button text-center">

chamatt

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(resposta => resposta.json())
  .then(json => FuncaoQueSeraExecutada(json));

chamatt

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    /* Transforma objeto em JSON */
    title: "titulo",
    body: "corpo do texto",
    userId: 1
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8" // Especifica que será enviado um JSON

chamatt

axios
  .get("https://jsonplaceholder.typicode.com/posts")
  .then(resposta => FuncaoQueSeraExecutada(resposta));

chamatt

axios
  .post("https://jsonplaceholder.typicode.com/posts", {
    title: "titulo",
    body: "corpo do texto",
    userId: 1
  })
  .then(resposta => FuncaoQueSeraExecutada(resposta));

chamatt

    <h1 class="text-center mt-4 blog-title-header">Posts</h1>
    <hr class="blog-title-separator" />
    <section class="blog-container">
        
      <!-- Cada post será um "article" e terá um post-id -->
      <article class="blog-post-container" data-post-id="1">
        <div class="row">
          <div class="blog-post-image col-3">
            <img src="https://bit.ly/2So2zvB"></img>

chamatt

.blog-post-container {
  width: 100%;
  box-shadow: 0px 0px 10px 0.01px rgba(50, 50, 50, 0.1);
  padding: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.blog-post-title {
  padding-left: 1em;

chamatt

function PostTemplate(titulo, corpo, imagem, id) {
  return `<article class="blog-post-container" data-post-id="${id}">
        <div class="row">
          <div class="blog-post-image col-3">
            <img src="${imagem || "https://bit.ly/2So2zvB"}" alt="Erro"></img>
          </div>
          <div class="col-7">
            <div class="blog-post-title">${titulo}</div>
            <div class="blog-post-body">${corpo}</div>
          </div>

chamatt

function ObterPosts() {
  const secaoblog = document.querySelector("section.blog-container"); // Seleciona o elemento do DOM

  axios.get("http://localhost:3000/posts").then(resposta => {
      // Faz uma Array com os posts no formato do template
      const ListaDePosts = resposta.data.map(post => PostTemplate(post.title, post.body, post.image, post.id)); 
      let PostsJuntos = ListaDePosts.reverse().join(); // Inverte a lista e junta todos os posts em uma string só
      if (ListaDePosts.length == 0) // Checamos se existe pelo menos um post no banco de dados, senão, mostramos uma mensagem.
          PostsJuntos = `<div class="alert alert-info" role="alert"> Nenhum post! Crie um novo! </div>`;
      secaoblog.innerHTML = PostsJuntos; // Insere a string dentro da seção dos posts