skip to Main Content

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"));
});

enter image description here

this is the output of visual studio code but not working

enter image description here

this is the output in codepen

enter image description here

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.

2

Answers


  1. If you just write attendace.html in the address bar, the page will not open for you. On VS Code, you can install an extension called live server, and follow the instructions, or else, you can just go in the folder where you have
    saved your files, and open the .html file with any browser.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search