javascript html css visual-studio-code copy-paste

How do I copy a code from CodePen to VS Code properly?

I want to copy my codepen to visual studio code, but when I do copy-paste it into visual studio code it is either something wrong or not working or doesn't show the output. but in codepen it works just fine. I did some research on how to link HTML, CSS, and JS from youtube. I followed the video instruction, I link the HTML, CSS, and JS, and downloaded the extension but why is it not working? most are correct (i think) but I think the red-colored codes are wrong, I guess that is the reason my website doesn't work but I don't know how because I'm new and just started in visual studio code, I'm mostly at codepen.

this is my attendance codepen https://codepen.io/rhynacpil/pen/dyKmyLE

attendance HTML in visual studio code

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="style.css"
    <script src="script.js"></script>
    <div class="mistyrose"></div>
    <h1>Attendance</h1>
    
    
    <label for="start">Start month:</label>
    <input type="month" id="start" name="start" min="2018-03" value="2018-05">
    
    <div class="holder">
                        <td>Un/check All</td>
                            <div class="attendance">
                                <input type="checkbox" id="checkAll"/>
                                <span></span>
                            </div>
    
    <table id="dataTable" width="350px" border="1">
      <thead>
        <tr>
          <th class="name-col">Name</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
          <th>7</th>
          <th>8</th>
          <th>9</th>
          <th>10</th>
          <th>11</th>
          <th>12</th>
          <th>13</th>
          <th>14</th>
          <th>15</th>
          <th>16</th>
          <th>17</th>
          <th>18</th>
          <th>19</th>
          <th>20</th>
          <th>21</th>
          <th>22</th>
          <th>23</th>
          <th>24</th>
          <th>25</th>
          <th>26</th>
          <th>27</th>
          <th>28</th>
          <th>29</th>
          <th>30</th>
          <th>31</th>
          <th class="missed-col">Days Missed</th>
          <th>Remove</th>
        </tr>
      </thead>
    
      <input type="button" value="Add Row" onclick="addRow('dataTable')">
    
    
      <tbody>
        <tr class="visitor">
          <td class="name-col"><input type="text" placeholder="Your name"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="missed-col">0</td><type="checkbox"></td>
          <td><input type="button" value="(Delete)"></td>
          
        </tr>
      </tbody>
    </table>
</html>

CSS


body {
    line-height: 1.9;
    margin: 2em;
    min-width: 1100px;
}

th {
    background-color: #001f3f;
    color: #fff;
    padding: 1em 1.3em;

}

td {
    border-top: 5px solid #eee;
    padding: 0.5em 1em;

}

input {
    cursor: pointer;
}


th.missed-col {
    background-color: #f00;
}



th.Attend-col {
    background-color: #f00;
    
}

td.Attend-col {
    background-color: #ffecec;
    color: #f00;
    text-align: center;
    
}

.name-col {
    text-align: left;
    min-width: 11rem;
  
}

td.missed-col {
    background-color: #ffecec;
    color: #f00;
    text-align: center;
}


input::placeholder {
    font-weight: bold;
    opacity: .5;
    color: black;
}


      .mistyrose {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background-image: linear-gradient(
            216deg,
            rgba(77, 77, 77, 0.05) 0%,
            rgba(77, 77, 77, 0.05) 25%,
            rgba(42, 42, 42, 0.05) 25%,
            rgba(42, 42, 42, 0.05) 38%,
            rgba(223, 223, 223, 0.05) 38%,
            rgba(223, 223, 223, 0.05) 75%,
            rgba(36, 36, 36, 0.05) 75%,
            rgba(36, 36, 36, 0.05) 100%
          ),
          linear-gradient(
            44deg,
            rgba(128, 128, 128, 0.05) 0%,
            rgba(128, 128, 128, 0.05) 34%,
            rgba(212, 212, 212, 0.05) 34%,
            rgba(212, 212, 212, 0.05) 57%,
            rgba(25, 25, 25, 0.05) 57%,
            rgba(25, 25, 25, 0.05) 89%,
            rgba(135, 135, 135, 0.05) 89%,
            rgba(135, 135, 135, 0.05) 100%
          ),
          linear-gradient(
            241deg,
            rgba(55, 55, 55, 0.05) 0%,
            rgba(55, 55, 55, 0.05) 14%,
            rgba(209, 209, 209, 0.05) 14%,
            rgba(209, 209, 209, 0.05) 60%,
            rgba(245, 245, 245, 0.05) 60%,
            rgba(245, 245, 245, 0.05) 69%,
            rgba(164, 164, 164, 0.05) 69%,
            rgba(164, 164, 164, 0.05) 100%
          ),
          linear-gradient(
            249deg,
            rgba(248, 248, 248, 0.05) 0%,
            rgba(248, 248, 248, 0.05) 32%,
            rgba(148, 148, 148, 0.05) 32%,
            rgba(148, 148, 148, 0.05) 35%,
            rgba(202, 202, 202, 0.05) 35%,
            rgba(202, 202, 202, 0.05) 51%,
            rgba(181, 181, 181, 0.05) 51%,
            rgba(181, 181, 181, 0.05) 100%
          ),
          linear-gradient(92deg, rgb(255, 228, 225), rgb(255, 228, 225));
        z-index: -6;
      }

Javascript

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[1].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        switch (newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
}



$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

this is the output of visual studio code but not working

this is the output in codepen

I copy-paste it into visual studio code and link the HTML, CSS, and Javascript, most are correct (i think) but I think the red-colored codes are wrong, I guess that is the reason my website doesn't work but I don't know how because of a lack of knowledge in visual studio code. I'm new to visual studio code.

Solution

You of course need to close properly the tag, but the real problem here is that you are typing the name of the file in the search bar like a website url and that can't work. The simplest (since you have it already installed), and imo nicest, way to see the result of your html and edit it along is to click the "go live" button at the very bottom-right; that will fire up a local server on your computer and every time you save the file the result will automatically load. Still if you open the "attendance.html" file with a browser you will see the page as you would expect. Lastly you could type file:///<path_to_the_file>/Attendance.html to open any browser-compatible file.