Layout do suplemento: 5 caixas de texto e 1 botão. Funcionalidade do suplemento: permitir digitar 5 números, validando se todos são números, e se estiver tudo certo, exibir como resultado a exponenciação ao quadrado de cada número informado, um resultado por linha. Atenção: todas as mensagens de saída (tanto validações quanto resultados finais) …

Lista de Exercícios 1 - Item 1.WORD.yaml

name: Lista de Exercícios 1 - Item 1
description: >-
  Layout do suplemento: 5 caixas de texto e 1 botão. Funcionalidade do
  suplemento: permitir digitar 5 números, validando se todos são números, e se
  estiver tudo certo, exibir como resultado a exponenciação ao quadrado de cada
  número informado, um resultado por linha. 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: "// Aqui está localizando os elementos do HTML e atribuindo nas constantes...\r\nconst field1 = document.getElementById(\"field1\") as HTMLInputElement;\r\nconst field2 = document.getElementById(\"field2\") as HTMLInputElement;\r\nconst field3 = document.getElementById(\"field3\") as HTMLInputElement;\r\nconst field4 = document.getElementById(\"field4\") as HTMLInputElement;\r\nconst field5 = document.getElementById(\"field5\") as HTMLInputElement;\r\nconst button = document.getElementById(\"button\") as HTMLButtonElement;\r\n\r\n// Associa o evento click ao botão, colocando uma Arrow Function para execução.\r\nbutton.addEventListener(\"click\", () => {\r\n  // Todo o código dentro deste bloco executará com acesso ao contexto de execução do Word.\r\n  Word.run(async (context) => {\r\n    // Cria uma constante para manter a referência ao corpo do documento Word aberto.\r\n    const body = context.document.body;\r\n    body.clear();\r\n\r\n    // Pegando as strings digitadas em cada campo e tentando converter em número.\r\n    const n1 = parseFloat(field1.value);\r\n    const n2 = parseFloat(field2.value);\r\n    const n3 = parseFloat(field3.value);\r\n    const n4 = parseFloat(field4.value);\r\n    const n5 = parseFloat(field5.value);\r\n\r\n    // Valida se alguma das constantes não tem um número válido ali dentro.\r\n    if (isNaN(n1) || isNaN(n2) || isNaN(n3) || isNaN(n4) || isNaN(n5)) {\r\n      body.insertParagraph(\"Informe números válidos em todos os campos!\", \"End\");\r\n      return; // Forçar o fim desta execução de função em andamento neste evento.\r\n    }\r\n\r\n    // Calculando a exponenciação por 2 (quadrado) de cada número e exibindo.\r\n    body.insertParagraph(`${n1} ao quadrado é ${n1 ** 2}`, \"End\");\r\n    body.insertParagraph(`${n2} ao quadrado é ${n2 ** 2}`, \"End\");\r\n    body.insertParagraph(`${n3} ao quadrado é ${n3 ** 2}`, \"End\");\r\n    body.insertParagraph(`${n4} ao quadrado é ${n4 ** 2}`, \"End\");\r\n    body.insertParagraph(`${n5} ao quadrado é ${n5 ** 2}`, \"End\");\r\n\r\n    // Uma alternativa usando Array para evitar CTRL+C de código.\r\n    // const numbers = [n1, n2, n3, n4, n5];\r\n    // for (let n of numbers) {\r\n    //   body.insertParagraph(`${n} ao quadrado é ${n ** 2}`, \"End\");\r\n    // }\r\n  });\r\n});\r\n"
  language: typescript
template:
  content: "<input id=\"field1\" placeholder=\"Número 1\">\r\n<input id=\"field2\" placeholder=\"Número 2\">\r\n<input id=\"field3\" placeholder=\"Número 3\">\r\n<input id=\"field4\" placeholder=\"Número 4\">\r\n<input id=\"field5\" placeholder=\"Número 5\">\r\n<button id=\"button\">Calcular quadrado dos números</button>"
  language: html
style:
  content: ''
  language: css
libraries: |-
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

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