Um suplemento com cinco caixas de texto numéricas e um botão. Após obter os números inteiros digitados, tal botão deve verificar qual dos cinco números é o maior e qual é o menor e exibí-los como resposta nas células A1 e B1, respectivamente, na folha de trabalho ativa da planilha Excel aberta.

Gabarito da Revisão 01.EXCEL.yaml

name: Gabarito da Revisão 01
description: >-
  Um suplemento com cinco caixas de texto numéricas e um botão. Após obter os
  números inteiros digitados, tal botão deve verificar qual dos cinco números é
  o maior e qual é o menor e exibí-los como resposta nas células A1 e B1,
  respectivamente, na folha de trabalho ativa da planilha Excel aberta.
host: EXCEL
api_set: {}
script:
  content: |
    const form = document.getElementById("form") as HTMLFormElement;
    const field1 = document.getElementById("field1") as HTMLInputElement;
    const field2 = document.getElementById("field2") as HTMLInputElement;
    const field3 = document.getElementById("field3") as HTMLInputElement;
    const field4 = document.getElementById("field4") as HTMLInputElement;
    const field5 = document.getElementById("field5") as HTMLInputElement;

    form.addEventListener("submit", async (event) => {
      event.preventDefault();

      await Excel.run(async (context) => {
        // Recupera e converte os valores dos campos do suplemento.
        const n1 = parseInt(field1.value);
        const n2 = parseInt(field2.value);
        const n3 = parseInt(field3.value);
        const n4 = parseInt(field4.value);
        const n5 = parseInt(field5.value);

        // Monta um Array com todos os números obtidos dentro.
        let numbers = [n1, n2, n3, n4, n5];

        // Reposiciona o Array em ordem ascendente.
        numbers = numbers.sort((a, b) => a - b);

        // Recupera o maior e o menor número a partir das pontas do Array.
        const bigger = numbers.pop();
        const smaller = numbers.shift();

        // Define o range a ser utilizado e exibe os resultados lá.
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        sheet.getRange("A1:B1").values = [[bigger, smaller]];
        await context.sync();
      });
    });
  language: typescript
template:
  content: "<h1>Gabarito da Revisão 01</h1>\r\n\r\n<p>Um suplemento com cinco caixas de texto numéricas e um botão. Após obter os números inteiros digitados, tal botão\r\n\tdeve verificar qual dos cinco números é o maior e qual é o menor e exibí-los como resposta nas células A1 e B1,\r\n\trespectivamente, na folha de trabalho ativa da planilha Excel aberta.</p>\r\n\r\n<form id=\"form\" novalidate>\r\n\t<input id=\"field1\" type=\"number\" placeholder=\"Número 1\" autocomplete=\"off\" required>\r\n\t<input id=\"field2\" type=\"number\" placeholder=\"Número 2\" autocomplete=\"off\" required>\r\n\t<input id=\"field3\" type=\"number\" placeholder=\"Número 3\" autocomplete=\"off\" required>\r\n\t<input id=\"field4\" type=\"number\" placeholder=\"Número 4\" autocomplete=\"off\" required>\r\n\t<input id=\"field5\" type=\"number\" placeholder=\"Número 5\" autocomplete=\"off\" required>\r\n\t<button>Verificar</button>\r\n</form>"
  language: html
