Layout do suplemento: 1 caixa de texto, 1 botão "Adicionar" e 1 botão "Resultado". Funcionalidade do suplemento: permitir digitar vários nomes, validando se o campo está preenchido toda vez que clicar em "Adicionar", e se estiver tudo certo, ir armazenando cada nome em um Array. Ao clicar no botão "Resultado", exibir como resultado todos os nome…

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

name: Lista de Exercícios 1 - Item 5
description: >-
  Layout do suplemento: 1 caixa de texto, 1 botão "Adicionar" e 1 botão
  "Resultado". Funcionalidade do suplemento: permitir digitar vários nomes,
  validando se o campo está preenchido toda vez que clicar em "Adicionar", e se
  estiver tudo certo, ir armazenando cada nome em um Array. Ao clicar no botão
  "Resultado", exibir como resultado todos os nomes previamente cadastrados, mas
  de forma invertida (do último para o primeiro). 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: "const field = document.getElementById(\"field\") as HTMLInputElement;\r\nconst buttonAdd = document.getElementById(\"buttonAdd\") as HTMLButtonElement;\r\nconst buttonResult = document.getElementById(\"buttonResult\") as HTMLButtonElement;\r\n\r\nconst names = [];\r\n\r\nbuttonAdd.addEventListener(\"click\", () => {\r\n  Word.run(async (context) => {\r\n    const body = context.document.body;\r\n    body.clear();\r\n\r\n    if (field.value == \"\") {\r\n      body.insertParagraph(\"Campo obrigatório não preenchido!\", \"End\");\r\n      return;\r\n    }\r\n\r\n    names.push(field.value);\r\n    field.value = \"\";\r\n  });\r\n});\r\n\r\nbuttonResult.addEventListener(\"click\", () => {\r\n  Word.run(async (context) => {\r\n    const body = context.document.body;\r\n    body.clear();\r\n\r\n    // Criando uma cópia temporária dos valores do Array global em um Array local.\r\n    const temp = [...names]\r\n\r\n    // Agora pode usar o reverse suave, sem medo de estragar o Array global.\r\n    for (let name of temp.reverse()) {\r\n      body.insertParagraph(name, \"End\");\r\n    }\r\n\r\n    // Usando um for tradicional para percorrer os índices do Array de forma decremental.\r\n    // for (let i = names.length - 1; i >= 0; i--) {\r\n    //   body.insertParagraph(names[i], \"End\");\r\n    // }\r\n  });\r\n});\r\n"
  language: typescript
template:
  content: "<input id=\"field\" placeholder=\"Informe um nome\">\r\n<button id=\"buttonAdd\">Adicionar</button>\r\n<button id=\"buttonResult\">Resultado</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