Layout do suplemento: 1 caixa de texto, 1 botão "Adicionar" e 1 botão "Resultado". Funcionalidade do suplemento: permitir digitar várias notas, validando se é número toda vez que clicar em "Adicionar" (permitir casas decimais no número). Ao clicar no botão "Resultado", exibir a média aritmética a partir dos números digitados previamente. Atenção…

lista de exercicios - 5.WORD.yaml

name: lista de exercicios - 5
description: >-
  Layout do suplemento: 1 caixa de texto, 1 botão "Adicionar" e 1 botão
  "Resultado". Funcionalidade do suplemento: permitir digitar várias notas,
  validando se é número toda vez que clicar em "Adicionar" (permitir casas
  decimais no número). Ao clicar no botão "Resultado", exibir a média aritmética
  a partir dos números digitados previamente. Atenção: todas as mensagens de
  saída (tanto validações quanto resultados finais) devem ser exibidas no Word.
host: WORD
api_set: {}
script:
  content: >
    // Força somente números nos inputs

    //
    https://www.geeksforgeeks.org/how-to-force-input-field-to-enter-numbers-only-using-javascript/

    function onlyNumberKey(evt) {
      // Only ASCII character in that range allowed
      let ASCIICode = evt.which ? evt.which : evt.keyCode;
      if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57)) return false;
      return true;
    }


    var lista_notas = [];


    function buttonAdd() {
      Word.run(function(context) {
        let docBody = context.document.body;
        let number1 = txtn1.value;
        docBody.clear();
        if (number1 == "") {
          docBody.insertParagraph(
            "Não é permitido campos Vazios! Verifique se os campos estão preenchidos corretamente!",
            "End"
          );
        } else {
          number1 = parseInt(number1);
          lista_notas.push(number1);
          docBody.insertParagraph("Item adicionado com sucesso.", "End");
          txtn1.value = "";
        }
        return context.sync();
      });
    }


    /*Função que Realiza os Cálculos*/

    function buttonCalc() {
      Word.run(function(context) {
        let docBody = context.document.body;
        let maior = 0;
        let menor = 0;
        docBody.clear();
        if (lista_notas.length) {
          const sum = lista_notas.reduce((a, b) => a + b, 0);
          const avg = (sum / lista_notas.length) || 0;
          docBody.insertParagraph(`A média das notas ${lista_notas.toString()} é ${avg}`, "End");
          lista_notas = [];
        } else {
          docBody.insertParagraph("A lista de números está vazia.", "End");
        }
        return context.sync();
      });
    }


    btnAdd.addEventListener("click", buttonAdd);

    btnRes.addEventListener("click", buttonCalc);
  language: typescript
template:
  content: "<h2>Exercicio 5</h2></br>\n<p>Layout do suplemento: 1 caixa de texto, 1 botão \"Adicionar\" e 1 botão \"Resultado\". Funcionalidade do suplemento:\n\tpermitir digitar várias notas, validando se é número toda vez que clicar em \"Adicionar\" (permitir casas decimais no\n\tnúmero). Ao clicar no botão \"Resultado\", exibir a média aritmética a partir dos números digitados previamente.\n\tAtenção:\n\ttodas as mensagens de saída (tanto validações quanto resultados finais) devem ser exibidas no Word.</p></br>\n\n<input type=\"number\" name=\"textn1\" id=\"txtn1\" placeholder=\"Primeiro Valor\"\n    onkeypress=\"return onlyNumberKey(event)\"\n       maxlength=\"11\" ></p>\n<input name=\"add\" id=\"btnAdd\" type=\"button\" value=\"Adicionar\" >\n<input name=\"res\" id=\"btnRes\" type=\"button\" value=\"Resultado\" ></p>"
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css

  [email protected]/client/core.min.js
  @types/core-js

  [email protected]
  @types/[email protected]