Here is a simple guide to copy and paste in HTML:
<html lang="en">
<head>
<meta charset="utf-8>
<title>Dayparting</title>
<style></style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table class="dayparts table">
<thead>
<tr>
<td class="cell-label presets-label"></td>
<td colspan="24"><span class="cell-label presetsSubtitle-label"></span>
<select v-model="selected" @change='clearAll();selectedFunc()'>
<option value="">Select a Preset</option>
<option value="0">None</option>
<option value="1">Afternoons</option>
<option value="2">Evenings</option>
<option value="3">Mornings</option>
<option value="4">Weekdays</option>
<option value="5">Weekends</option>
<option value="6">Weekends including Friday</option>
</select>
</td>
</tr>
<tr>
<td rowspan="2"></td>
<td class="cell-label am-label" colspan="12">AM</td>
<td class="cell-label pm-label" colspan="12">PM</td>
</tr>
<tr class="hour-row">
<td class="hour" v-for="hour in times" v-bind:value="hour.hour" v-on:click='setTime'>{{hour.hour}}
</td>
</tr>
</thead>
<tbody @mousedown='mouseDown' @mouseup='mouseUp' @mousemove='mouseMove'>
<tr class="day" v-for="day in days">
<td class="cell-label day-label" v-bind:value="day.dayNumber" v-bind:day-value="day.dayNumber"
v-on:click='activateDay'>{{day.dayName}}</td>
<td class='dayparts-cell' v-bind:value="hour.hour" data='day'
v-bind:class="{active: hour.isActive, preactive: hour.isPreActive}" v-for='hour in day.times'>
</td>
</tr>
</tbody>
</table>
</div>
<script></script>
</body>
</html>
This part goes in the "head":
<head>
<meta charset="utf-8>
<title>Dayparting</title>
<style></style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
1) Replace
<link rel="stylesheet" href="style.css">
with
<style></style>. Then, copy the contents of the CSS file into the
style tags.
2) Change "vue.js" to "" for development or "https://cdn.jsdelivr.net/npm/[email protected]" for production.
Finally, remove
<script src="main.js"></script>
and replace it with an empty
<script></script>, where you can paste your JavaScript code.
Your HTML should now be set up correctly!
Tip: Avoid using Ctrl + A in Codepen as it may select extra unwanted content.