Description is at the bottom 🙂
<body>
<h3>Timetable</h3>
<form id="dataForm">
<table id="table1">
<tr>
<td>Week A</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
</tr>
<tr>
<td>Period 1</td>
<td>
<input type="text" placeholder="Enter Class Info" id="d1p1w1" name="d1p1w1">
<select id="colors0" name="colors">
<option value="color0" selected output>Colour:</option>
<option value="color1">Red</option>
<option value="color2">Yellow</option>
<option value="color3">Green</option>
<option value="color4">Purple</option>
<option value="color5">Grey</option>
<option value="color6">Blue</option>
</select>
​ ​
</td>
<td>
<input type="text" placeholder="Enter Class Info" id="d2p1w1" name="d2p1w1">
<select id="colors1" name="colors2">
<option value="color0" selected output>Colour:</option>
<option value="color1">Red</option>
<option value="color2">Yellow</option>
<option value="color3">Green</option>
<option value="color4">Purple</option>
<option value="color5">Grey</option>
<option value="color6">Blue</option>
</select>
​ ​
</td>
<td>
<input type="text" placeholder="Enter Class Info" id="d3p1w1" name="d3p1w1">
<select id="colors2" name="colors3">
<option value="color0" selected output>Colour:</option>
<option value="color1">Red</option>
<option value="color2">Yellow</option>
<option value="color3">Green</option>
<option value="color4">Purple</option>
<option value="color5">Grey</option>
<option value="color6">Blue</option>
</select>
​ ​
<table id="dataTable">
<thead>
<tr>
<td>Week A</td>
<td>Monday</td>
<td></td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
</tr>
<tr>
<td>9:23</td>
<th id="d0">
<span id="day1p1w1"></span>
<script>
document.getElementById('colors0').onchange=changeEventHandler;
var indicator = document.getElementById("d0");
function changeEventHandler() {
indicator.classList = this.value;
}
</script>
</th>
<td>8:53</td>
<th id="d1">
<span id="day2p1w1"></span>
<script>
document.getElementById('colors1').onchange=changeEventHandler;
var indicator1 = document.getElementById("d1");
function changeEventHandler() {
indicator1.classList = this.value;
}
</script>
</th>
select option[value="color0"] {
background-color: #ffffff;
}
select option[value="color1"] {
background-color: #ffdfde;
}
select option[value="color2"] {
background-color: #ffffdf;
}
select option[value="color3"] {
background-color: #dfffde;
}
select option[value="color4"] {
background-color: #efdeff;
}
select option[value="color5"] {
background-color: #e6efef;
}
select option[value="color6"] {
background-color: #dffffe;
}
.color0 {background-color: #ffffff;}
.color1 {background-color: #ffdfde;}
.color2 {background-color: #ffffdf;}
.color3 {background-color: #dfffde;}
.color4 {background-color: #efdeff;}
.color5 {background-color: #e6efef;}
.color6 {background-color: #dffffe;}
<script>
function displayData() {
const d1p1w1 = document.getElementById("d1p1w1").value;
const d2p1w1 = document.getElementById("d2p1w1").value;
const d3p1w1 = document.getElementById("d3p1w1").value;
const d4p1w1 = document.getElementById("d4p1w1").value;
const d5p1w1 = document.getElementById("d5p1w1").value;
const d1p2w1 = document.getElementById("d1p2w1").value;
const d2p2w1 = document.getElementById("d2p2w1").value;
const d3p2w1 = document.getElementById("d3p2w1").value;
const d4p2w1 = document.getElementById("d4p2w1").value;
const d5p2w1 = document.getElementById("d5p2w1").value;
const d1p3w1 = document.getElementById("d1p3w1").value;
const d2p3w1 = document.getElementById("d2p3w1").value;
const d3p3w1 = document.getElementById("d3p3w1").value;
const d4p3w1 = document.getElementById("d4p3w1").value;
const d5p3w1 = document.getElementById("d5p3w1").value;
const d1p4w1 = document.getElementById("d1p4w1").value;
const d2p4w1 = document.getElementById("d2p4w1").value;
const d3p4w1 = document.getElementById("d3p4w1").value;
const d4p4w1 = document.getElementById("d4p4w1").value;
const d5p4w1 = document.getElementById("d5p4w1").value;
const d1p5w1 = document.getElementById("d1p5w1").value;
const d2p5w1 = document.getElementById("d2p5w1").value;
const d3p5w1 = document.getElementById("d3p5w1").value;
const d4p5w1 = document.getElementById("d4p5w1").value;
const d5p5w1 = document.getElementById("d5p5w1").value;
const d1p6w1 = document.getElementById("d1p6w1").value;
const d2p6w1 = document.getElementById("d2p6w1").value;
const d3p6w1 = document.getElementById("d3p6w1").value;
const d4p6w1 = document.getElementById("d4p6w1").value;
const d5p6w1 = document.getElementById("d5p6w1").value;
const d1p1w2 = document.getElementById("d1p1w2").value;
const d2p1w2 = document.getElementById("d2p1w2").value;
const d3p1w2 = document.getElementById("d3p1w2").value;
const d4p1w2 = document.getElementById("d4p1w2").value;
const d5p1w2 = document.getElementById("d5p1w2").value;
const d1p2w2 = document.getElementById("d1p2w2").value;
const d2p2w2 = document.getElementById("d2p2w2").value;
const d3p2w2 = document.getElementById("d3p2w2").value;
const d4p2w2 = document.getElementById("d4p2w2").value;
const d5p2w2 = document.getElementById("d5p2w2").value;
const d1p3w2 = document.getElementById("d1p3w2").value;
const d2p3w2 = document.getElementById("d2p3w2").value;
const d3p3w2 = document.getElementById("d3p3w2").value;
const d4p3w2 = document.getElementById("d4p3w2").value;
const d5p3w2 = document.getElementById("d5p3w2").value;
const d1p4w2 = document.getElementById("d1p4w2").value;
const d2p4w2 = document.getElementById("d2p4w2").value;
const d3p4w2 = document.getElementById("d3p4w2").value;
const d4p4w2 = document.getElementById("d4p4w2").value;
const d5p4w2 = document.getElementById("d5p4w2").value;
const d1p5w2 = document.getElementById("d1p5w2").value;
const d2p5w2 = document.getElementById("d2p5w2").value;
const d3p5w2 = document.getElementById("d3p5w2").value;
const d4p5w2 = document.getElementById("d4p5w2").value;
const d5p5w2 = document.getElementById("d5p5w2").value;
const d1p6w2 = document.getElementById("d1p6w2").value;
const d2p6w2 = document.getElementById("d2p6w2").value;
const d3p6w2 = document.getElementById("d3p6w2").value;
const d4p6w2 = document.getElementById("d4p6w2").value;
const d5p6w2 = document.getElementById("d5p6w2").value;
const data = {
d1p1w1: d1p1w1,
d2p1w1: d2p1w1,
d3p1w1: d3p1w1,
d4p1w1: d4p1w1,
d5p1w1: d5p1w1,
d1p2w1: d1p2w1,
d2p2w1: d2p2w1,
d3p2w1: d3p2w1,
d4p2w1: d4p2w1,
d5p2w1: d5p2w1,
d1p3w1: d1p3w1,
d2p3w1: d2p3w1,
d3p3w1: d3p3w1,
d4p3w1: d4p3w1,
d5p3w1: d5p3w1,
d1p4w1: d1p4w1,
d2p4w1: d2p4w1,
d3p4w1: d3p4w1,
d4p4w1: d4p4w1,
d5p4w1: d5p4w1,
d1p5w1: d1p5w1,
d2p5w1: d2p5w1,
d3p5w1: d3p5w1,
d4p5w1: d4p5w1,
d5p5w1: d5p5w1,
d1p6w1: d1p6w1,
d2p6w1: d2p6w1,
d3p6w1: d3p6w1,
d4p6w1: d4p6w1,
d5p6w1: d5p6w1,
d1p1w2: d1p1w2,
d2p1w2: d2p1w2,
d3p1w2: d3p1w2,
d4p1w2: d4p1w2,
d5p1w2: d5p1w2,
d1p2w2: d1p2w2,
d2p2w2: d2p2w2,
d3p2w2: d3p2w2,
d4p2w2: d4p2w2,
d5p2w2: d5p2w2,
d1p3w2: d1p3w2,
d2p3w2: d2p3w2,
d3p3w2: d3p3w2,
d4p3w2: d4p3w2,
d5p3w2: d5p3w2,
d1p4w2: d1p4w2,
d2p4w2: d2p4w2,
d3p4w2: d3p4w2,
d4p4w2: d4p4w2,
d5p4w2: d5p4w2,
d1p5w2: d1p5w2,
d2p5w2: d2p5w2,
d3p5w2: d3p5w2,
d4p5w2: d4p5w2,
d5p5w2: d5p5w2,
d1p6w2: d1p6w2,
d2p6w2: d2p6w2,
d3p6w2: d3p6w2,
d4p6w2: d4p6w2,
d5p6w2: d5p6w2,
};
document.getElementById('day1p1w1').innerHTML = d1p1w1;
document.getElementById('day2p1w1').innerHTML = d2p1w1;
document.getElementById('day3p1w1').innerHTML = d3p1w1;
document.getElementById('day4p1w1').innerHTML = d4p1w1;
document.getElementById('day5p1w1').innerHTML = d5p1w1;
document.getElementById('day1p2w1').innerHTML = d1p2w1;
document.getElementById('day2p2w1').innerHTML = d2p2w1;
document.getElementById('day3p2w1').innerHTML = d3p2w1;
document.getElementById('day4p2w1').innerHTML = d4p2w1;
document.getElementById('day5p2w1').innerHTML = d5p2w1;
document.getElementById('day1p3w1').innerHTML = d1p3w1;
document.getElementById('day2p3w1').innerHTML = d2p3w1;
document.getElementById('day3p3w1').innerHTML = d3p3w1;
document.getElementById('day4p3w1').innerHTML = d4p3w1;
document.getElementById('day5p3w1').innerHTML = d5p3w1;
document.getElementById('day1p4w1').innerHTML = d1p4w1;
document.getElementById('day2p4w1').innerHTML = d2p4w1;
document.getElementById('day3p4w1').innerHTML = d3p4w1;
document.getElementById('day4p4w1').innerHTML = d4p4w1;
document.getElementById('day5p4w1').innerHTML = d5p4w1;
document.getElementById('day1p5w1').innerHTML = d1p5w1;
document.getElementById('day2p5w1').innerHTML = d2p5w1;
document.getElementById('day3p5w1').innerHTML = d3p5w1;
document.getElementById('day4p5w1').innerHTML = d4p5w1;
document.getElementById('day5p5w1').innerHTML = d5p5w1;
document.getElementById('day1p6w1').innerHTML = d1p6w1;
document.getElementById('day2p6w1').innerHTML = d2p6w1;
document.getElementById('day3p6w1').innerHTML = d3p6w1;
document.getElementById('day4p6w1').innerHTML = d4p6w1;
document.getElementById('day5p6w1').innerHTML = d5p6w1;
document.getElementById('day1p1w2').innerHTML = d1p1w2;
document.getElementById('day2p1w2').innerHTML = d2p1w2;
document.getElementById('day3p1w2').innerHTML = d3p1w2;
document.getElementById('day4p1w2').innerHTML = d4p1w2;
document.getElementById('day5p1w2').innerHTML = d5p1w2;
document.getElementById('day1p2w2').innerHTML = d1p2w2;
document.getElementById('day2p2w2').innerHTML = d2p2w2;
document.getElementById('day3p2w2').innerHTML = d3p2w2;
document.getElementById('day4p2w2').innerHTML = d4p2w2;
document.getElementById('day5p2w2').innerHTML = d5p2w2;
document.getElementById('day1p3w2').innerHTML = d1p3w2;
document.getElementById('day2p3w2').innerHTML = d2p3w2;
document.getElementById('day3p3w2').innerHTML = d3p3w2;
document.getElementById('day4p3w2').innerHTML = d4p3w2;
document.getElementById('day5p3w2').innerHTML = d5p3w2;
document.getElementById('day1p4w2').innerHTML = d1p4w2;
document.getElementById('day2p4w2').innerHTML = d2p4w2;
document.getElementById('day3p4w2').innerHTML = d3p4w2;
document.getElementById('day4p4w2').innerHTML = d4p4w2;
document.getElementById('day5p4w2').innerHTML = d5p4w2;
document.getElementById('day1p5w2').innerHTML = d1p5w2;
document.getElementById('day2p5w2').innerHTML = d2p5w2;
document.getElementById('day3p5w2').innerHTML = d3p5w2;
document.getElementById('day4p5w2').innerHTML = d4p5w2;
document.getElementById('day5p5w2').innerHTML = d5p5w2;
document.getElementById('day1p6w2').innerHTML = d1p6w2;
document.getElementById('day2p6w2').innerHTML = d2p6w2;
document.getElementById('day3p6w2').innerHTML = d3p6w2;
document.getElementById('day4p6w2').innerHTML = d4p6w2;
document.getElementById('day5p6w2').innerHTML = d5p6w2;
document.getElementById("d1p1w1").value = "";
document.getElementById("d2p1w1").value = "";
document.getElementById("d3p1w1").value = "";
document.getElementById("d4p1w1").value = "";
document.getElementById("d5p1w1").value = "";
document.getElementById("d1p2w1").value = "";
document.getElementById("d2p2w1").value = "";
document.getElementById("d3p2w1").value = "";
document.getElementById("d4p2w1").value = "";
document.getElementById("d5p2w1").value = "";
document.getElementById("d1p3w1").value = "";
document.getElementById("d2p3w1").value = "";
document.getElementById("d3p3w1").value = "";
document.getElementById("d4p3w1").value = "";
document.getElementById("d5p3w1").value = "";
document.getElementById("d1p4w1").value = "";
document.getElementById("d2p4w1").value = "";
document.getElementById("d3p4w1").value = "";
document.getElementById("d4p4w1").value = "";
document.getElementById("d5p4w1").value = "";
document.getElementById("d1p5w1").value = "";
document.getElementById("d2p5w1").value = "";
document.getElementById("d3p5w1").value = "";
document.getElementById("d4p5w1").value = "";
document.getElementById("d5p5w1").value = "";
document.getElementById("d1p6w1").value = "";
document.getElementById("d2p6w1").value = "";
document.getElementById("d3p6w1").value = "";
document.getElementById("d4p6w1").value = "";
document.getElementById("d5p6w1").value = "";
document.getElementById("d1p1w2").value = "";
document.getElementById("d2p1w2").value = "";
document.getElementById("d3p1w2").value = "";
document.getElementById("d4p1w2").value = "";
document.getElementById("d5p1w2").value = "";
document.getElementById("d1p2w2").value = "";
document.getElementById("d2p2w2").value = "";
document.getElementById("d3p2w2").value = "";
document.getElementById("d4p2w2").value = "";
document.getElementById("d5p2w2").value = "";
document.getElementById("d1p3w2").value = "";
document.getElementById("d2p3w2").value = "";
document.getElementById("d3p3w2").value = "";
document.getElementById("d4p3w2").value = "";
document.getElementById("d5p3w2").value = "";
document.getElementById("d1p4w2").value = "";
document.getElementById("d2p4w2").value = "";
document.getElementById("d3p4w2").value = "";
document.getElementById("d4p4w2").value = "";
document.getElementById("d5p4w2").value = "";
document.getElementById("d1p5w2").value = "";
document.getElementById("d2p5w2").value = "";
document.getElementById("d3p5w2").value = "";
document.getElementById("d4p5w2").value = "";
document.getElementById("d5p5w2").value = "";
document.getElementById("d1p6w2").value = "";
document.getElementById("d2p6w2").value = "";
document.getElementById("d3p6w2").value = "";
document.getElementById("d4p6w2").value = "";
document.getElementById("d5p6w2").value = "";
document.getElementById("dataForm").style.display = "none";
document.getElementById("dataTable").style.display = "inline";
}
</script>
The first block of code is the input table, it continues repeating for many more lines of code (you can see this in the java code), it looks like this in the final website enter image description here
The second block of code is the output table, it also continues repeating for many more lines of code, it looks like this in the final website enter image description here
The third block of code is just the CSS for the colour picker
The fourth block of code is the JavaScript that takes the value from the first table and puts in the second table
The whole website is front end (i think thats the term) and i would like to keep it front end if possible
Is there a way to condense this code?
The code is the most condensed version i could come up with.