Ir para conteúdo
Débora Izabel Duarte

Problema com HTML, CSS e JAVA SCRIPT

Recommended Posts

Boa Noite, preciso muito de ajuda estou fazendo este trabalho da faculdade:

Questão 1: https://docs.google.com/document/d/1W6LO6F7uikLFV9t9BPt7uAOwvQ4uNJAwGBTlXMvw_Ds/edit

Questão 2:https://docs.google.com/document/d/1axpdoimV8xGS2yihI7flz3Yqdh1la7sReDhbXPF9l8M/edit

 

Até o momento consegui fazer o seguinte código: 

<!DOCTYPE html>
<html lang="pt" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Trabalho Laboratório Web 1</title>
  </head>
  <body>
    <h1>Trabalho Laboratório Web 1</h1>
    <form name="soma">
    <div>
      <label for="n">Nome</label>
      <input type="text" name="n" id="n"/>
      <input type="submit" name="somar" value="Adicionar" />
    </div>
    <br>
     <div>
       <label for="cfix" for="ccap">Produto</label>
       <input type="text" name="p"/>
       <input type="submit" name="prod" value="Adicionar" />
     </div>
     <br>
     <div>
       <label for="cfix" for="ccap">Valor Unitário</label>
       <input type="number" name="valor"/>
       <input type="submit" name="cfix" value="Custo Fixo"/>
       <input type="submit" name="ccap" value="Custo Per capita"/>
     </div>

    </form>
    <p><h2>Nomes: <span>0</span></h2>
    <ul></ul>
    <p><h2>Produtos: <span> </span></h2>
      <table  id="tf" border="1">
      <tr>
        <td colspan="4"><center><b>Custo fixo</b></center></td>
      </tr>
      <tr>
        <td colspan="2">Produto</td>
        <td colspan="2">Valor</td>
      </tr>
    </table>
    <br>
    <table id="tp" border="1">
      <tr>
        <td colspan="4"><b>Custo Per Capita</b></td>
      </tr>
      <tr>
        <td colspan="2">Produto</td>
        <td colspan="2">Valor</td>
      </tr>
    </table>
      <p><center><h2 style="color:red;">Valor para cada um : R$<span> </span></h2></center></p>
    <script>
      document.soma.addEventListener('submit', adicionar);
      var lista = document.querySelector('ul');
      var qtd = document.querySelector('span');
      var soma = 0;


      function adicionar(e) {
          e.preventDefault();

          var novoLi = document.createElement('li');
          novoLi.textContent = document.soma.n.value;
          lista.appendChild(novoLi);
          soma++;
          qtd.textContent = soma;
          document.soma.n.value = "";
      }

  </body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por PedroNunes
      Coloquei o plugin [Pace Master](http://github.hubspot.com/pace/docs/welcome/) em minha página que faz uma barra carregar na parte superior enquanto a página esta carregando, como a do YouTube, entretanto, quero fazer com que essa mesma barra carregue ao enviar o formulário que contém na página, caso ele esteja devidamente preenchido. Ja vi isso em uma infinidade de sites, e parece ser bem simples mas não tenho muito conhecimento em JavaScript ainda, por isso das formas que tentei não funcionou.  Tentei chamar a função do loading com onclick mas não funcionou, estava querendo que funcionasse no mínimo sem verificar se o form esta preenchido pois o principal seria que o usuário tivesse um feedback quando clicasse em enviar o form.
       
       
      -HTML COM PARTE DO FORM-
      <label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> <textarea name="questao5" id="questao5" required></textarea> <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button> <label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> <textarea name="questao5" id="questao5" required></textarea> <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button> -CSS DO PLUGIN-
      .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #8BB006; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; } -JavaScript do plugin-
      Link GitHub
       
      -JavaScript do formulário-
      $('.formphp').on('submit', function() { var emailContato = "contato@tenshitech.com.br"; // Escreva aqui o seu e-mail var that = $(this), url = that.attr('action'), type = that.attr('method'), data = {}; that.find('[name]').each(function(index, value) { var that = $(this), name = that.attr('name'), value = that.val(); data[name] = value; }); $.ajax({ url: url, type: type, data: data, success: function(response) { if( $('[name="leaveblank"]').val().length != 0 ) { $('.formphp').html("<div id='form-erro'></div>"); $('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>") .hide() .fadeIn(1500, function() { $('#form-erro'); }); } else { $('.formphp').html("<div id='form-send'></div>"); $('#form-send').html("<span>Mensagem enviada!</span><p>Em breve eu entro em contato com você. Abraços.</p>") .hide() .fadeIn(1500, function() { $('#form-send'); }); }; }, error: function(response) { $('.formphp').html("<div id='form-erro'></div>"); $('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>") .hide() .fadeIn(1500, function() { $('#form-erro'); }); } }); return false; });  
    • Por programadorweb2016
      Boa noite, de repente meu template começou apresentar o seguinte erro,
      Warning: count(): Parameter must be an array or an object that implements Countable in C:\xampp\htdocs\esse\wp-content\themes\Template\inc\admin\metaboxes\init.php on line 746
       
    • Por lerdofphp
      Pessoal, 
       
      Tenho uma pasta com arquivos de texto com datas e gostaria de criar uma lista automática com eles apenas usando HTML e JavaScript isso seria possível?
       
      A ideia é que o script realize a pesquise dos arquivos existente na pasta e cria-se o SELECT em HTML.
       
      Exemplo:
      Pasta: paginas
      Arquivos:
      - Arquivo-12-07.txt
      - Arquivo-13-07.txt
      - Arquivo-14-07.txt
       
      Resultado Esperado:
       
      <select>
        <option value="Arquivo-12-07.txt">Arquivo-12-07.txt</option>
        <option value="Arquivo-13-07.txt">Arquivo-13-07.txt</option>
        <option value="Arquivo-14-07.txt">Arquivo-14-07.txt</option>
      </select>
       
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.