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 santans
      Desejo saber como crio um gerador PHP de paginas html.
      Por exemplo quando alguém cria um perfil no meu site, o gerador criaria uma pagina no sistema a partir de uma pagina pre molde já feita.
      no caso seria para um e-comerce.
      Outro exemplo quando eu cadastro um produto e é gerada uma pagina para este tal produto.
      Se houver algum sistema mais simples para me indicarem fiquem a vontade.
      Nota: Não sou um programador experiente.
    • Por Andrelirasp
      Tenho uma página onde exibe livros registrados, eu gostaria de fazer uma outra focada em busca para buscar dados nas tabelas.
       
      Gostaria de fazer um sistema de busca onde buscaria dados digitados de acordo com a categoria selecionada, porém não sei por onde começo.
      Eu gostaria de adicionar a opção de **filtrar** por **categoria** seguida de um `_<input type="text">_` para o usuário selecionar a categoria e escrever o que ele quer buscar, a categoria no caso seriam as tabelas:
          <select name="opcao_filtro">
                     <option value="nulo">--</option>                
                     <option value="titulo">Título</option>
                     <option value="autor">Autor</option>
                     <option value="tema">Tema</option>
                     <option value="editora">Editora</option>
                     <option value="indice">Índice</option>
          </select>

      Logo abaixo teria o input:
          <input type="text" name="busca" id="busca"> // Procurar em tabela tal, tal coisa
          <input type="submit" value="Procurar">
       
      E depois(opcional para o usuário) buscar por letras(funcionaria junto com o filtro de categorias):
          <a href="url">A</a>
          <a href="url">B</a>
      **Exemplo**: Usúario escolheu filtrar por título e quando ele clica na letra _" A "_ buscasse entre a categoria e exibisse os resultados dos títulos que comesse com a letra selecionada.
    • Por Mateus Duarte
      Estou com um problema, meu site mostra notificações apenas se for acessado pelo computador. Quando acessado pelo celular, ele pede para ativar as notificações, porem ele não mostra.
       
      Codigo da função:
      (function(global, factory) { "use strict"; if (typeof define === "function" && define.amd) { define(function() { return new(factory(global, global.document)) }) } else if (typeof module !== "undefined" && module.exports) { module.exports = new(factory(global, global.document)) } else { global.Push = new(factory(global, global.document)) } })(typeof window !== "undefined" ? window : this, function(w, d) { var Push = function() { var self = this, isUndefined = function(obj) { return obj === undefined }, isString = function(obj) { return String(obj) === obj }, isFunction = function(obj) { return obj && {}.toString.call(obj) === "[object Function]" }, currentId = 0, incompatibilityErrorMessage = "PushError: push.js is incompatible with browser.", hasPermission = false, notifications = {}, lastWorkerPath = null, closeNotification = function(id) { var errored = false, notification = notifications[id]; if (typeof notification !== "undefined") { if (notification.close) { notification.close() } else if (notification.cancel) { notification.cancel() } else if (w.external && w.external.msIsSiteMode) { w.external.msSiteModeClearIconOverlay() } else { errored = true; throw new Error("Unable to close notification: unknown interface") } if (!errored) { return removeNotification(id) } } return false }, addNotification = function(notification) { var id = currentId; notifications[id] = notification; currentId++; return id }, removeNotification = function(id) { var dict = {}, success = false, key; for (key in notifications) { if (notifications.hasOwnProperty(key)) { if (key != id) { dict[key] = notifications[key] } else { success = true } } } notifications = dict; return success }, createCallback = function(title, options) { var notification, wrapper, id, onClose; options = options || {}; self.lastWorkerPath = options.serviceWorker || "sw.js"; if (w.Notification) { try { notification = new w.Notification(title, { icon: isString(options.icon) || isUndefined(options.icon) ? options.icon : options.icon.x32, body: options.body, tag: options.tag, requireInteraction: options.requireInteraction }) } catch (e) { if (w.navigator) { w.navigator.serviceWorker.register(options.serviceWorker || "sw.js"); w.navigator.serviceWorker.ready.then(function(registration) { registration.showNotification(title, { body: options.body, vibrate: options.vibrate, tag: options.tag, requireInteraction: options.requireInteraction }) }) } } } else if (w.webkitNotifications) { notification = w.webkitNotifications.createNotification(options.icon, title, options.body); notification.show() } else if (navigator.mozNotification) { notification = navigator.mozNotification.createNotification(title, options.body, options.icon); notification.show() } else if (w.external && w.external.msIsSiteMode()) { w.external.msSiteModeClearIconOverlay(); w.external.msSiteModeSetIconOverlay(isString(options.icon) || isUndefined(options.icon) ? options.icon : options.icon.x16, title); w.external.msSiteModeActivate(); notification = {} } else { throw new Error("Unable to create notification: unknown interface") } id = addNotification(notification); wrapper = { get: function() { return notification }, close: function() { closeNotification(id) } }; if (options.timeout) { setTimeout(function() { wrapper.close() }, options.timeout) } if (isFunction(options.onShow)) notification.addEventListener("show", options.onShow); if (isFunction(options.onError)) notification.addEventListener("error", options.onError); if (isFunction(options.onClick)) notification.addEventListener("click", options.onClick); onClose = function() { removeNotification(id); if (isFunction(options.onClose)) { options.onClose.call(this) } }; notification.addEventListener("close", onClose); notification.addEventListener("cancel", onClose); return wrapper }, Permission = { DEFAULT: "default", GRANTED: "granted", DENIED: "denied" }, Permissions = [Permission.GRANTED, Permission.DEFAULT, Permission.DENIED]; self.Permission = Permission; self.Permission.request = function(onGranted, onDenied) { if (!self.isSupported) { throw new Error(incompatibilityErrorMessage) } callback = function(result) { switch (result) { case self.Permission.GRANTED: hasPermission = true; if (onGranted) onGranted(); break; case self.Permission.DENIED: hasPermission = false; if (onDenied) onDenied(); break } }; if (w.Notification && w.Notification.requestPermission) { Notification.requestPermission(callback) } else if (w.webkitNotifications && w.webkitNotifications.checkPermission) { w.webkitNotifications.requestPermission(callback) } else { throw new Error(incompatibilityErrorMessage) } }; self.Permission.has = function() { return hasPermission }; self.Permission.get = function() { var permission; if (!self.isSupported) { throw new Error(incompatibilityErrorMessage) } if (w.Notification && w.Notification.permissionLevel) { permission = w.Notification.permissionLevel } else if (w.webkitNotifications && w.webkitNotifications.checkPermission) { permission = Permissions[w.webkitNotifications.checkPermission()] } else if (w.Notification && w.Notification.permission) { permission = w.Notification.permission } else if (navigator.mozNotification) { permission = Permissions.GRANTED } else if (w.external && w.external.msIsSiteMode() !== undefined) { permission = w.external.msIsSiteMode() ? Permission.GRANTED : Permission.DEFAULT } else { throw new Error(incompatibilityErrorMessage) } return permission }; self.isSupported = function() { var isSupported = false; try { isSupported = !!(w.Notification || w.webkitNotifications || navigator.mozNotification || w.external && w.external.msIsSiteMode() !== undefined) } catch (e) {} return isSupported }(); self.create = function(title, options) { if (!self.isSupported) { throw new Error(incompatibilityErrorMessage) } if (!isString(title)) { throw new Error("PushError: Title of notification must be a string") } if (!self.Permission.has()) { return new Promise(function(resolve, reject) { self.Permission.request(function() { try { resolve(createCallback(title, options)) } catch (e) { reject(e) } }, function() { reject("Permission request declined") }) }) } else { return new Promise(function(resolve, reject) { try { resolve(createCallback(title, options)) } catch (e) { reject(e) } }) } }; self.count = function() { var count = 0, key; for (key in notifications) { count++ } return count }, self.__lastWorkerPath = function() { return self.lastWorkerPath }, self.close = function(tag) { var key; for (key in notifications) { notification = notifications[key]; if (notification.tag === tag) { return closeNotification(key) } } }; self.clear = function() { var i, success = true; for (key in notifications) { var didClose = closeNotification(key); success = success && didClose } return success } }; return Push }); Como faço para mostrar as notificações pelo celular?
×

Informação importante

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