admin

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Teste Front End</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  </head>

  <body>

    <!-- lateral do admin com o menu -->
    <aside id="lateral-admin">

        <!-- menu-mobile -->
        <div class="menu-mobile">
            <div class="trace-mobile-control">
               <div class="trace"></div>
               <div class="trace"></div>
               <div class="trace"></div>
            </div>
        </div>

        <!-- detail -->
        <div class="detail">

        </div>

        <!-- logo-footer -->
        <div class="logo-footer">

        </div>

    </aside>

    <!-- cabecalho admin -->
    <header id="cabecalho">

         <div class="header-part-01">

         </div>

         <div class="header-part-02">

         </div>

    </header>

    <!-- conteudo admin -->
    <section id="conteudo">
       <article id="conteudo" class="responsive">

         <div class="busca">
            <input type="search" name="busca" value="" placeholder="Buscar:" class="buscar">
            <input type="submit" name="filtrar" value="Filtrar" class="btn-filtrar">
         </div>

         <table class="data-content">
            <tbody>

              <tr>
                <td><h2 class="data-content-title">Título</h2></td>
              </tr>

              <tr>
                <!--<td><p class="data-content-text">Lorem ipsum dot sit amet</p></td>-->
                <!-- <td><a href="" class="btn-finalizar">Finalizar</a></td>-->
              </tr>

            </tbody>
         </table>

       </article>
    </section>

    <script type="text/javascript">

    function carregarItens(){

          var itens = "", url = "https://jsonplaceholder.typicode.com/todos";

          $.ajax({
             url: url,
             cache: false,
             dataType: "json",
             beforeSend: function(){
                $("h2").html("Carregando...");
             },
             error: function(){
                $("h2").html("Há algum problema com os dados.");
             },
             sucess: function(retorno){
                if(retorno[0].erro){
                   $("h2").html(retorno[0].erro);
                }
                else{
                    //Laço para criar as linhas da tabela
                    for(var i = 0; i < retorno.length; i++){
                        itens += "<tr>";
                        itens += "<td>" + retorno[i].id + "</td>";
                        itens += "<td>" + retorno[i].title + "</td>";
                        itens += "</tr>";
                    }
                    //Preencher a tabela
                    $(".data-content tbody").html(itens);

                    //Limpar status de Carregando
                    $("h2").html("Carregando");
                }
             }
          });
      }
    </script>

  </body>
</html>