index.html

<!DOCTYPE html>
<html lang="en">
​

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS Excel</title>

    <link rel="stylesheet" type="text/css" href="style.css">
</head>
​

<body>
    ​
    <!--Emmet: section container-->
    <section class="container">
        <h1>JS <span id="title-part">Sheet</span></h1>
        <h2>A JS-based Spreadsheet</h2>

        <table>
            <thead>
                <tr>
                    <th id="upleft"></th>
                    <th>A</th>
                    <th>B</th>
                    <th>C</th>
                    <th>D</th>
                    <th>E</th>
                    <th>F</th>
                    <th>G</th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td>1</td>
                    <td>Product</td>
                    <td>Cost</td>
                    <td>Price</td>
                    <td>Profit</td>
                    <td>Units Projected</td>
                    <td>Total Sales</td>
                    <td>Profit</td>
                </tr>

                <tr class="highlight">
                    <td>2</td>
                    <td>Chocolate Raisins</td>
                    <td>20.95</td>
                    <td>35.95</td>
                    <td>15</td>
                    <td id="units" contenteditable="true">700</td>
                    <td>25165</td>
                    <td>10500</td>
                </tr>
                <tr class="highlight">
                    <td>3</td>
                    <td>Chocolate Raisins</td>
                    <td>20.95</td>
                    <td>35.95</td>
                    <td>15</td>
                    <td>700</td>
                    <td>25165</td>
                    <td>10500</td>
                </tr>

            </tbody>


        </table>


        <p>
            <span class="capital">L</span>orem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum praesentium
            laborum consequatur ad quo cum voluptates excepturi exercitationem iste. Est voluptas illum necessitatibus
            enim
            aperiam corporis dicta nostrum dolor sit!
        </p>
        <p>
            <span class="capital">C</span>onsequatur, sint iste?Dolorum magni repudiandae perspiciatis veritatis
            provident
            ipsa molestias iure corrupti, non laborum molestiae dolor esse culpa! Officiis veritatis dolore ullam rerum
            commodi voluptates iusto? Similique earum magnam aspernatur cupiditate id.
        </p>
    </section>
    ​
    ​<script src="excel.js"></script>
    ​
</body>
​
​

</html>