Excel with JavaScript

You can use the Yeoman Generator to create an Excel Add-in project using VS Code with JavaScript
The link above displays the contents of these three files:

package.json 
manifest.xml 
webpack.config.js

This page displays all the other files in this project:

src\taskpane\taskpane.html 
src\taskpane\taskpane.js 
src\taskpane\taskpane.css 
src\commands\commands.html 
src\commands\commands.js

taskpane.html

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Task Pane Add-in</title> 
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script> 
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/> 
    <link href="taskpane.css" rel="stylesheet" type="text/css" /> 
</head> 

<body class="ms-font-m ms-welcome ms-Fabric"> 
    <header class="ms-welcome__header ms-bgColor-neutralLighter"> 
        <img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" /> 
        <h1 class="ms-font-su">Welcome</h1> 
    </header> 
    <section id="sideload-msg" class="ms-welcome__main"> 
        <h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2> 
    </section> 
    <main id="app-body" class="ms-welcome__main" style="display: none;"> 
        <h2 class="ms-font-xl"> Discover what Office Add-ins can do for you today! </h2> 
        <ul class="ms-List ms-welcome__features"> 
            <li class="ms-ListItem"> 
                <i class="ms-Icon ms-Icon--Ribbon ms-font-xl"></i> 
                <span class="ms-font-m">Achieve more with Office integration</span> 
            </li> 
            <li class="ms-ListItem"> 
                <i class="ms-Icon ms-Icon--Unlock ms-font-xl"></i> 
                <span class="ms-font-m">Unlock features and functionality</span> 
            </li> 
            <li class="ms-ListItem"> 
                <i class="ms-Icon ms-Icon--Design ms-font-xl"></i> 
                <span class="ms-font-m">Create and visualize like a pro</span> 
            </li> 
        </ul> 
        <p class="ms-font-l">Modify the source files, then click <b>Run</b>.</p> 
        <div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl"> 
            <span class="ms-Button-label">Run</span> 
        </div> 
    </main> 
</body> 
</html>

taskpane.ts

Office.onReady(info => { 
  if (info.host === Office.HostType.Excel) { 
    document.getElementById("sideload-msg").style.display = "none"; 
    document.getElementById("app-body").style.display = "flex"; 
    document.getElementById("run").onclick = run; 
  } 
}); 

export async function run() { 
  try { 
    await Excel.run(async context => { 
      /** 
       * Insert your Excel code here 
       */ 
      const range = context.workbook.getSelectedRange(); 

      // Read the range address 
      range.load("address"); 

      // Update the fill color 
      range.format.fill.color = "yellow"; 

      await context.sync(); 
      console.log(`The range address was ${range.address}.`); 
    }); 
  } catch (error) { 
    console.error(error); 
  }

taskpane.css

html, 
 body { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
 } 
 
 ul { 
     margin: 0; 
     padding: 0; 
 } 
 
 .ms-welcome__header { 
    padding: 20px; 
    padding-bottom: 30px; 
    padding-top: 100px; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    align-items: center; 
 } 

 .ms-welcome__main { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    -webkit-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-flex: 1 0 0; 
    flex: 1 0 0; 
    padding: 10px 20px; 
 } 
 
 .ms-welcome__main > h2 { 
     width: 100%; 
     text-align: center; 
 } 
 
 .ms-welcome__features { 
     list-style-type: none; 
     margin-top: 20px; 
 } 
 
 .ms-welcome__features.ms-List .ms-ListItem { 
     padding-bottom: 20px; 
     display: -webkit-flex; 
     display: flex; 
 } 
 
 .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon { 
     margin-right: 10px; 
 } 
 
 .ms-welcome__action.ms-Button--hero { 
     margin-top: 30px; 
 } 
 
.ms-Button.ms-Button--hero .ms-Button-label { 
  color: #0078d7; 
} 

.ms-Button.ms-Button--hero:hover .ms-Button-label, 
.ms-Button.ms-Button--hero:focus .ms-Button-label{ 
  color: #005a9e; 
  cursor: pointer; 
} 

b { 
    font-weight: bold; 
}

commands.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script> 
</head> 
<body> 
</body> 
</html>

commands.js

Office.onReady(info => { 
}); 

function action(event) { 
  const message = { 
    type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage, 
    message: "Performed action.", 
    icon: "Icon.80x80", 
    persistent: true 
  } 
  
  Office.context.mailbox.item.notificationMessages.replaceAsync("action", message); 
  event.completed(); 
} 

function getGlobal() { 
  return (typeof self !== "undefined") ? self : 
    (typeof window !== "undefined") ? window : 
    (typeof global !== "undefined") ? global : 
    undefined; 
} 

const g = getGlobal(); 
g.action = action;