Advertisement
campos20

index.html

Nov 16th, 2020
907
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.80 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- Required meta tags -->
  5.     <meta charset="utf-8" />
  6.     <meta
  7.      name="viewport"
  8.      content="width=device-width, initial-scale=1, shrink-to-fit=no"
  9.    />
  10.  
  11.     <!-- Bootstrap CSS -->
  12.     <link
  13.      rel="stylesheet"
  14.      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
  15.      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
  16.      crossorigin="anonymous"
  17.    />
  18.  
  19.     <link
  20.      rel="stylesheet"
  21.      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
  22.      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
  23.      crossorigin="anonymous"
  24.    />
  25.  
  26.     <title>Lista a Fazer</title>
  27.   </head>
  28.   <body>
  29.     <div class="container">
  30.       <h1 class="text-center">Lista a Fazer</h1>
  31.  
  32.       <form class="my-3" id="formulario">
  33.         <div class="form-row">
  34.           <div class="col">
  35.             <input
  36.              id="descricao-input"
  37.              type="text"
  38.              class="form-control"
  39.              placeholder="Descrição da tarefa"
  40.              required
  41.            />
  42.           </div>
  43.           <div class="col">
  44.             <input id="data-input" type="date" class="form-control" required />
  45.           </div>
  46.           <div class="col text-center">
  47.             <div class="form-check m-2">
  48.               <input id="feito-input" type="checkbox" />
  49.               <label for="feito-input">Feito</label>
  50.             </div>
  51.           </div>
  52.           <div class="col btn-group">
  53.             <button class="btn btn-primary">
  54.               <i class="fas fa-plus-circle"></i> Adicionar
  55.             </button>
  56.             <button type="reset" class="btn btn-warning">
  57.               <i class="fas fa-eraser"></i> Limpar
  58.             </button>
  59.           </div>
  60.         </div>
  61.       </form>
  62.  
  63.       <table class="table table-hover table-striped table-bordered">
  64.         <thead class="thead-dark">
  65.           <th>#</th>
  66.           <th>Descrição</th>
  67.           <th>Data</th>
  68.           <th>Feito</th>
  69.           <th></th>
  70.         </thead>
  71.         <tbody id="conteudo"></tbody>
  72.       </table>
  73.  
  74.       <form class="my-3" id="formulario-edit">
  75.         <div class="form-row">
  76.           <div class="col">
  77.             <input
  78.              id="descricao-input-edit"
  79.              type="text"
  80.              class="form-control"
  81.              placeholder="Descrição da tarefa"
  82.              required
  83.            />
  84.           </div>
  85.           <div class="col">
  86.             <input
  87.              id="data-input-edit"
  88.              type="date"
  89.              class="form-control"
  90.              required
  91.            />
  92.           </div>
  93.           <div class="col text-center">
  94.             <div class="form-check m-2">
  95.               <input id="feito-input-edit" type="checkbox" />
  96.               <label for="feito-input">Feito</label>
  97.             </div>
  98.           </div>
  99.           <div class="col btn-group">
  100.             <button class="btn btn-success">
  101.               <i class="far fa-save"></i> Salvar
  102.             </button>
  103.             <button type="button" class="btn btn-warning">
  104.               <i class="fas fa-window-close"></i> Cancelar
  105.             </button>
  106.           </div>
  107.         </div>
  108.       </form>
  109.     </div>
  110.  
  111.     <script src="script.js"></script>
  112.  
  113.     <script
  114.      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  115.      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  116.      crossorigin="anonymous"
  117.    ></script>
  118.     <script
  119.      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
  120.      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
  121.      crossorigin="anonymous"
  122.    ></script>
  123.   </body>
  124. </html>
  125.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement