Explanation - Learn Functional Programming by Building a Spreadsheet - Step 3

JavaScript
1

Tell us what’s happening:

I don’t need help solving the problem. But can someone explain the fundamentals behinds dynamically creating new HTML elements, as this step says we are about to do? Why not create new HTML elements under index.html?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Functional Programming Spreadsheet</title>
  </head>
  <body>
    <div id="container">
      <div></div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
#container {
  display: grid;
  grid-template-columns: 50px repeat(10, 200px);
  grid-template-rows: repeat(11, 30px);
}

.label {
  background-color: lightgray;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
}

/* file: script.js */

// User Editable Region

window.onload = () => {
  const container = document.getElementById("container");
  const createLabel = (name) => {

  }
}

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 3

2

The functionality of a spreadsheet requires the elements to be interactive, and that’s a functionality that is going to be added with JavaScript

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.