Create a new snippet from a blank template.

Dad Jokes.EXCEL.yaml

name: Dad Jokes
description: Create a new snippet from a blank template.
host: EXCEL
api_set: {}
script:
  content: "const button = document.querySelector(\"#run\");\nbutton.addEventListener(\"click\", getJoke);\n\nasync function getJoke() {\n  try {\n    $('#status').text('Fetching joke... \U0001F92A')\n    const url = \"https://icanhazdadjoke.com/\";\n    const headers = { Accept: \"application/json\" };\n    const response = await fetch(url, { headers });\n    const data = await response.json();\n    const joke = data.joke;\n    await Excel.run(async (context) => {\n      $('#status').text('Displaying joke... \U0001F602')\n      const sheet = context.workbook.worksheets.getActiveWorksheet();\n      const range = sheet.getRange(\"A2\");\n      range.values = [[joke]];\n      await context.sync();\n    });\n    $('#status').text('Did you like it ??? \U0001F923')\n  } catch (error) {\n    console.error(error);\n    console.error(error.message);\n  }\n}\n"
  language: typescript
template:
  content: |-
    <h1>Status: <span id="status">Not Running</span></h1>

    <button id="run">
      Get Joke  
    </button>
  language: html
style:
  content: |-
    * {
      box-sizing: border-box;
      font-family: monospace;
    }

    #run {
      width: 100%;
      background-color: rebeccapurple;
      color: white;
      padding: 1rem;
      font-size: 1.5rem;
      border: 0;
      cursor: pointer;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
  office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

  core-js@2.4.1/client/core.min.js
  @types/core-js

  jquery@3.1.1
  @types/jquery@3.3.1