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.
2
Answers
If you just write
attendace.htmlin 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 havesaved your files, and open the
.htmlfile with any browser.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.htmlto open any browser-compatible file.