Um suplemento divido em duas áreas, a primeira delas para o usuário informar o nome de um aluno e sua nota final (com casas decimais, sendo o menor valor permitido zero e o maior valor permitido dez) e poder ir clicando em um botão, o qual deve ir acrescentando linhas à planilha a cada aluno adicionado, na folha de trabalho ativa da planilha Exc…

Gabarito da Revisão 04.EXCEL.yaml

name: Gabarito da Revisão 04
description: >-
  Um suplemento divido em duas áreas, a primeira delas para o usuário informar o
  nome de um aluno e sua nota final (com casas decimais, sendo o menor valor
  permitido zero e o maior valor permitido dez) e poder ir clicando em um botão,
  o qual deve ir acrescentando linhas à planilha a cada aluno adicionado, na
  folha de trabalho ativa da planilha Excel aberta, sendo a coluna A usada para
  o nome do aluno e a coluna B usada para a nota. A segunda área do suplemento
  deve ter três botões. Um botão para exibir qual aluno teve a maior nota, outro
  botão para exibir qual teve a menor nota e outro botão para exibir a média
  aritmética de notas da turma como um todo. Os resultados exibidos por esses
  três botões deve aparecer em algum lugar do próprio suplemento, não na
  planilha ativa.
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 button1 = document.getElementById("showBestStudent") as
    HTMLButtonElement;

    const button2 = document.getElementById("showWorstStudent") as
    HTMLButtonElement;

    const button3 = document.getElementById("showAverageGrade") as
    HTMLButtonElement;

    const result = document.getElementById("result") as HTMLDivElement;


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

      await Excel.run(async (context) => {
        // Chama a função de validação do formulário.
        if (!isFormValid()) return;

        // Recupera a folha atual e define um nome para ela.
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        sheet.name = "Alunos";

        // Tenta recuperar um range já utilizado nesta folha.
        let range = sheet.getUsedRange(true);
        range.load("columnCount");
        await context.sync();

        // Se houverem colunas preenchidas...
        if (range.columnCount > 1) {
          // Pega a próxima linha disponível.
          range = range.getRowsBelow();
        } else {
          // Senão, vamos começar o range na primeira linha.
          range = sheet.getRange("A1:B1");
        }

        // Preenche os valores dos campos no range definido.
        range.values = [[field1.value, field2.value]];
        await context.sync();

        // Limpa os campos após uma inserção bem sucedida.
        field1.value = field2.value = "";
        field1.focus();
      });
    });


    // Função de validação dos campos do formulário.

    function isFormValid() {
      field1.className = field2.className = "";
      result.innerHTML = "";

      // Se o primeiro campo não tiver valor, exibe o erro e encerra.
      if (!field1.value) {
        result.innerHTML =
          '<p class="negative">Por favor, informe um nome para adicionar.</p>';
        field1.className = "negative";
        field1.focus();
        return false;
      }

      // Se o segundo campo não tiver um número válido, exibe o erro e encerra.
      const n = parseFloat(field2.value)
      if (isNaN(n) || n < 0 || n > 10) {
        result.innerHTML =
          '<p class="negative">Por favor, informe uma nota válida para adicionar.</p>';
        field2.className = "negative";
        field2.focus();
        return false;
      }

      return true;
    }


    button1.addEventListener("click", async () => {
      field1.className = field2.className = "";
      result.innerHTML = "";

      await Excel.run(async (context) => {
        // Carrega os valores do range de célular preenchidas da planilha.
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        let range = sheet.getRange("A1:B1").getExtendedRange("Down");
        range.load("values");
        await context.sync();

        // Se nenhum valor for carregado...
        if (!range.values.length) {
          // Avisa que não há alunos cadastrados e encerra.
          result.innerHTML = '<p class="negative">Nenhum aluno cadastrado.</p>';
          field1.focus();
          return;
        }

        // Ordena os valores do range através da nota descendente.
        range.values.sort((a, b) => b[1] - a[1]);

        // Recupera o primeiro aluno após a ordenação.
        const best = range.values[0];

        // Exibe o nome e a nota do melhor aluno.
        result.innerHTML = `<p>Parabéns para <b>${best[0]}</b>,
          melhor aluno da turma com nota <b>${best[1]}</b>!</p>`;
      });
    });


    button2.addEventListener("click", async () => {
      field1.className = field2.className = "";
      result.innerHTML = "";

      await Excel.run(async (context) => {
        // Carrega os valores do range de célular preenchidas da planilha.
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        let range = sheet.getRange("A1:B1").getExtendedRange("Down");
        range.load("values");
        await context.sync();

        // Se nenhum valor for carregado...
        if (!range.values.length) {
          // Avisa que não há alunos cadastrados e encerra.
          result.innerHTML = '<p class="negative">Nenhum aluno cadastrado.</p>';
          field1.focus();
          return;
        }

        // Ordena os valores do range através da nota ascendente.
        range.values.sort((a, b) => a[1] - b[1]);

        // Recupera o primeiro aluno após a ordenação.
        const worst = range.values[0];

        // Exibe o nome e a nota do pior aluno.
        result.innerHTML = `<p>Nossos pêsames para <b>${worst[0]}</b>,
          pior aluno da turma com nota <b>${worst[1]}</b>!</p>`;
      });
    });


    button3.addEventListener("click", async () => {
      field1.className = field2.className = "";
      result.innerHTML = "";

      await Excel.run(async (context) => {
        // Carrega os valores do range de célular preenchidas da planilha.
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        let range = sheet.getRange("A1:B1").getExtendedRange("Down");
        range.load("values");
        await context.sync();

        // Se nenhum valor for carregado...
        if (!range.values.length) {
          // Avisa que não há alunos cadastrados e encerra.
          result.innerHTML = '<p class="negative">Nenhum aluno cadastrado.</p>';
          field1.focus();
          return;
        }

        // Obtém a soma de notas a partir da redução dos valores.
        const sum = range.values.reduce((sum, line) => sum + line[1], 0);

        // Calcula a média a partir da soma e da quantidade de valores.
        const average = sum / range.values.length;

        result.innerHTML = `<p>A média aritmética desta turma foi:
          <b>${average}</b>.</p>`;
      });
    });
  language: typescript