style:
  content: "*,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n::selection {\r\n  background: #0c90a1;\r\n  color: #fff;\r\n  text-shadow: none;\r\n}\r\n\r\nhtml {\r\n  font: 1em/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\r\n    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial,\r\n    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\r\n  background: #151515;\r\n  color: #fffb;\r\n  height: 100%;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n  padding: 2rem;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n  background-position: center;\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  background-attachment: fixed;\r\n}\r\n\r\nbody::before,\r\nbody::after {\r\n  content: '';\r\n  flex: 1;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n  display: inline-block;\r\n  font-size: 1.5em;\r\n  color: #fff;\r\n  margin: 0 0 0.5em;\r\n  background: #15151580;\r\n  padding: 0.25em 0.5em;\r\n  border-radius: 5px;\r\n  backdrop-filter: blur(15px);\r\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\r\n}\r\n\r\nh1 {\r\n  color: #18cfe7;\r\n}\r\n\r\nh2 {\r\n  font-size: 1.375em;\r\n  margin-top: 2rem;\r\n}\r\n\r\nh3 {\r\n  font-size: 1.25em;\r\n  margin-top: 2rem;\r\n}\r\n\r\nh4 {\r\n  font-size: 1.125em;\r\n  margin-top: 2rem;\r\n}\r\n\r\nh5,\r\nh6 {\r\n  font-size: 1em;\r\n  margin-top: 2rem;\r\n}\r\n\r\np {\r\n  display: block;\r\n  margin: 0.75rem 0 0;\r\n  background: #15151580;\r\n  padding: 0.25em 0.5em;\r\n  border-radius: 5px;\r\n  backdrop-filter: blur(15px);\r\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\r\n}\r\n\r\np:first-of-type {\r\n  margin: 0;\r\n}\r\n\r\na,\r\nbutton,\r\ninput,\r\ntextarea,\r\nselect {\r\n  transition-property: background, border, color, box-shadow;\r\n  transition-duration: 0.25s;\r\n  transition-timing-function: ease-in-out;\r\n}\r\n\r\ninput[type=\"number\"]::-webkit-inner-spin-button {\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n#loading {\r\n  display: none;\r\n  margin: 1rem auto;\r\n  width: 48px;\r\n  height: 48px;\r\n  shape-rendering: auto;\r\n}\r\n\r\n#result {\r\n  padding: 0 0 2rem;\r\n}\r\n\r\n.buttons {\r\n  padding: 0 2rem;\r\n  margin: 0 0 1.5rem;\r\n  width: 100%;\r\n  display: flex;\r\n}\r\n\r\n.buttons button {\r\n  flex: 1 1 33.3334%;\r\n}\r\n\r\nform {\r\n  padding: 1.5rem 2rem;\r\n  margin: 1.5rem 0 1.5rem;\r\n  width: 100%;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex-flow: column;\r\n  gap: 0.75rem;\r\n  background: #080808d8;\r\n  backdrop-filter: blur(15px);\r\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 8px 40px -5px rgba(0, 0, 0, 0.06);\r\n}\r\n\r\nform > * {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.75rem;\r\n}\r\n\r\nform label[for] {\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n  form {\r\n    border-radius: 4px;\r\n    flex-flow: row;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  form > * {\r\n    flex: 1 0 calc(50% - 0.75rem);\r\n  }\r\n}\r\n\r\n@media (min-width: 980px) {\r\n  form {\r\n    max-width: 980px;\r\n  }\r\n\r\n  table {\r\n    max-width: 980px;\r\n  }\r\n}\r\n\r\nheader {\r\n  margin: 0 0 1rem;\r\n}\r\n\r\nbody > div {\r\n  display: grid;\r\n  grid-auto-flow: row;\r\n  gap: 0.75rem;\r\n}\r\n\r\nform > input,\r\nform > select,\r\nform > textarea,\r\nbutton {\r\n  min-height: 2.5rem;\r\n}\r\n\r\nform > input,\r\nform > textarea,\r\nform > select {\r\n  font: inherit;\r\n  line-height: 1;\r\n  background: #151515;\r\n  border: 1px solid #151515;\r\n  border-radius: 3px;\r\n  color: #fff;\r\n  padding: 0.5rem 1rem;\r\n  outline: none;\r\n}\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n  -webkit-text-fill-color: #fff;\r\n  transition: background-color 9999s ease-in-out 0s;\r\n  box-shadow: 0 0 0 9999px #212121 inset;\r\n  border-radius: 0;\r\n}\r\n\r\nform > input:hover,\r\nform > input:focus,\r\nform > textarea:hover,\r\nform > textarea:focus,\r\nform > select:hover,\r\nform > select:focus {\r\n  border-color: #000;\r\n  background: #1d1d1d;\r\n}\r\n\r\nform > input::placeholder {\r\n  color: #fff3;\r\n}\r\n\r\nform > textarea::placeholder {\r\n  color: #fff3;\r\n}\r\n\r\nform > select:invalid,\r\nform > select option[value=''] {\r\n  color: #fff3;\r\n}\r\n\r\nform > select option:not([value='']) {\r\n  color: #fff !important;\r\n}\r\n\r\nnav {\r\n  border-radius: 4px;\r\n  background: #0d0d0d;\r\n  padding: 1.5rem 2rem;\r\n  margin: 1.25em 0 1rem;\r\n}\r\n\r\nnav a {\r\n  margin: 0.375em;\r\n  white-space: nowrap;\r\n}\r\n\r\na {\r\n  color: #18cfe7;\r\n}\r\n\r\na:focus,\r\na:hover {\r\n  color: #0c90a1;\r\n}\r\n\r\nbutton {\r\n  text-align: center;\r\n  text-decoration: none;\r\n  justify-content: center;\r\n  color: #fff;\r\n  background: #0d0d0d;\r\n  padding: 0.5em 1em;\r\n  font-size: 0.875em;\r\n  text-transform: uppercase;\r\n  border: 1px solid #000;\r\n  border-radius: 2px;\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\nform > button {\r\n  background: #050505;\r\n}\r\n\r\nbutton:not(.pika-prev):not(.pika-next):hover,\r\nbutton:not(.pika-prev):not(.pika-next):focus-visible {\r\n  border: 1px solid #fff;\r\n  background: #ccc;\r\n  color: #111;\r\n  box-shadow: 0 2px 12px -2px #0008;\r\n}\r\n\r\nbutton:active {\r\n  box-shadow: inset 0 2px 20px #0008;\r\n}\r\n\r\ntable {\r\n  width: 100%;\r\n  margin-top: 1.5rem;\r\n  border-collapse: collapse;\r\n}\r\n\r\ntable thead tr {\r\n  border: 1px solid #232323;\r\n  border-left: none;\r\n  border-right: none;\r\n}\r\n\r\ntable th {\r\n  background: #0d0d0d;\r\n  padding: 0.75rem 0.5rem;\r\n  font-weight: bold;\r\n}\r\n\r\ntable tbody tr {\r\n  background: #1f1f1f;\r\n  border-bottom: 1px solid #232323;\r\n}\r\n\r\ntable tbody tr:nth-child(odd) {\r\n  background: #1b1b1b;\r\n}\r\n\r\ntable td {\r\n  padding: 0.75rem 0.5rem;\r\n  font-weight: normal;\r\n}\r\n\r\n.checkbox {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\ninput[type='checkbox'] {\r\n  display: none;\r\n}\r\n\r\ninput[type='checkbox'] + label {\r\n  display: block;\r\n  width: 48px;\r\n  height: 22px;\r\n  margin-top: 1px;\r\n  text-indent: -150%;\r\n  clip: rect(0 0 0 0);\r\n  color: transparent;\r\n  user-select: none;\r\n}\r\n\r\ninput[type='checkbox'] + label::before,\r\ninput[type='checkbox'] + label::after {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  cursor: pointer;\r\n}\r\n\r\ninput[type='checkbox'] + label::before {\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: #ffffff44;\r\n  border-radius: 9999em;\r\n  transition: background-color 0.25s ease;\r\n}\r\n\r\ninput[type='checkbox'] + label::after {\r\n  top: -2px;\r\n  left: 0;\r\n  width: 28px;\r\n  height: 28px;\r\n  border-radius: 50%;\r\n  background-color: #fff;\r\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);\r\n  transition-property: background-color, left;\r\n  transition-duration: 0.25s;\r\n  transition-timing-function: ease;\r\n}\r\n\r\ninput[type='checkbox']:checked + label::before {\r\n  background-color: #00b7ff44;\r\n}\r\n\r\ninput[type='checkbox']:checked + label::after {\r\n  background-color: #00b7ff;\r\n  left: 24px;\r\n}\r\n\r\nul {\r\n  display: block;\r\n  margin: 1rem 0 0;\r\n  padding: 0;\r\n  list-style: square;\r\n  list-style-position: inside;\r\n}\r\n\r\nli {\r\n  padding: 0;\r\n}\r\n\r\nform > input.negative,\r\nform > input.error,\r\nform > textarea.negative,\r\nform > textarea.error,\r\nform > select.negative,\r\nform > select.error {\r\n  border-color: #ff2222;\r\n}\r\n\r\ndiv.negative,\r\ndiv.error,\r\np.negative,\r\np.error {\r\n  color: #ff2222;\r\n  font-weight: 300;\r\n}\r\n\r\ndiv.positive,\r\ndiv.success,\r\np.positive,\r\np.success {\r\n  color: #3be91d;\r\n  font-weight: 300;\r\n}\r\n\r\ndiv.negative b,\r\ndiv.error b,\r\np.negative b,\r\np.error b,\r\ndiv.positive b,\r\ndiv.success b,\r\np.positive b,\r\np.success b {\r\n  font-weight: 600;\r\n}\r\n"
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

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