template:
  content: "<h1>Gabarito da Revisão 04</h1>\r\n\r\n<p>Um suplemento divido em duas áreas, a primeira delas para o usuário informar o nome de um aluno e sua nota final (com\r\n\tcasas decimais, sendo o menor valor permitido zero e o maior valor permitido dez) e poder ir clicando em um botão, o\r\n\tqual deve ir acrescentando linhas à planilha a cada aluno adicionado, na folha de trabalho ativa da planilha Excel\r\n\taberta, sendo a coluna A usada para o nome do aluno e a coluna B usada para a nota. A segunda área do suplemento\r\n\tdeve ter três botões. Um botão para exibir qual aluno teve a maior nota, outro botão para exibir qual teve a menor\r\n\tnota e outro botão para exibir a média aritmética de notas da turma como um todo. Os resultados exibidos por esses\r\n\ttrês botões deve aparecer em algum lugar do próprio suplemento, não na planilha ativa.</p>\r\n\r\n<form id=\"form\" novalidate>\r\n\t<input id=\"field1\" placeholder=\"Nome do aluno\" autocomplete=\"off\" required>\r\n\t<input id=\"field2\" type=\"number\" placeholder=\"Nota final\" autocomplete=\"off\" required>\r\n\t<button>Adicionar</button>\r\n</form>\r\n\r\n<div class=\"buttons\">\r\n\t<button id=\"showBestStudent\">Melhor aluno</button>\r\n\t<button id=\"showWorstStudent\">Pior aluno</button>\r\n\t<button id=\"showAverageGrade\">Média aritmética da turma</button>\r\n</div>\r\n\r\n<div id=\"result\"></div>"
  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